feat: use webManifestUrl on injectDevManifest (#300)

* feat: use `webManifestUrl` on `injectDevManifest` I forgot to use `webManifestUrl` also on `injectDevManifest`: if someone using it will not work (`SvelteKit` will not fail since the `manifest.webmanifest` is included on the `_layout`) * fix: include webmanifest on denylist + add its content type * docs: include webmanifest entry on development * chore: add webmanifest to denylist on custom sw + fix sveltekit latest changes * chore: use old `esno` version * chore: wording
vite-pwa · Jun 7, 2022 · be844b0 · be844b0
1 parent 7bcf6ec
commit be844b0
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 57 deletions.
diff --git a/docs/guide/development.md b/docs/guide/development.md
@@ -68,9 +68,21 @@ 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
 }
 ```
 
+## manifest.webmanifest
+
+Since version `0.12.1` the `manifest.webmanifest` is also served on development mode: you can now check it on `dev tools`.
+
 ## generateSW strategy
 
 When using this strategy, the `navigateFallback` on development options will be ignored. The PWA plugin will check if
@@ -98,6 +110,19 @@ devOptions: {
 
 > **Warning**: when building the application, the PWA Plugin will always register your service worker with `type: 'classic'` for compatibility with all browsers.
 
+> **Warning**: if using version `0.12.1+`, you will need to exclude the `manifest.webmanifest` from the service worker precache manifest if you want to check it using the browser (on `dev tools` it will be ok):
+> ```ts
+> let denylist: undefined | RegExp[]
+> if (import.meta.env.DEV)
+>   denylist = [/^\/manifest.webmanifest$/]
+>
+> // to allow work offline
+> registerRoute(new NavigationRoute(
+>   createHandlerBoundToURL('index.html'),
+>   { denylist }
+> ))
+> ```
+
 When using this strategy, the plugin will delegate the service worker compilation to `Vite`, so if you're using `import` statements 
 instead `importScripts` in your custom service worker, you should configure `type: 'module'` on development options.
 
@@ -138,3 +163,7 @@ To run the example, you must build the PWA plugin (`pnpm run build` from root fo
 (`cd examples/vue-router`) and run it:
 - `generateSW` strategy: `pnpm run dev`
 - `injectManifest` strategy: `pnpm run dev-claims`
+
+Since version `0.12.1`, you also have the development scripts for all other frameworks as well.
+
+The instructions for running the `dev` or `dev-claims` scripts are the same as for `vue-router` but running them in the corresponding framework directory.
diff --git a/examples/preact-router/src/claims-sw.ts b/examples/preact-router/src/claims-sw.ts
@@ -10,8 +10,15 @@ precacheAndRoute(self.__WB_MANIFEST)
 // clean old assets
 cleanupOutdatedCaches()
 
+let denylist: undefined | RegExp[]
+if (import.meta.env.DEV)
+  denylist = [/^\/manifest.webmanifest$/]
+
 // to allow work offline
-registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
+registerRoute(new NavigationRoute(
+  createHandlerBoundToURL('index.html'),
+  { denylist },
+))
 
 self.skipWaiting()
 clientsClaim()
diff --git a/examples/react-router/src/claims-sw.ts b/examples/react-router/src/claims-sw.ts
@@ -10,8 +10,15 @@ precacheAndRoute(self.__WB_MANIFEST)
 // clean old assets
 cleanupOutdatedCaches()
 
+let denylist: undefined | RegExp[]
+if (import.meta.env.DEV)
+  denylist = [/^\/manifest.webmanifest$/]
+
 // to allow work offline
-registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
+registerRoute(new NavigationRoute(
+  createHandlerBoundToURL('index.html'),
+  { denylist },
+))
 
 self.skipWaiting()
 clientsClaim()
diff --git a/examples/solid-router/src/claims-sw.ts b/examples/solid-router/src/claims-sw.ts
@@ -10,8 +10,15 @@ precacheAndRoute(self.__WB_MANIFEST)
 // clean old assets
 cleanupOutdatedCaches()
 
+let denylist: undefined | RegExp[]
+if (import.meta.env.DEV)
+  denylist = [/^\/manifest.webmanifest$/]
+
 // to allow work offline
-registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
+registerRoute(new NavigationRoute(
+  createHandlerBoundToURL('index.html'),
+  { denylist },
+))
 
 self.skipWaiting()
 clientsClaim()
diff --git a/examples/svelte-routify/src/claims-sw.ts b/examples/svelte-routify/src/claims-sw.ts
@@ -10,8 +10,16 @@ precacheAndRoute(self.__WB_MANIFEST)
 // clean old assets
 cleanupOutdatedCaches()
 
+
+let denylist: undefined | RegExp[]
+if (import.meta.env.DEV)
+  denylist = [/^\/manifest.webmanifest$/]
+
 // to allow work offline
-registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
+registerRoute(new NavigationRoute(
+  createHandlerBoundToURL('index.html'),
+  { denylist },
+))
 
 self.skipWaiting()
 clientsClaim()
diff --git a/examples/sveltekit-pwa/src/app.html b/examples/sveltekit-pwa/src/app.html
@@ -8,9 +8,9 @@
 		<link rel="mask-icon" href="/favicon.svg" color="#FFFFFF">
 		<meta name="msapplication-TileColor" content="#FFFFFF">
 		<meta name="theme-color" content="#ffffff">
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		<div id="svelte">%svelte.body%</div>
+		<div id="svelte">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/examples/sveltekit-pwa/src/claims-sw.ts b/examples/sveltekit-pwa/src/claims-sw.ts
@@ -10,8 +10,16 @@ precacheAndRoute(self.__WB_MANIFEST)
 // clean old assets
 cleanupOutdatedCaches()
 
+
+let denylist: undefined | RegExp[]
+if (import.meta.env.DEV)
+  denylist = [/^\/_app\/manifest.webmanifest$/]
+
 // to allow work offline
-registerRoute(new NavigationRoute(createHandlerBoundToURL('/')))
+registerRoute(new NavigationRoute(
+  createHandlerBoundToURL('/'),
+  { denylist },
+))
 
 self.skipWaiting()
 clientsClaim()
diff --git a/examples/vue-router/src/claims-sw.ts b/examples/vue-router/src/claims-sw.ts
@@ -10,8 +10,15 @@ precacheAndRoute(self.__WB_MANIFEST)
 // clean old assets
 cleanupOutdatedCaches()
 
+let denylist: undefined | RegExp[]
+if (import.meta.env.DEV)
+  denylist = [/^\/manifest.webmanifest$/]
+
 // to allow work offline
-registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
+registerRoute(new NavigationRoute(
+  createHandlerBoundToURL('index.html'),
+  { denylist },
+))
 
 self.skipWaiting()
 clientsClaim()
diff --git a/package.json b/package.json
@@ -69,7 +69,7 @@
     "@types/workbox-build": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "eslint": "^8.17.0",
-    "esno": "^0.16.3",
+    "esno": "^0.14.1",
     "kolorist": "^1.5.1",
     "pnpm": "^7.1.8",
     "preact": "^10.7.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/dev.ts b/src/dev.ts
@@ -58,13 +58,16 @@ export async function loadDev(id: string, options: ResolvedVitePWAOptions, viteC
         // the sw precache (self.__SW_MANIFEST) will be empty since we're using `dev-dist` folder
         // we only need to add the navigateFallback if configured
         const navigateFallback = options.workbox.navigateFallback
+        // we need to exclude the manifest.webmanifest from the sw precache: avoid writing it to the dev-dist folder
+        const webManifestUrl = options.devOptions.webManifestUrl ?? `${options.base}${options.manifestFilename}`
         const { filePaths } = await generateServiceWorker(
           Object.assign(
             {},
             options,
             {
               workbox: {
                 ...options.workbox,
+                navigateFallbackDenylist: [new RegExp(`^${webManifestUrl}$`)],
                 runtimeCaching: options.devOptions.disableRuntimeConfig ? undefined : options.workbox.runtimeCaching,
                 // we only include navigateFallback
                 additionalManifestEntries: navigateFallback ? [navigateFallback] : undefined,

diff --git a/src/html.ts b/src/html.ts
@@ -36,7 +36,8 @@ export function injectServiceWorker(html: string, options: ResolvedVitePWAOption
 
 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}>` : ''
+  const name = options.devOptions.webManifestUrl ?? `${options.base}${options.manifestFilename}`
+  const manifest = options.manifest ? `<link rel="manifest" href="${name}"${crossorigin}>` : ''
 
   return html.replace(
     '</head>',

diff --git a/src/index.ts b/src/index.ts
@@ -154,9 +154,9 @@ export function VitePWA(userOptions: Partial<VitePWAOptions> = {}): Plugin[] {
         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) {
+            if (req.url === name) {
               res.statusCode = 200
+              res.setHeader('Content-Type', 'application/manifest+json')
               res.write(generateWebManifestFile(options), 'utf-8')
               res.end()
             }