Fix: fix 'non-loading' due to incorrect caching in service worker

scripts/prepareServiceWorker.ts

@@ -9,12 +9,14 @@ class PrepareServiceWorker extends Script {
 
     public async main() {
         const v = Constants.vNumber
+        const date = new Date().getTime()
         writeFileSync(
             "./src/service-worker/SWGenerated.ts",
             [
                 "export class SWGenerated {",
                 "// generated by scripts/prepareServiceWorker.ts",
                 "static vNumber = " + JSON.stringify(v),
+                "static buildTime = " + date,
                 "}",
             ].join("\n"),
             "utf8"

src/service-worker/SWGenerated.ts

@@ -1,4 +1,5 @@
 export class SWGenerated {
-    // generated by scripts/prepareServiceWorker.ts
+// generated by scripts/prepareServiceWorker.ts
-    static vNumber = "0.55.4"
+static vNumber = "0.55.5"
-}
+static buildTime = 1756119249268
+}

src/service-worker/index.ts

@@ -17,9 +17,27 @@ function jsonResponse(object: object | []): Response {
     })
 }
 
+const cacheKey = SWGenerated.vNumber + "-" + SWGenerated.vNumber
+
+function cleanOldCaches() {
+    caches.keys().then(keys => {
+        return Promise.all(
+            keys.map(k => {
+                if (k !== cacheKey) {
+                    return caches.delete(k)
+                }
+            })
+        )
+    })
+}
+
+function getCache() {
+    return caches.open(cacheKey)
+}
+
 function respondFromCache(event: FetchEvent) {
     event.respondWith(
-        caches.open(SWGenerated.vNumber).then(async (cache) => {
+        getCache().then(async (cache) => {
             const cached = await cache.match(event.request)
             if (!cached) {
                 const response = await fetch(event.request)
@@ -32,7 +50,7 @@ function respondFromCache(event: FetchEvent) {
 }
 
 async function listCachedRequests(): Promise<string[]> {
-    const cache = await caches.open(SWGenerated.vNumber)
+    const cache = await getCache()
     const requests = await cache.keys()
     return requests.map((req) => req.url)
 }
@@ -107,7 +125,10 @@ self.addEventListener("fetch", (event) => {
     }
 })
 
-self.addEventListener("install", () => self.skipWaiting())
+self.addEventListener("install", async () => {
+    await self.skipWaiting()
+    cleanOldCaches()
+})
 self.addEventListener("activate", (event) => {
     event.waitUntil(self.clients.claim())