feat: include manifest.webmanifest on dev (#298)

vite-pwa · Jun 5, 2022 · b644b18 · b644b18
1 parent 858d3c2
commit b644b18
Show file tree

Hide file tree

Showing 15 changed files with 99 additions and 16 deletions.
diff --git a/examples/preact-router/package.json b/examples/preact-router/package.json
@@ -11,7 +11,8 @@
     "start-sw-reloadsw": "npm run run-build-sw-reloadsw && npm run serve",
     "start-sw-claims": "npm run run-build-sw-claims && npm run serve",
     "start-sw-claims-reloadsw": "npm run run-build-sw-reloadsw-claims && npm run serve",
-    "dev": "cross-env DEBUG=vite-plugin-pwa:* vite",
+    "dev": "cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true vite",
+    "dev-claims": "cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true CLAIMS=true SW=true vite",
     "build": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build",
     "run-build": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build",
     "run-build-reloadsw": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true RELOAD_SW=true vite build",

diff --git a/examples/preact-router/src/ReloadPrompt.tsx b/examples/preact-router/src/ReloadPrompt.tsx
@@ -15,19 +15,21 @@ function ReloadPrompt() {
     updateServiceWorker,
   } = useRegisterSW({
     onRegistered(r) {
-      // @ts-ignore
+      // @ts-expect-error just ignore
       if (reloadSW === 'true') {
         r && setInterval(() => {
+          // eslint-disable-next-line no-console
           console.log('Checking for sw update')
           r.update()
         }, 20000 /* 20s for testing purposes */)
       }
       else {
-        // eslint-disable-next-line prefer-template
+        // eslint-disable-next-line prefer-template,no-console
         console.log('SW Registered: ' + r)
       }
     },
     onRegisterError(error) {
+      // eslint-disable-next-line no-console
       console.log('SW registration error', error)
     },
   })

diff --git a/examples/preact-router/tsconfig.json b/examples/preact-router/tsconfig.json
@@ -16,7 +16,8 @@
     "noEmit": true,
     "jsx": "preserve",
     "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment"
+    "jsxFragmentFactory": "Fragment",
+    "types": ["vite/client", "vite-plugin-pwa/client"]
   },
   "include": ["src"]
 }
diff --git a/examples/preact-router/vite.config.ts b/examples/preact-router/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import preact from '@preact/preset-vite'
-import { ManifestOptions, VitePWA, VitePWAOptions } from 'vite-plugin-pwa'
+import { VitePWA } from 'vite-plugin-pwa'
+import type { ManifestOptions, VitePWAOptions } from 'vite-plugin-pwa'
 import replace from '@rollup/plugin-replace'
 
 const pwaOptions: Partial<VitePWAOptions> = {
@@ -30,6 +31,12 @@ const pwaOptions: Partial<VitePWAOptions> = {
       },
     ],
   },
+  devOptions: {
+    enabled: process.env.SW_DEV === 'true',
+    /* when using generateSW the PWA plugin will switch to classic */
+    type: 'module',
+    navigateFallback: 'index.html',
+  },
 }
 
 const replaceOptions = { __DATE__: new Date().toISOString() }
@@ -48,7 +55,7 @@ if (claims)
   pwaOptions.registerType = 'autoUpdate'
 
 if (reload) {
-  // @ts-ignore
+  // @ts-expect-error just ignore
   replaceOptions.__RELOAD_SW__ = 'true'
 }
 

diff --git a/examples/solid-router/package.json b/examples/solid-router/package.json
@@ -11,7 +11,8 @@
     "start-sw-reloadsw": "npm run run-build-sw-reloadsw && npm run serve",
     "start-sw-claims": "npm run run-build-sw-claims && npm run serve",
     "start-sw-claims-reloadsw": "npm run run-build-sw-reloadsw-claims && npm run serve",
-    "dev": "cross-env DEBUG=vite-plugin-pwa:* vite",
+    "dev": "cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true vite",
+    "dev-claims": "cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true CLAIMS=true SW=true vite",
     "build": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build",
     "run-build": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build",
     "run-build-reloadsw": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true RELOAD_SW=true vite build",

