FIX: Ensure service-worker cache is cleaned correctly (stable) (#23205)

By default, the workbox-expiration plugin will not expire cache entries which include a `Vary` header in the response. This means that cached entries can build up until the browser storage quota is hit.

This commit introduces the `ignoreVary: true` option, so that deletion is performed correctly. This will only apply going forward, so this commit also bumps the cache version and deletes the old caches.

Ref https://github.com/GoogleChrome/workbox/issues/2206

app/assets/javascripts/service-worker.js.erb

@@ -23,10 +23,25 @@ var authUrls = ["auth", "session/sso_login", "session/sso", "srv/status"].map(pa
 var chatRegex = /\/chat\/channel\/(\d+)\//;
 var inlineReplyIcon = "<%= UrlHelper.absolute("/images/push-notifications/inline_reply.png") %>";
 
-var cacheVersion = "1";
+const oldCacheNames = [
+  "discourse-1", "external-1"
+]
+
+oldCacheNames.forEach(cacheName => caches.delete(cacheName))
+
+var cacheVersion = "2";
 var discourseCacheName = "discourse-" + cacheVersion;
 var externalCacheName = "external-" + cacheVersion;
 
+const expirationOptions = {
+  maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
+  maxEntries: 250,
+  purgeOnQuotaError: true, // safe to automatically delete if exceeding the available storage
+  matchOptions: {
+    ignoreVary: true // Many discourse responses include `Vary` header. This option is required to ensure they are cleaned up correctly.
+  }
+}
+
 // Chrome 97 shipped with broken samesite cookie handling when proxying requests through service workers
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1286367
 var chromeVersionMatch = navigator.userAgent.match(/Chrome\/97.0.(\d+)/);
@@ -44,11 +59,7 @@ workbox.routing.registerRoute(
       new workbox.cacheableResponse.CacheableResponsePlugin({
         statuses: [200] // opaque responses will return status code '0'
       }), // for s3 secure uploads signed urls
-      new workbox.expiration.ExpirationPlugin({
+      new workbox.expiration.ExpirationPlugin(expirationOptions),
-        maxAgeSeconds: 7* 24 * 60 * 60, // 7 days
-        maxEntries: 250,
-        purgeOnQuotaError: true, // safe to automatically delete if exceeding the available storage
-      }),
     ],
   })
 );
@@ -96,11 +107,7 @@ if (cdnUrls.length > 0) {
         new workbox.cacheableResponse.CacheableResponsePlugin({
           statuses: [200] // opaque responses will return status code '0'
         }),
-        new workbox.expiration.ExpirationPlugin({
+        new workbox.expiration.ExpirationPlugin(expirationOptions),
-          maxAgeSeconds: 7* 24 * 60 * 60, // 7 days
-          maxEntries: 250,
-          purgeOnQuotaError: true, // safe to automatically delete if exceeding the available storage
-        }),
         appendQueryStringPlugin
       ],
     })
@@ -127,11 +134,7 @@ workbox.routing.registerRoute(
       new workbox.cacheableResponse.CacheableResponsePlugin({
         statuses: [200] // opaque responses will return status code '0'
       }),
-      new workbox.expiration.ExpirationPlugin({
+      new workbox.expiration.ExpirationPlugin(expirationOptions),
-        maxAgeSeconds: 7* 24 * 60 * 60, // 7 days
-        maxEntries: 250,
-        purgeOnQuotaError: true, // safe to automatically delete if exceeding the available storage
-      }),
     ],
   })
 );