Merge pull request #77 from WailanTirajoh/chore/pwa

chore(deps): change pwa package to vite-pwa nuxt

Author: WailanTirajoh

app.vue

@@ -1,7 +1,18 @@
 <script setup lang="ts">
-import { TwButton, TwDialog, TwFeather } from "vue3-tailwind";
+import { useToast, TwButton, TwDialog, TwFeather } from "vue3-tailwind";
+const { $pwa } = useNuxtApp();
+
+const toast = useToast();
+onMounted(() => {
+  if ($pwa && $pwa.offlineReady) {
+    toast.success({
+      message: "App ready to work offline",
+    });
+  }
+});
 </script>
 <template>
+  <NuxtPwaManifest />
   <NuxtLayout>
     <TwDialog>
       <template v-slot="{ isShown, dialog, confirm, reject }">

nuxt.config.ts

@@ -23,12 +23,52 @@ export default defineNuxtConfig({
   modules: [
     "@pinia/nuxt",
     "@pinia-plugin-persistedstate/nuxt",
-    "@kevinmarrec/nuxt-pwa",
+    "@vite-pwa/nuxt",
     "@vueuse/nuxt",
   ],
   pwa: {
+    registerType: "autoUpdate",
+    manifest: {
+      name: "Nuxt 3 admin template",
+      short_name: "Nuxt3 Admin",
+      theme_color: "#ffffff",
+      icons: [
+        {
+          src: "pwa-192x192.png",
+          sizes: "192x192",
+          type: "image/png",
+        },
+        {
+          src: "pwa-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+        },
+        {
+          src: "pwa-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+          purpose: "any maskable",
+        },
+      ],
+    },
     workbox: {
-      enabled: false,
+      globPatterns: ["**/*.{js,css,html,png,svg,ico}"],
+    },
+    injectManifest: {
+      globPatterns: ["**/*.{js,css,html,png,svg,ico}"],
+    },
+    client: {
+      installPrompt: true,
+      // you don't need to include this: only for testing purposes
+      // if enabling periodic sync for update use 1 hour or so (periodicSyncForUpdates: 3600)
+      periodicSyncForUpdates: 20,
+    },
+    devOptions: {
+      enabled: true,
+      suppressWarnings: true,
+      navigateFallback: "/",
+      navigateFallbackAllowlist: [/^\/$/],
+      type: "module",
     },
   },
 });

package.json

@@ -10,11 +10,11 @@
   "devDependencies": {
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
-    "@kevinmarrec/nuxt-pwa": "^0.17.0",
     "@pinia-plugin-persistedstate/nuxt": "^1.0.0",
     "@tailwindcss/typography": "^0.5.8",
     "@types/feather-icons": "^4.29.0",
     "@types/quill": "^2.0.9",
+    "@vite-pwa/nuxt": "^0.9.1",
     "@vueuse/core": "^10.1.2",
     "@vueuse/nuxt": "^10.1.2",
     "autoprefixer": "^10.4.13",

public/pwa-192x192.png

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=https://github.com/

public/pwa-192x192.png:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=https://github.com/