From 27ba588121b4a29d4e77b1d7120d33e582c6cfa7 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 28 Sep 2025 21:35:38 +0800
Subject: [PATCH] Try to fix SW assets cache grows too large

---
 public/sw.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/public/sw.js b/public/sw.js
index 5e7624a8..048f488f 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -12,6 +12,15 @@ navigationPreload.enable();
 
 self.__WB_DISABLE_DEV_LOGS = true;
 
+const expirationPluginOptions = {
+  purgeOnQuotaError: true,
+  // "CacheFirst image maxEntries not working" https://github.com/GoogleChrome/workbox/issues/2768#issuecomment-793109906
+  matchOptions: {
+    // https://developer.mozilla.org/en-US/docs/Web/API/Cache/delete#Parameters
+    ignoreVary: true,
+  },
+};
+
 const iconsRoute = new Route(
   ({ request, sameOrigin }) => {
     const isIcon = request.url.includes('/icons/');
@@ -25,7 +34,7 @@ const iconsRoute = new Route(
         // NOTE: Temporary fix
         maxEntries: 300,
         maxAgeSeconds: 3 * 24 * 60 * 60, // 3 days
-        purgeOnQuotaError: true,
+        ...expirationPluginOptions,
       }),
       new CacheableResponsePlugin({
         statuses: [0, 200],
@@ -48,7 +57,7 @@ const assetsRoute = new Route(
     plugins: [
       new ExpirationPlugin({
         maxEntries: 40,
-        purgeOnQuotaError: true,
+        ...expirationPluginOptions,
       }),
       new CacheableResponsePlugin({
         statuses: [0, 200],
@@ -72,7 +81,7 @@ const imageRoute = new Route(
     plugins: [
       new ExpirationPlugin({
         maxEntries: 30,
-        purgeOnQuotaError: true,
+        ...expirationPluginOptions,
       }),
       new CacheableResponsePlugin({
         statuses: [0, 200],
@@ -93,7 +102,7 @@ const apiExtendedRoute = new RegExpRoute(
     plugins: [
       new ExpirationPlugin({
         maxAgeSeconds: 12 * 60 * 60, // 12 hours
-        purgeOnQuotaError: true,
+        ...expirationPluginOptions,
       }),
       new CacheableResponsePlugin({
         statuses: [0, 200],
@@ -136,7 +145,7 @@ const apiRoute = new RegExpRoute(
       new ExpirationPlugin({
         maxEntries: 30,
         maxAgeSeconds: 5 * 60, // 5 minutes
-        purgeOnQuotaError: true,
+        ...expirationPluginOptions,
       }),
       new CacheableResponsePlugin({
         statuses: [0, 200],