feat!: add experimental PWA assets generation and injection (#117)

* feat!: add experimental PWA assets generation and injection

* chore: add `playground-assets` for pwa assets

* chore: update playground-assets

* chore: update pwa plugin version

* chore: include layout in assets playground

README.md

@@ -42,6 +42,7 @@ Zero-config PWA Plugin for Nuxt 3
 - 🐞 **Development Support**: debug your custom service worker logic as you develop your application
 - 🛠️ **Versatile**: integration with meta frameworks: [îles](https://github.com/ElMassimo/iles), [SvelteKit](https://github.com/sveltejs/kit), [VitePress](https://github.com/vuejs/vitepress), [Astro](https://github.com/withastro/astro), and [Nuxt 3](https://github.com/nuxt/nuxt)
 - 💥 **PWA Assets Generator**: generate all the PWA assets from a single command and a single source image
+- 🚀 **PWA Assets Integration**: serving, generating and injecting PWA Assets on the fly in your application
 
 ## 📦 Install
 

package.json

@@ -2,7 +2,7 @@
   "name": "@vite-pwa/nuxt",
   "type": "module",
   "version": "0.5.0",
-  "packageManager": "pnpm@8.15.1",
+  "packageManager": "pnpm@8.15.3",
   "description": "Zero-config PWA for Nuxt 3",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -60,7 +60,7 @@
     "@nuxt/kit": "^3.9.0",
     "pathe": "^1.1.1",
     "ufo": "^1.3.2",
-    "vite-plugin-pwa": ">=0.18.1 <1"
+    "vite-plugin-pwa": ">=0.19.2 <1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.43.1",
@@ -84,6 +84,14 @@
   "resolutions": {
     "@nuxt/kit": "^3.10.1"
   },
+  "peerDependencies": {
+    "@vite-pwa/assets-generator": "^0.2.4"
+  },
+  "peerDependenciesMeta": {
+    "@vite-pwa/assets-generator": {
+      "optional": true
+    }
+  },
   "build": {
     "externals": [
       "node:child_process",

playground-assets/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <NuxtLoadingIndicator />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

playground-assets/layouts/default.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <NuxtPwaAssets />
+    <slot />
+  </div>
+</template>

playground-assets/nuxt.config.ts

@@ -0,0 +1,61 @@
+import process from 'node:process'
+
+const sw = process.env.SW === 'true'
+
+export default defineNuxtConfig({
+  /* ssr: false, */
+  // typescript,
+  modules: ['@vite-pwa/nuxt'],
+  future: {
+    typescriptBundlerResolution: true,
+  },
+  experimental: {
+    payloadExtraction: true,
+    watcher: 'parcel',
+  },
+  nitro: {
+    esbuild: {
+      options: {
+        target: 'esnext',
+      },
+    },
+    prerender: {
+      routes: ['/', '/about'],
+    },
+  },
+  imports: {
+    autoImport: true,
+  },
+  appConfig: {
+    // you don't need to include this: only for testing purposes
+    buildDate: new Date().toISOString(),
+  },
+  vite: {
+    logLevel: 'info',
+  },
+  pwa: {
+    mode: 'development',
+    strategies: 'generateSW',
+    registerType: 'autoUpdate',
+    manifest: {
+      name: 'Nuxt Vite PWA',
+      short_name: 'NuxtVitePWA',
+      theme_color: '#ffffff',
+    },
+    pwaAssets: {
+      config: true,
+    },
+    workbox: {
+      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
+    },
+    client: {
+      installPrompt: true,
+    },
+    devOptions: {
+      enabled: true,
+      suppressWarnings: true,
+      navigateFallback: '/',
+      navigateFallbackAllowlist: [/^\/$/],
+    },
+  },
+})

playground-assets/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "playground-assets",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "generate": "nuxi generate"
+  },
+  "devDependencies": {
+    "@vite-pwa/assets-generator": "^0.2.4",
+    "@vite-pwa/nuxt": "workspace:*",
+    "nuxt": "^3.10.1"
+  }
+}

playground-assets/pages/about.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    <h1>Nuxt Vite PWA</h1>
+    <ClientOnly>
+      PWA Installed: {{ $pwa?.isPWAInstalled }}
+    </ClientOnly>
+    <br>
+    <NuxtLink to="/">
+      Home
+    </NuxtLink>
+    <br>
+    <PwaTransparentImage image="pwa-192x192.png" alt="PWA Icon" />
+  </div>
+</template>

playground-assets/pages/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    <h1>Nuxt Vite PWA</h1>
+    <ClientOnly>
+      PWA Installed: {{ $pwa?.isPWAInstalled }}
+    </ClientOnly>
+    <br>
+    <NuxtLink to="/about">
+      About
+    </NuxtLink>
+    <br>
+    <PwaTransparentImage image="pwa-64x64.png" alt="PWA Icon" />
+  </div>
+</template>

playground-assets/pwa-assets.config.ts

@@ -0,0 +1,25 @@
+import {
+  createAppleSplashScreens,
+  defineConfig,
+  minimal2023Preset,
+} from '@vite-pwa/assets-generator/config'
+
+export default defineConfig({
+  headLinkOptions: {
+    preset: '2023',
+  },
+  preset: {
+    ...minimal2023Preset,
+    appleSplashScreens: createAppleSplashScreens({
+      padding: 0.3,
+      resizeOptions: { fit: 'contain', background: 'white' },
+      darkResizeOptions: { fit: 'contain', background: 'black' },
+      linkMediaOptions: {
+        log: true,
+        addMediaScreen: true,
+        xhtml: true,
+      },
+    }, ['iPad Air 9.7"']),
+  },
+  images: 'public/favicon.svg',
+})

playground-assets/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

playground/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "my-module-playground",
+  "name": "playground",
   "type": "module",
   "private": true,
   "scripts": {