@vite-pwa/nuxt 0.0.1

package/README.md

@@ -0,0 +1,89 @@
+<p align='center'>
+<img src='./hero.png' alt="@vite-pwa/nuxt - Zero-config PWA for Nuxt 3"><br>
+Zero-config PWA Plugin for Nuxt 3
+</p>
+
+<p align='center'>
+<a href='https://www.npmjs.com/package/@vite-pwa/nuxt' target="__blank">
+<img src='https://img.shields.io/npm/v/@vite-pwa/nuxt?color=33A6B8&label=' alt="NPM version">
+</a>
+<a href="https://www.npmjs.com/package/@vite-pwa/nuxt" target="__blank">
+    <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vite-pwa/nuxt?color=476582&label=">
+</a>
+<a href="https://vite-pwa-org.netlify.app/frameworks/nuxt" target="__blank">
+    <img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20guides&color=2e859c" alt="Docs & Guides">
+</a>
+<br>
+<a href="https://github.com/vite-pwa/nuxt" target="__blank">
+<img alt="GitHub stars" src="https://img.shields.io/github/stars/vite-pwa/nuxt?style=social">
+</a>
+</p>
+
+<br>
+
+<p align="center">
+  <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg">
+    <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/>
+  </a>
+</p>
+
+
+## 🚀 Features
+
+- 📖 [**Documentation & guides**](https://vite-pwa-org.netlify.app/)
+- 👌 **Zero-Config**: sensible built-in default configs for common use cases
+- 🔩 **Extensible**: expose the full ability to customize the behavior of the plugin
+- 🦾 **Type Strong**: written in [TypeScript](https://www.typescriptlang.org/)
+- 🔌 **Offline Support**: generate service worker with offline support (via Workbox)
+- ⚡ **Fully tree shakable**: auto inject Web App Manifest
+- 💬 **Prompt for new content**: built-in support for Vanilla JavaScript, Vue 3, React, Svelte, SolidJS and Preact
+- ⚙️ **Stale-while-revalidate**: automatic reload when new content is available
+- ✨ **Static assets handling**: configure static assets for offline support
+- 🐞 **Development Support**: debug your custom service worker logic as you develop your application
+
+## 📦 Install
+
+> Requires Vite 3.2.0+ and Nuxt 3.0.0+
+
+```bash
+npm i @vite-pwa/nuxt -D 
+
+# yarn 
+yarn add @vite-pwa/nuxt -D
+
+# pnpm 
+pnpm add @vite-pwa/nuxt -D
+```
+
+## 🦄 Usage
+
+Add `@vite-pwa/nuxt` module to `nuxt.config.ts` and configure it:
+
+```ts
+// nuxt.config.ts
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({
+  modules: [
+    '@vite-pwa/nuxt'
+  ],
+  pwa: {
+    /* PWA options */
+  }
+})
+```
+
+Read the [📖 documentation](https://vite-pwa-org.netlify.app/frameworks/nuxt) for a complete guide on how to configure and use
+this plugin.
+
+## 👀 Full config
+
+Check out the type declaration [src/types.ts](./src/types.ts) and the following links for more details.
+
+- [Web app manifests](https://developer.mozilla.org/en-US/docs/Web/Manifest)
+- [Workbox](https://developers.google.com/web/tools/workbox)
+
+
+## 📄 License
+
+MIT License © 2023-PRESENT [Anthony Fu](https://github.com/antfu)

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -0,0 +1,48 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { VitePWAOptions } from 'vite-plugin-pwa';
+
+interface ClientOptions {
+    /**
+     * Exposes the plugin: defaults to true.
+     */
+    registerPlugin?: boolean;
+    /**
+     * Registers a periodic sync for updates interval: value in seconds.
+     */
+    periodicSyncForUpdates?: number;
+    /**
+     * Will prevent showing native PWA install prompt: defaults to false.
+     *
+     * When set to true or no empty string, the native PWA install prompt will be prevented.
+     *
+     * When set to a string, it will be used as the key in `localStorage` to prevent show the PWA install prompt widget.
+     *
+     * When set to true, the key used will be `vite-pwa:hide-install`.
+     */
+    installPrompt?: boolean | string;
+}
+interface VitePWANuxtOptions extends Partial<VitePWAOptions> {
+    registerWebManifestInRouteRules?: boolean;
+    /**
+     * Writes the plugin to disk: defaults to false (debug).
+     */
+    writePlugin?: boolean;
+    /**
+     * Options for plugin.
+     */
+    client?: ClientOptions;
+}
+declare module '@nuxt/schema' {
+    interface NuxtConfig {
+        pwa?: {
+            [K in keyof VitePWANuxtOptions]?: Partial<VitePWANuxtOptions[K]>;
+        };
+    }
+    interface NuxtOptions {
+        pwa: VitePWANuxtOptions;
+    }
+}
+
+declare const _default: _nuxt_schema.NuxtModule<VitePWANuxtOptions>;
+
+export { ClientOptions, VitePWANuxtOptions, _default as default };

package/dist/module.json

@@ -0,0 +1,5 @@
+{
+  "name": "pwa",
+  "configKey": "pwa",
+  "version": "0.0.1"
+}

package/dist/module.mjs

@@ -0,0 +1,147 @@
+import { defineNuxtModule, createResolver, addPluginTemplate, addComponent } from '@nuxt/kit';
+import { VitePWA } from 'vite-plugin-pwa';
+import { resolve } from 'pathe';
+
+function configurePWAOptions(options, nuxt) {
+  if (!options.outDir) {
+    const publicDir = nuxt.options.nitro?.output?.publicDir;
+    options.outDir = publicDir ? resolve(publicDir) : resolve(nuxt.options.buildDir, "../.output/public");
+  }
+  let config;
+  if (options.strategies === "injectManifest") {
+    options.injectManifest = options.injectManifest ?? {};
+    config = options.injectManifest;
+  } else {
+    options.workbox = options.workbox ?? {};
+    if (options.registerType === "autoUpdate" && (options.injectRegister === "script" || options.injectRegister === "inline")) {
+      options.workbox.clientsClaim = true;
+      options.workbox.skipWaiting = true;
+    }
+    if (nuxt.options.dev) {
+      options.workbox.navigateFallback = nuxt.options.app.baseURL ?? "/";
+      if (options.devOptions?.enabled && !options.devOptions.navigateFallbackAllowlist)
+        options.devOptions.navigateFallbackAllowlist = [new RegExp(nuxt.options.app.baseURL) ?? /\//];
+    }
+    config = options.workbox;
+  }
+  if (!nuxt.options.dev)
+    config.manifestTransforms = [createManifestTransform(nuxt.options.app.baseURL ?? "/")];
+}
+function createManifestTransform(base) {
+  return async (entries) => {
+    entries.filter((e) => e && e.url.endsWith(".html")).forEach((e) => {
+      const url = e.url.startsWith("/") ? e.url.slice(1) : e.url;
+      if (url === "index.html") {
+        e.url = base;
+      } else {
+        const parts = url.split("/");
+        parts[parts.length - 1] = parts[parts.length - 1].replace(/\.html$/, "");
+        e.url = parts.length > 1 ? parts.slice(0, parts.length - 1).join("/") : parts[0];
+      }
+    });
+    return { manifest: entries, warnings: [] };
+  };
+}
+
+const module = defineNuxtModule({
+  meta: {
+    name: "pwa",
+    configKey: "pwa"
+  },
+  defaults: (nuxt) => ({
+    base: nuxt.options.app.baseURL,
+    scope: nuxt.options.app.baseURL,
+    injectRegister: false,
+    includeManifestIcons: false,
+    registerPlugin: true,
+    client: {
+      registerPlugin: true,
+      installPrompt: false,
+      periodicSyncForUpdates: 0
+    }
+  }),
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    let vitePwaClientPlugin;
+    const resolveVitePluginPWAAPI = () => {
+      return vitePwaClientPlugin?.api;
+    };
+    const client = options.client ?? { registerPlugin: true, installPrompt: false, periodicSyncForUpdates: 0 };
+    if (client.registerPlugin) {
+      addPluginTemplate({
+        src: resolver.resolve("../templates/pwa.client.ts"),
+        write: true,
+        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()
+        }
+      });
+    }
+    await addComponent({
+      name: "VitePwaManifest",
+      filePath: resolver.resolve("./runtime/VitePwaManifest")
+    });
+    nuxt.hook("nitro:init", (nitro) => {
+      options.outDir = nitro.options.output.publicDir;
+      options.injectManifest = options.injectManifest || {};
+      options.injectManifest.globDirectory = nitro.options.output.publicDir;
+    });
+    nuxt.hook("vite:extend", ({ config }) => {
+      const plugin = config.plugins?.find((p) => p && typeof p === "object" && "name" in p && p.name === "vite-plugin-pwa");
+      if (plugin)
+        throw new Error("Remove vite-plugin-pwa plugin from Vite Plugins entry in Nuxt config file!");
+    });
+    nuxt.hook("vite:extendConfig", async (viteInlineConfig, { isClient }) => {
+      viteInlineConfig.plugins = viteInlineConfig.plugins || [];
+      const plugin = viteInlineConfig.plugins.find((p) => p && typeof p === "object" && "name" in p && p.name === "vite-plugin-pwa");
+      if (plugin)
+        throw new Error("Remove vite-plugin-pwa plugin from Vite Plugins entry in Nuxt config file!");
+      configurePWAOptions(options, nuxt);
+      const plugins = VitePWA(options);
+      viteInlineConfig.plugins.push(plugins);
+      if (isClient)
+        vitePwaClientPlugin = plugins.find((p) => p.name === "vite-plugin-pwa");
+    });
+    if (nuxt.options.dev) {
+      const webManifest = `${nuxt.options.app.baseURL}${options.devOptions?.webManifestUrl ?? options.manifestFilename ?? "manifest.webmanifest"}`;
+      const devSw = `${nuxt.options.app.baseURL}dev-sw.js?dev-sw`;
+      const workbox = `${nuxt.options.app.baseURL}workbox-`;
+      const emptyHandle = (_req, _res, next) => {
+        next();
+      };
+      nuxt.hook("vite:serverCreated", (viteServer, { isServer }) => {
+        if (isServer)
+          return;
+        viteServer.middlewares.stack.push({ route: webManifest, handle: emptyHandle });
+        viteServer.middlewares.stack.push({ route: devSw, handle: emptyHandle });
+      });
+      if (!options.strategies || options.strategies === "generateSW") {
+        nuxt.hook("vite:serverCreated", (viteServer, { isServer }) => {
+          if (isServer)
+            return;
+          viteServer.middlewares.stack.push({ route: workbox, handle: emptyHandle });
+        });
+        nuxt.hook("close", async () => {
+        });
+      }
+    } else {
+      if (options.registerWebManifestInRouteRules) {
+        nuxt.hook("nitro:config", async (nitroConfig) => {
+          nitroConfig.routeRules = nitroConfig.routeRules || {};
+          nitroConfig.routeRules[`${nuxt.options.app.baseURL}${options.manifestFilename ?? "manifest.webmanifest"}`] = {
+            headers: {
+              "Content-Type": "application/manifest+json"
+            }
+          };
+        });
+      }
+      nuxt.hook("nitro:init", (nitro) => {
+        nitro.hooks.hook("rollup:before", async () => {
+          await resolveVitePluginPWAAPI()?.generateSW();
+        });
+      });
+    }
+  }
+});
+
+export { module as default };

package/dist/runtime/VitePwaManifest.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, () => null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/runtime/VitePwaManifest.mjs

@@ -0,0 +1,28 @@
+import { defineComponent, ref } from "vue";
+import { pwaInfo } from "virtual:pwa-info";
+import { useHead } from "#imports";
+export default defineComponent({
+  async setup() {
+    if (pwaInfo) {
+      const meta = ref({ link: [] });
+      useHead(meta);
+      const { webManifest } = pwaInfo;
+      if (webManifest) {
+        const { href, useCredentials } = webManifest;
+        if (useCredentials) {
+          meta.value.link.push({
+            rel: "manifest",
+            href,
+            crossorigin: "use-credentials"
+          });
+        } else {
+          meta.value.link.push({
+            rel: "manifest",
+            href
+          });
+        }
+      }
+    }
+    return () => null;
+  }
+});

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+
+import {  } from './module'
+
+
+
+export { ClientOptions, VitePWANuxtOptions, default } from './module'

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@vite-pwa/nuxt",
+  "type": "module",
+  "version": "0.0.1",
+  "packageManager": "pnpm@7.26.1",
+  "description": "Zero-config PWA for Nuxt 3",
+  "author": "antfu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/antfu",
+  "homepage": "https://github.com/vite-pwa/nuxt#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vite-pwa/nuxt.git"
+  },
+  "bugs": "https://github.com/vite-pwa/nuxt/issues",
+  "keywords": [
+    "nuxt",
+    "pwa",
+    "workbox",
+    "vite-plugin-pwa",
+    "nuxt-module"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/module.cjs",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "release": "npm run lint && npm run prepack && npx bumpp --push --tag --commit && npm publish --access=public && git push --follow-tags",
+    "lint": "eslint .",
+    "lint-fix": "nr lint --fix"
+  },
+  "peerDependencies": {
+    "@nuxt/kit": "^3.0.0 || ^3.1.0",
+    "vite-plugin-pwa": "^0.14.0"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.1.1"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.34.1",
+    "@antfu/ni": "^0.19.0",
+    "@nuxt/module-builder": "^0.2.1",
+    "@nuxt/schema": "^3.1.1",
+    "@nuxt/test-utils": "^3.1.1",
+    "changelogen": "^0.4.1",
+    "eslint": "^8.32.0",
+    "nuxt": "^3.1.1",
+    "typescript": "^4.9.4",
+    "vite-plugin-pwa": "^0.14.1"
+  },
+  "build": {
+    "externals": [
+      "node:child_process",
+      "node:fs",
+      "consola",
+      "pathe",
+      "ufo",
+      "vite-plugin-pwa"
+    ]
+  }
+}

package/templates/pwa.client.ts

@@ -0,0 +1,130 @@
+import { ref, reactive, nextTick } from 'vue'
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+import { defineNuxtPlugin } from '#app'
+
+// @ts-ignore
+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/)))
+
+  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) {
+      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,
+      }),
+    },
+  }
+})