From a91d3c1e9229e9019bb2b46557d0d04e26e59d9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Tue, 17 Jan 2023 11:42:42 +0100
Subject: [PATCH] perf: exclude pwa web manifests from sw precache (#1213)

---
 config/pwa.ts        |  4 ++--
 service-worker/sw.ts | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/config/pwa.ts b/config/pwa.ts
index 43b4f5a76..c6ce10161 100644
--- a/config/pwa.ts
+++ b/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}'],
-    globIgnores: ['emojis/**', 'shiki/**'],
+    globPatterns: ['**/*.{js,json,css,html,txt,svg,png,ico,webp,woff,woff2,ttf,eot,otf,wasm}'],
+    globIgnores: ['emojis/**', 'shiki/**', 'manifest**.webmanifest'],
   },
   devOptions: {
     enabled: process.env.VITE_DEV_PWA === 'true',
diff --git a/service-worker/sw.ts b/service-worker/sw.ts
index c72e33840..de4143206 100644
--- a/service-worker/sw.ts
+++ b/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 }) =>