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

README.md

@@ -42,6 +42,7 @@ Zero-config PWA Plugin for VitePress
 - 🐞 **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
 

examples/pwa-simple-assets-generator/.vitepress/config.ts

@@ -0,0 +1,65 @@
+import { defineConfig } from 'vitepress'
+import { withPwa } from '@vite-pwa/vitepress'
+
+const base = '/' // '/vite-plugin-pwa/'
+
+export default withPwa(defineConfig({
+  vite: {
+    logLevel: 'info',
+    define: {
+      __DATE__: `'${new Date().toISOString()}'`,
+    },
+  },
+  base,
+  lang: 'en-US',
+  title: 'VitePress PWA',
+  description: 'Vite Plugin PWA Integration example for VitePress',
+  head: [
+    ['meta', {
+      name: 'keywords',
+      content: 'PWA, VitePress, workbox, Vite, vite-plugin',
+    }],
+  ],
+  themeConfig: {
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2022-PRESENT Anthony Fu',
+    },
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'About', link: '/about', activeMatch: '/about' },
+      {
+        text: 'Packages',
+        items: [
+          { text: 'Foo', link: '/packages/foo' },
+          { text: 'Bar', link: '/packages/bar' },
+        ],
+      },
+    ],
+  },
+  pwa: {
+    mode: 'development',
+    registerType: 'autoUpdate',
+    injectRegister: 'script-defer',
+    includeAssets: ['favicon.svg'],
+    manifest: {
+      name: 'VitePress PWA',
+      short_name: 'VitePressPWA',
+      theme_color: '#ffffff',
+    },
+    pwaAssets: {
+      config: true,
+    },
+    workbox: {
+      globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
+    },
+    experimental: {
+      includeAllowlist: true,
+    },
+    devOptions: {
+      enabled: false,
+      suppressWarnings: true,
+      navigateFallback: '/',
+    },
+  },
+}))

examples/pwa-simple-assets-generator/about.md

@@ -0,0 +1,10 @@
+---
+title: About
+---
+<script setup>
+const date = __DATE__
+</script>
+
+# About
+
+<pre>Generated at: {{ date }}</pre>

examples/pwa-simple-assets-generator/index.md

@@ -0,0 +1,12 @@
+---
+title: VitePress PWA
+titleTemplate: Zero-config PWA Plugin for VitePress
+---
+
+<script setup>
+const date = __DATE__
+</script>
+
+# VitePress PWA
+
+<pre>Generated at: {{ date }}</pre>

examples/pwa-simple-assets-generator/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "pwa-simple",
+  "type": "module",
+  "version": "0.0.0",
+  "private": "true",
+  "scripts": {
+    "dev": "vitepress dev",
+    "build": "vitepress build",
+    "preview": "nr build && vitepress serve",
+    "https": "nr build && serve .vitepress/dist"
+  },
+  "devDependencies": {
+    "@vite-pwa/vitepress": "workspace:*",
+    "https-localhost": "^4.7.1",
+    "typescript": "^5.2.2"
+  }
+}

examples/pwa-simple-assets-generator/packages/[pkg].md

@@ -0,0 +1,11 @@
+---
+title: Package
+---
+
+<script setup>
+const date = __DATE__
+</script>
+
+# Package `{{ $params.pkg }}`
+
+<pre>Generated at: {{ date }}</pre>

examples/pwa-simple-assets-generator/packages/[pkg].paths.ts

@@ -0,0 +1,8 @@
+export default {
+  paths() {
+    return [
+      { params: { pkg: 'foo' } },
+      { params: { pkg: 'bar' } },
+    ]
+  },
+}

examples/pwa-simple-assets-generator/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

examples/pwa-simple-assets-generator/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',
+})

examples/pwa-simple-assets-generator/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "incremental": false,
+    "target": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "types": [
+      "vite/client",
+      "vitepress",
+      "@vite-pwa/vitepress"
+    ],
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "./*.ts",
+    "./.vitepress/**/*.ts",
+    "./.vitepress/**/*.vue"
+  ],
+  "exclude": ["dist", "node_modules"]
+}

examples/pwa-simple-assets-generator/vite-env.d.ts

@@ -0,0 +1 @@
+declare const __DATE__: string

package.json

@@ -2,7 +2,7 @@
   "name": "@vite-pwa/vitepress",
   "type": "module",
   "version": "0.3.1",
-  "packageManager": "pnpm@8.11.0",
+  "packageManager": "pnpm@8.15.3",
   "description": "Zero-config PWA for VitePress",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -42,7 +42,13 @@
     "release": "bumpp && npm publish"
   },
   "peerDependencies": {
-    "vite-plugin-pwa": ">=0.17.2 <1"
+    "@vite-pwa/assets-generator": "^0.2.4",
+    "vite-plugin-pwa": ">=0.19.0 <1"
+  },
+  "peerDependenciesMeta": {
+    "@vite-pwa/assets-generator": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.43.1",
@@ -52,11 +58,11 @@
     "bumpp": "^9.2.0",
     "eslint": "^8.54.0",
     "https-localhost": "^4.7.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
     "vite": "^5.0.0",
-    "vite-plugin-pwa": ">=0.17.2 <1",
-    "vitepress": "1.0.0-rc.28"
+    "vite-plugin-pwa": ">=0.19.0 <1",
+    "vitepress": "1.0.0-rc.42"
   },
   "pnpm": {
     "peerDependencyRules": {