diff --git a/examples/solid-router/src/ReloadPrompt.tsx b/examples/solid-router/src/ReloadPrompt.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/react-in-jsx-scope,react/no-unknown-property */
-import { Component, Show } from 'solid-js'
+import type { Component } from 'solid-js'
+import { Show } from 'solid-js'
 import { useRegisterSW } from 'virtual:pwa-register/solid'
 import styles from './ReloadPrompt.module.css'
 
@@ -13,7 +14,7 @@ const ReloadPrompt: Component = () => {
   } = useRegisterSW({
     immediate: true,
     onRegistered(r) {
-      // @ts-ignore
+      // @ts-expect-error just ignore
       if (reloadSW === 'true') {
         r && setInterval(() => {
           // eslint-disable-next-line no-console

diff --git a/examples/solid-router/vite.config.ts b/examples/solid-router/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import solidPlugin from 'vite-plugin-solid'
-import { ManifestOptions, VitePWA, VitePWAOptions } from 'vite-plugin-pwa'
+import { VitePWA } from 'vite-plugin-pwa'
+import type { ManifestOptions, VitePWAOptions } from 'vite-plugin-pwa'
 import replace from '@rollup/plugin-replace'
 
 const pwaOptions: Partial<VitePWAOptions> = {
@@ -30,6 +31,12 @@ const pwaOptions: Partial<VitePWAOptions> = {
       },
     ],
   },
+  devOptions: {
+    enabled: process.env.SW_DEV === 'true',
+    /* when using generateSW the PWA plugin will switch to classic */
+    type: 'module',
+    navigateFallback: 'index.html',
+  },
 }
 
 const replaceOptions = { __DATE__: new Date().toISOString() }
@@ -48,7 +55,7 @@ if (claims)
   pwaOptions.registerType = 'autoUpdate'
 
 if (reload) {
-  // @ts-ignore
+  // @ts-expect-error just ignore
   replaceOptions.__RELOAD_SW__ = 'true'
 }
 

diff --git a/examples/svelte-routify/package.json b/examples/svelte-routify/package.json
@@ -12,7 +12,8 @@
     "start-sw-reloadsw": "npm run run-build-sw-reloadsw && npm run serve",
     "start-sw-claims": "npm run run-build-sw-claims && npm run serve",
     "start-sw-claims-reloadsw": "npm run run-build-sw-reloadsw-claims && npm run serve",
-    "dev": "cross-env DEBUG=vite-plugin-pwa:* vite",
+    "dev": "routify -b && cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true vite",
+    "dev-claims": "routify -b && cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true CLAIMS=true SW=true vite",
     "build": "routify -b && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build",
     "run-build": "routify -b && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build",
     "run-build-reloadsw": "routify -b && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true RELOAD_SW=true vite build",

diff --git a/examples/svelte-routify/vite.config.js b/examples/svelte-routify/vite.config.js
@@ -30,6 +30,12 @@ const pwaOptions = {
       },
     ],
   },
+  devOptions: {
+    enabled: process.env.SW_DEV === 'true',
+    /* when using generateSW the PWA plugin will switch to classic */
+    type: 'module',
+    navigateFallback: 'index.html',
+  },
 }
 
 const replaceOptions = { __DATE__: new Date().toISOString() }

diff --git a/examples/sveltekit-pwa/package.json b/examples/sveltekit-pwa/package.json
@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "svelte-kit dev",
+    "dev": "cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true svelte-kit dev",
+    "dev-claims": "cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true CLAIMS=true SW=true svelte-kit dev",
     "build": "svelte-kit build",
     "package": "svelte-kit package",
     "preview": "svelte-kit preview",

diff --git a/examples/sveltekit-pwa/pwa-configuration.js b/examples/sveltekit-pwa/pwa-configuration.js
@@ -32,6 +32,13 @@ const pwaConfiguration = {
 			},
 		]
 	},
+	devOptions: {
+		enabled: process.env.SW_DEV === 'true',
+		/* when using generateSW the PWA plugin will switch to classic */
+		type: 'module',
+		navigateFallback: '/',
+		webManifestUrl: '/_app/manifest.webmanifest'
+	},
 }
 
 const claims = process.env.CLAIMS === 'true'
