perf: exclude pwa web manifests from sw precache (#1213)

config/pwa.ts

@@ -13,8 +13,8 @@ export const pwa: VitePWANuxtOptions = {
   includeManifestIcons: false,
   manifest: false,
   injectManifest: {
-    globPatterns: ['**/*.{js,json,css,html,txt,svg,png,ico,webp,woff,woff2,ttf,eot,otf,wasm,webmanifest}'],
+    globPatterns: ['**/*.{js,json,css,html,txt,svg,png,ico,webp,woff,woff2,ttf,eot,otf,wasm}'],
-    globIgnores: ['emojis/**', 'shiki/**'],
+    globIgnores: ['emojis/**', 'shiki/**', 'manifest**.webmanifest'],
   },
   devOptions: {
     enabled: process.env.VITE_DEV_PWA === 'true',

service-worker/sw.ts

@@ -3,7 +3,7 @@
 import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { NavigationRoute, registerRoute } from 'workbox-routing'
 import { CacheableResponsePlugin } from 'workbox-cacheable-response'
-import { StaleWhileRevalidate } from 'workbox-strategies'
+import { NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies'
 import { ExpirationPlugin } from 'workbox-expiration'
 
 import { onNotificationClick, onPush } from './web-push-notifications'
@@ -37,6 +37,19 @@ if (import.meta.env.PROD)
 
 // only cache pages and external assets on local build + start or in production
 if (import.meta.env.PROD) {
+  // include webmanifest cache
+  registerRoute(
+    ({ request, sameOrigin }) =>
+      sameOrigin && request.destination === 'manifest',
+    new NetworkFirst({
+      cacheName: 'elk-webmanifest',
+      plugins: [
+        new CacheableResponsePlugin({ statuses: [200] }),
+        // we only need a few entries
+        new ExpirationPlugin({ maxEntries: 100 }),
+      ],
+    }),
+  )
   // include shiki cache
   registerRoute(
     ({ sameOrigin, url }) =>