@vite-pwa/nuxt 0.1.2 → 0.2.0

package/configuration.d.ts

@@ -0,0 +1,5 @@
+declare module 'virtual:nuxt-pwa-configuration' {
+  export const enabled: boolean
+  export const installPrompt: string | undefined
+  export const periodicSyncForUpdates: number
+}

package/dist/module.d.ts

@@ -1,30 +1,6 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { VitePWAOptions } from 'vite-plugin-pwa';
-import { UnwrapNestedRefs, Ref } from 'vue';
 
-interface PwaInjection {
-    isInstalled: boolean;
-    showInstallPrompt: Ref<boolean>;
-    cancelInstall: () => void;
-    install: () => Promise<void>;
-    swActivated: Ref<boolean>;
-    registrationError: Ref<boolean>;
-    offlineReady: Ref<boolean>;
-    needRefresh: Ref<boolean>;
-    updateServiceWorker: (reloadPage?: boolean | undefined) => Promise<void>;
-    cancelPrompt: () => Promise<void>;
-    getSWRegistration: () => ServiceWorkerRegistration | undefined;
-}
-declare module '#app/nuxt' {
-    interface NuxtApp {
-        $pwa: UnwrapNestedRefs<PwaInjection>;
-    }
-}
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        $pwa: UnwrapNestedRefs<PwaInjection>;
-    }
-}
 interface ClientOptions {
     /**
      * Exposes the plugin: defaults to true.
@@ -59,4 +35,4 @@ interface ModuleOptions extends Partial<VitePWAOptions> {
 
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { ClientOptions, ModuleOptions, PwaInjection, _default as default };
+export { ClientOptions, ModuleOptions, _default as default };

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "pwa",
   "configKey": "pwa",
-  "version": "0.1.2"
+  "version": "0.2.0"
 }

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { join } from 'node:path';
 import { writeFile, mkdir } from 'node:fs/promises';
-import { defineNuxtModule, createResolver, addPluginTemplate, addComponent, extendWebpackConfig } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, addComponent, extendWebpackConfig } from '@nuxt/kit';
 import { VitePWA } from 'vite-plugin-pwa';
 import { resolve } from 'pathe';
 
@@ -85,21 +85,26 @@ const module = defineNuxtModule({
       return vitePwaClientPlugin?.api;
     };
     const client = options.client ?? { registerPlugin: true, installPrompt: false, periodicSyncForUpdates: 0 };
+    const runtimeDir = resolver.resolve("./runtime");
+    if (!nuxt.options.ssr)
+      nuxt.options.build.transpile.push(runtimeDir);
     if (client.registerPlugin) {
-      addPluginTemplate({
-        src: resolver.resolve("../templates/pwa.client.ts"),
-        write: nuxt.options.dev || options.writePlugin,
-        options: {
-          periodicSyncForUpdates: typeof client.periodicSyncForUpdates === "number" ? client.periodicSyncForUpdates : 0,
-          installPrompt: typeof client.installPrompt === "undefined" || client.installPrompt === false ? void 0 : client.installPrompt === true || client.installPrompt.trim() === "" ? "vite-pwa:hide-install" : client.installPrompt.trim()
-        }
+      addPlugin({
+        src: resolver.resolve(runtimeDir, "plugins/pwa.client"),
+        mode: "client"
+      });
+    } else {
+      addPlugin({
+        src: resolver.resolve(runtimeDir, "plugins/pwa.client.stub"),
+        mode: "client"
       });
     }
     await addComponent({
       name: "VitePwaManifest",
-      filePath: resolver.resolve("./runtime/VitePwaManifest")
+      filePath: resolver.resolve(runtimeDir, "components/VitePwaManifest")
     });
     nuxt.hook("prepare:types", ({ references }) => {
+      references.push({ types: "@vite-pwa/nuxt/configuration" });
       references.push({ types: "vite-plugin-pwa/vue" });
       references.push({ types: "vite-plugin-pwa/info" });
     });
@@ -123,6 +128,8 @@ const module = defineNuxtModule({
       if (plugin)
         throw new Error("Remove vite-plugin-pwa plugin from Vite Plugins entry in Nuxt config file!");
       if (options.manifest && isClient) {
+        const configuration = "virtual:nuxt-pwa-configuration";
+        const resolvedConfiguration = `\0${configuration}`;
         viteInlineConfig.plugins.push({
           name: "vite-pwa-nuxt:webmanifest:build",
           apply: "build",
@@ -135,6 +142,22 @@ const module = defineNuxtModule({
               await writeWebManifest(manifestDir, options.manifestFilename || "manifest.webmanifest", api);
             }
           }
+        }, {
+          name: "vite-pwa-nuxt:configuration",
+          enforce: "pre",
+          resolveId(id) {
+            if (id === configuration)
+              return resolvedConfiguration;
+          },
+          load(id) {
+            if (id === resolvedConfiguration) {
+              const installPrompt = typeof client.installPrompt === "undefined" || client.installPrompt === false ? void 0 : client.installPrompt === true || client.installPrompt.trim() === "" ? "vite-pwa:hide-install" : client.installPrompt.trim();
+              return `export const enabled = ${client.registerPlugin}
+export const installPrompt = ${JSON.stringify(installPrompt)}
+export const periodicSyncForUpdates = ${typeof client.periodicSyncForUpdates === "number" ? client.periodicSyncForUpdates : 0}
+`;
+            }
+          }
         });
       }
       const plugins = [...VitePWA(options).filter((p) => p.name !== "vite-plugin-pwa:build")];

package/dist/runtime/plugins/pwa.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/pwa.client.mjs

@@ -0,0 +1,112 @@
+import { nextTick, reactive, ref } from "vue";
+import { useRegisterSW } from "virtual:pwa-register/vue";
+import { installPrompt, periodicSyncForUpdates } from "virtual:nuxt-pwa-configuration";
+import { defineNuxtPlugin } from "#imports";
+export default defineNuxtPlugin(() => {
+  const registrationError = ref(false);
+  const swActivated = ref(false);
+  const showInstallPrompt = ref(false);
+  const hideInstall = ref(!installPrompt ? true : localStorage.getItem(installPrompt) === "true");
+  const ua = navigator.userAgent;
+  const ios = ua.match(/iPhone|iPad|iPod/);
+  const standalone = window.matchMedia("(display-mode: standalone)").matches;
+  const isInstalled = !!(standalone || ios && !ua.match(/Safari/));
+  let swRegistration;
+  const getSWRegistration = () => swRegistration;
+  const registerPeriodicSync = (swUrl, r, timeout) => {
+    setInterval(async () => {
+      if ("connection" in navigator && !navigator.onLine)
+        return;
+      const resp = await fetch(swUrl, {
+        cache: "no-store",
+        headers: {
+          "cache": "no-store",
+          "cache-control": "no-cache"
+        }
+      });
+      if (resp?.status === 200)
+        await r.update();
+    }, timeout);
+  };
+  const {
+    offlineReady,
+    needRefresh,
+    updateServiceWorker
+  } = useRegisterSW({
+    immediate: true,
+    onRegisterError() {
+      registrationError.value = true;
+    },
+    onRegisteredSW(swUrl, r) {
+      swRegistration = r;
+      const timeout = periodicSyncForUpdates;
+      if (timeout > 0) {
+        if (r?.active?.state === "activated") {
+          swActivated.value = true;
+          registerPeriodicSync(swUrl, r, timeout * 1e3);
+        } else if (r?.installing) {
+          r.installing.addEventListener("statechange", (e) => {
+            const sw = e.target;
+            swActivated.value = sw.state === "activated";
+            if (swActivated.value)
+              registerPeriodicSync(swUrl, r, timeout * 1e3);
+          });
+        }
+      }
+    }
+  });
+  const cancelPrompt = async () => {
+    offlineReady.value = false;
+    needRefresh.value = false;
+  };
+  let install = () => Promise.resolve();
+  let cancelInstall = () => {
+  };
+  if (!hideInstall.value) {
+    let deferredPrompt;
+    const beforeInstallPrompt = (e) => {
+      e.preventDefault();
+      deferredPrompt = e;
+      showInstallPrompt.value = true;
+    };
+    window.addEventListener("beforeinstallprompt", beforeInstallPrompt);
+    window.addEventListener("appinstalled", () => {
+      deferredPrompt = void 0;
+      showInstallPrompt.value = false;
+    });
+    cancelInstall = () => {
+      deferredPrompt = void 0;
+      showInstallPrompt.value = false;
+      window.removeEventListener("beforeinstallprompt", beforeInstallPrompt);
+      hideInstall.value = true;
+      localStorage.setItem(installPrompt, "true");
+    };
+    install = async () => {
+      if (!showInstallPrompt.value || !deferredPrompt) {
+        showInstallPrompt.value = false;
+        return;
+      }
+      showInstallPrompt.value = false;
+      await nextTick();
+      deferredPrompt.prompt();
+      await deferredPrompt.userChoice;
+    };
+  }
+  return {
+    provide: {
+      pwa: reactive({
+        isInstalled,
+        showInstallPrompt,
+        cancelInstall,
+        install,
+        swActivated,
+        registrationError,
+        offlineReady,
+        needRefresh,
+        updateServiceWorker,
+        cancelPrompt,
+        getSWRegistration
+      })
+    }
+  };
+});

package/dist/runtime/plugins/pwa.client.stub.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/pwa.client.stub.mjs

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from "#imports";
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      pwa: void 0
+    }
+  };
+});

package/dist/runtime/plugins/types.d.ts

@@ -0,0 +1,14 @@
+import type { Ref } from 'vue';
+export interface PwaInjection {
+    isInstalled: boolean;
+    showInstallPrompt: Ref<boolean>;
+    cancelInstall: () => void;
+    install: () => Promise<void>;
+    swActivated: Ref<boolean>;
+    registrationError: Ref<boolean>;
+    offlineReady: Ref<boolean>;
+    needRefresh: Ref<boolean>;
+    updateServiceWorker: (reloadPage?: boolean | undefined) => Promise<void>;
+    cancelPrompt: () => Promise<void>;
+    getSWRegistration: () => ServiceWorkerRegistration | undefined;
+}

package/dist/types.d.ts

@@ -12,4 +12,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { ClientOptions, ModuleOptions, PwaInjection, default } from './module'
+export { ClientOptions, ModuleOptions, default } from './module'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vite-pwa/nuxt",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "packageManager": "pnpm@8.10.2",
   "description": "Zero-config PWA for Nuxt 3",
   "author": "antfu <anthonyfu117@hotmail.com>",
@@ -23,15 +23,18 @@
   "exports": {
     ".": {
       "types": "./dist/types.d.ts",
-      "require": "./dist/module.cjs",
-      "import": "./dist/module.mjs"
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    },
+    "./configuration": {
+      "types": "./configuration.d.ts"
     }
   },
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
   "files": [
     "dist",
-    "templates"
+    "*.d.ts"
   ],
   "scripts": {
     "prepack": "nuxt-module-build prepare && nuxt-module-build",
@@ -54,23 +57,27 @@
     "test:with-build": "nr dev:prepare && nr prepack && nr test"
   },
   "peerDependencies": {
-    "@nuxt/kit": "^3.5.3",
+    "@nuxt/kit": "^3.6.2",
     "vite-plugin-pwa": ">=0.16.5 <1"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.5.3",
+    "@nuxt/kit": "^3.6.2",
+    "pathe": "^1.1.1",
+    "ufo": "^1.3.1",
     "vite-plugin-pwa": ">=0.16.5 <1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.41.0",
     "@antfu/ni": "^0.21.8",
     "@nuxt/module-builder": "^0.4.0",
-    "@nuxt/schema": "^3.5.3",
+    "@nuxt/schema": "^3.6.5",
     "@nuxt/test-utils": "^3.5.3",
     "@playwright/test": "^1.37.1",
+    "@types/node": "^18",
     "bumpp": "^9.2.0",
     "eslint": "^8.49.0",
-    "nuxt": "^3.5.3",
+    "node-fetch-native": "^1.4.1",
+    "nuxt": "^3.6.5",
     "serve": "^14.2.1",
     "typescript": "^5.2.2",
     "vitest": "^0.34.4"
@@ -80,8 +87,12 @@
       "node:child_process",
       "node:fs",
       "consola",
+      "esbuild",
       "pathe",
-      "ufo"
+      "rollup",
+      "ufo",
+      "vite",
+      "vite-plugin-pwa"
     ]
   }
 }

package/templates/pwa.client.ts

@@ -1,136 +0,0 @@
-import { ref, reactive, nextTick, type UnwrapNestedRefs } from 'vue'
-import { useRegisterSW } from 'virtual:pwa-register/vue'
-import { defineNuxtPlugin } from '#imports'
-
-import { type PwaInjection } from '@vite-pwa/nuxt'
-
-const options: { periodicSyncForUpdates: number; installPrompt?: string } = <%= JSON.stringify(options) %>
-
-export default defineNuxtPlugin(() => {
-  const registrationError = ref(false)
-  const swActivated = ref(false)
-  const showInstallPrompt = ref(false)
-  const hideInstall = ref(!options.installPrompt ? true : localStorage.getItem(options.installPrompt) === 'true')
-
-  // https://thomashunter.name/posts/2021-12-11-detecting-if-pwa-twa-is-installed
-  const ua = navigator.userAgent
-  const ios = ua.match(/iPhone|iPad|iPod/)
-  const standalone = window.matchMedia('(display-mode: standalone)').matches
-  const isInstalled = !!(standalone || (ios && !ua.match(/Safari/)))
-
-  let swRegistration: ServiceWorkerRegistration | undefined
-
-  const getSWRegistration = () => swRegistration
-
-  const registerPeriodicSync = (swUrl: string, r: ServiceWorkerRegistration, timeout: number) => {
-    setInterval(async () => {
-      if (('connection' in navigator) && !navigator.onLine)
-        return
-
-      const resp = await fetch(swUrl, {
-        cache: 'no-store',
-        headers: {
-          'cache': 'no-store',
-          'cache-control': 'no-cache',
-        },
-      })
-
-      if (resp?.status === 200)
-        await r.update()
-    }, timeout)
-  }
-
-  const {
-    offlineReady, needRefresh, updateServiceWorker,
-  } = useRegisterSW({
-    immediate: true,
-    onRegisterError() {
-      registrationError.value = true
-    },
-    onRegisteredSW(swUrl, r) {
-      swRegistration = r
-      const timeout = options.periodicSyncForUpdates
-      if (timeout > 0) {
-        // should add support in pwa plugin
-        if (r?.active?.state === 'activated') {
-          swActivated.value = true
-          registerPeriodicSync(swUrl, r, timeout * 1000)
-        }
-        else if (r?.installing) {
-          r.installing.addEventListener('statechange', (e) => {
-            const sw = e.target as ServiceWorker
-            swActivated.value = sw.state === 'activated'
-            if (swActivated.value)
-              registerPeriodicSync(swUrl, r, timeout * 1000)
-          })
-        }
-      }
-    },
-  })
-
-  const cancelPrompt = async () => {
-    offlineReady.value = false
-    needRefresh.value = false
-  }
-
-  let install: () => Promise<void> = () => Promise.resolve()
-  let cancelInstall: () => void = () => {}
-
-  if (!hideInstall.value) {
-    type InstallPromptEvent = Event & {
-      prompt: () => void
-      userChoice: Promise<{ outcome: 'dismissed' | 'accepted' }>
-    }
-
-    let deferredPrompt: InstallPromptEvent | undefined
-
-    const beforeInstallPrompt = (e: Event) => {
-      e.preventDefault()
-      deferredPrompt = e as InstallPromptEvent
-      showInstallPrompt.value = true
-    }
-    window.addEventListener('beforeinstallprompt', beforeInstallPrompt)
-    window.addEventListener('appinstalled', () => {
-      deferredPrompt = undefined
-      showInstallPrompt.value = false
-    })
-
-    cancelInstall = () => {
-      deferredPrompt = undefined
-      showInstallPrompt.value = false
-      window.removeEventListener('beforeinstallprompt', beforeInstallPrompt)
-      hideInstall.value = true
-      localStorage.setItem(options.installPrompt!, 'true')
-    }
-
-    install = async () => {
-      if (!showInstallPrompt.value || !deferredPrompt) {
-        showInstallPrompt.value = false
-        return
-      }
-
-      showInstallPrompt.value = false
-      await nextTick()
-      deferredPrompt.prompt()
-      await deferredPrompt.userChoice
-    }
-  }
-
-  return {
-    provide: {
-      pwa: reactive({
-        isInstalled,
-        showInstallPrompt,
-        cancelInstall,
-        install,
-        swActivated,
-        registrationError,
-        offlineReady,
-        needRefresh,
-        updateServiceWorker,
-        cancelPrompt,
-        getSWRegistration,
-      }) satisfies UnwrapNestedRefs<PwaInjection>,
-    },
-  }
-})