@@ -40,6 +47,7 @@ const sw = process.env.SW === 'true'
 const replaceOptions = {
 	__DATE__: new Date().toISOString(),
 	__RELOAD_SW__: reload ? 'true' : 'false',
+	__SW_DEV__: process.env.SW_DEV === 'true' ? 'true' : 'false',
 }
 
 const workboxOrInjectManifestEntry = {

diff --git a/examples/sveltekit-pwa/src/routes/__layout.svelte b/examples/sveltekit-pwa/src/routes/__layout.svelte
@@ -4,15 +4,18 @@
 
 	// replaced dynamically
 	const date = '__DATE__'
+	const enableSwDev = '__SW_DEV__'
+
+	const enableManifest = (!dev && browser) || (dev && browser && enableSwDev === 'true')
 
 	let ReloadPrompt
 	onMount(async () => {
-		!dev && browser && (ReloadPrompt = (await import('$lib/components/ReloadPrompt.svelte')).default)
+		enableManifest && (ReloadPrompt = (await import('$lib/components/ReloadPrompt.svelte')).default)
 	})
 </script>
 
 <svelte:head>
-	{#if (!dev && browser)}
+	{#if enableManifest}
 		<link rel="manifest" href="/_app/manifest.webmanifest">
 	{/if}
 </svelte:head>

diff --git a/src/html.ts b/src/html.ts
@@ -33,3 +33,13 @@ export function injectServiceWorker(html: string, options: ResolvedVitePWAOption
     `${manifest}</head>`,
   )
 }
+
+export function injectDevManifest(html: string, options: ResolvedVitePWAOptions) {
+  const crossorigin = options.useCredentials ? ' crossorigin="use-credentials"' : ''
+  const manifest = options.manifest ? `<link rel="manifest" href="${options.base}${options.manifestFilename}"${crossorigin}>` : ''
+
+  return html.replace(
+    '</head>',
+      `${manifest}</head>`,
+  )
+}
diff --git a/src/index.ts b/src/index.ts
@@ -2,7 +2,7 @@ import { resolve } from 'path'
 import { existsSync } from 'fs'
 import type { OutputBundle } from 'rollup'
 import type { Plugin, ResolvedConfig } from 'vite'
-import { generateSimpleSWRegister, injectServiceWorker } from './html'
+import { generateSimpleSWRegister, injectDevManifest, injectServiceWorker } from './html'
 import { generateInjectManifest, generateRegisterSW, generateServiceWorker } from './modules'
 import type { ExtendManifestEntriesHook, ResolvedVitePWAOptions, VitePWAOptions, VitePluginPWAAPI } from './types'
 import { resolveOptions } from './options'
@@ -141,6 +141,31 @@ export function VitePWA(userOptions: Partial<VitePWAOptions> = {}): Plugin[] {
         viteConfig = config
         options = await resolveOptions(userOptions, viteConfig)
       },
+      transformIndexHtml: {
+        enforce: 'post',
+        transform(html) {
+          if (options.disable || !options.manifest || !options.devOptions.enabled)
+            return html
+
+          return injectDevManifest(html, options)
+        },
+      },
+      configureServer(server) {
+        if (!options.disable && options.manifest && options.devOptions.enabled) {
+          const name = options.devOptions.webManifestUrl ?? `${options.base}${options.manifestFilename}`
+          server.middlewares.use((req, res, next) => {
+            const url = req.url
+            if (url === name) {
+              res.statusCode = 200
+              res.write(generateWebManifestFile(options), 'utf-8')
+              res.end()
+            }
+            else {
+              next()
+            }
+          })
+        }
+      },
       resolveId(id) {
         return resolveDevId(id, options)
       },

diff --git a/src/types.ts b/src/types.ts
@@ -296,4 +296,13 @@ export interface DevOptions {
    * **WARNING**: this option will only be used when using `injectManifest` strategy.
    */
   navigateFallback?: string
+
+  /**
+   * On dev mode the `manifest.webmanifest` file can be on other path.
+   *
+   * For example, **SvelteKit** will request `/_app/manifest.webmanifest`.
+   *
+   * @default `${vite.base}${pwaOptions.manifestFilename}`
+   */
+  webManifestUrl?: string
 }