Fix serviceworker output file and misc improvements (#11562)

* Fix serviceworker output file and misc improvements

- Fix output file location for production build
- Cache more asset types: fonts and worker variants
- Parallelize a few tasks during initalization
- Only invalidate caches starting with our prefix
- Remove public/serviceworker.js before building
- Remove font preloads, they cause strange cors issues
- Misc eslint config adjustments

* remove webpack output files on watch-frontend

3 files changed, 32 insertions, 15 deletions

diff --git a/web_src/js/features/serviceworker.js b/web_src/js/features/serviceworker.js
index a8fd2d41df..fa415866cd 100644
--- a/web_src/js/features/serviceworker.js
+++ b/web_src/js/features/serviceworker.js
@@ -1,16 +1,18 @@
 const {UseServiceWorker, AppSubUrl, AppVer} = window.config;
-const cacheName = 'static-cache-v2';
+const cachePrefix = 'static-cache-v'; // actual version is set in the service worker script
 
 async function unregister() {
-  for (const registration of await navigator.serviceWorker.getRegistrations()) {
-    const serviceWorker = registration.active;
-    if (!serviceWorker) continue;
-    registration.unregister();
-  }
+  const registrations = await navigator.serviceWorker.getRegistrations();
+  await Promise.all(registrations.map((registration) => {
+    return registration.active && registration.unregister();
+  }));
 }
 
 async function invalidateCache() {
-  await caches.delete(cacheName);
+  const cacheKeys = await caches.keys();
+  await Promise.all(cacheKeys.map((key) => {
+    return key.startsWith(cachePrefix) && caches.delete(key);
+  }));
 }
 
 async function checkCacheValidity() {
@@ -19,7 +21,7 @@ async function checkCacheValidity() {
 
   // invalidate cache if it belongs to a different gitea version
   if (cacheKey && storedCacheKey !== cacheKey) {
-    invalidateCache();
+    await invalidateCache();
     localStorage.setItem('staticCacheKey', cacheKey);
   }
 }
@@ -28,16 +30,24 @@ export default async function initServiceWorker() {
   if (!('serviceWorker' in navigator)) return;
 
   if (UseServiceWorker) {
-    await checkCacheValidity();
     try {
-      await navigator.serviceWorker.register(`${AppSubUrl}/serviceworker.js`);
+      // normally we'd serve the service worker as a static asset from StaticUrlPrefix but
+      // the spec strictly requires it to be same-origin so it has to be AppSubUrl to work
+      await Promise.all([
+        checkCacheValidity(),
+        navigator.serviceWorker.register(`${AppSubUrl}/serviceworker.js`),
+      ]);
     } catch (err) {
       console.error(err);
-      await invalidateCache();
-      await unregister();
+      await Promise.all([
+        invalidateCache(),
+        unregister(),
+      ]);
     }
   } else {
-    await invalidateCache();
-    await unregister();
+    await Promise.all([
+      invalidateCache(),
+      unregister(),
+    ]);
   }
 }
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 58cbd42933..5c749ce4ca 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -2469,7 +2469,7 @@ $(document).ready(async () => {
     }
   });
 
-  // parallel init of lazy-loaded features
+  // parallel init of async loaded features
   await Promise.all([
     highlight(document.querySelectorAll('pre code')),
     attachTribute(document.querySelectorAll('#content, .emoji-input')),
diff --git a/web_src/js/serviceworker.js b/web_src/js/serviceworker.js
index e9dfde22f9..c96ef8bd97 100644
--- a/web_src/js/serviceworker.js
+++ b/web_src/js/serviceworker.js
@@ -3,9 +3,16 @@ import {StaleWhileRevalidate} from 'workbox-strategies';
 
 const cacheName = 'static-cache-v2';
 
+// disable workbox debug logging in development, remove when debugging the service worker
+self.__WB_DISABLE_DEV_LOGS = true;
+
+// see https://developer.mozilla.org/en-US/docs/Web/API/RequestDestination for possible values
 const cachedDestinations = new Set([
+  'font',
   'manifest',
+  'paintworklet',
   'script',
+  'sharedworker',
   'style',
   'worker',
 ]);