Simplify service worker

src/service-worker.ts

@@ -12,74 +12,84 @@ async function install() {
 addEventListener("install", (e) => (<any>e).waitUntil(install()))
 addEventListener("activate", (e) => (<any>e).waitUntil(activate()))
 
+async function clearCaches(exceptVersion = undefined) {
+    const keys = await caches.keys()
+    await Promise.all(keys.map((k) => k !== version && caches.delete(k)))
+    console.log("Cleared caches")
+}
+
 async function activate() {
     console.log("Activating service worker")
-    caches
-        .keys()
-        .then((keys) => {
-            // Remove all old caches
-            Promise.all(keys.map((key) => key !== version && caches.delete(key)))
-        })
-        .catch(console.error)
+    await clearCaches(version)
 }
 
-function fetchAndCache(event) {
-    return fetch(event.request).then((networkResponse) => {
-        return caches.open(version).then((cache) => {
-            cache.put(event.request, networkResponse.clone())
+async function fetchAndCache(event: ServiceWorkerFetchEvent): Promise<Response> {
+    let networkResponse = await fetch(event.request)
+    let cache = await caches.open(version)
+    await cache.put(event.request, networkResponse.clone())
     console.log("Cached", event.request)
     return networkResponse
-        })
-    })
 }
 
-const cacheFirst = async (event, attemptUpdate: boolean = false) => {
-    await event.respondWith(
-        caches.match(event.request, { ignoreSearch: true }).then((cacheResponse) => {
-            if (cacheResponse !== undefined) {
+async function cacheFirst(event: ServiceWorkerFetchEvent, attemptUpdate: boolean = false) {
+    const cacheResponse = await caches.match(event.request, { ignoreSearch: true })
+    if (cacheResponse === undefined) {
+        return fetchAndCache(event)
+    }
     console.debug("Loaded from cache: ", event.request)
     if (attemptUpdate) {
         fetchAndCache(event)
     }
     return cacheResponse
-            }
-            return fetchAndCache(event)
-        })
-    )
+
 }
 
-self.addEventListener("fetch", async (e) => {
-    // Important: this lambda must run synchronously, as the browser will otherwise handle the request
-    const event = <ServiceWorkerFetchEvent>e
-    try {
+const neverCache: RegExp[] = [
+    /\.html$/,
+    /service-worker/
+]
+const neverCacheHost : RegExp[] = [
+    /127\.0\.0\.[0-9]+/,
+    /\.local/,
+    /\.gitpod\.io/,
+    /localhost/
+]
+
+async function handleRequest(event: ServiceWorkerFetchEvent) {
     const origin = new URL(self.origin)
     const requestUrl = new URL(event.request.url)
     if (requestUrl.pathname.endsWith("service-worker-version")) {
         console.log("Sending version number...")
         await event.respondWith(
-                new Response(JSON.stringify({ "service-worker-version": version }))
+            new Response(JSON.stringify({ "service-worker-version": version })),
         )
         return
     }
     if (requestUrl.pathname.endsWith("/service-worker-clear")) {
-            const keys = await caches.keys()
-            await Promise.all(keys.map((k) => caches.delete(k)))
-            console.log("Cleared caches")
+        await clearCaches()
+        await event.respondWith(
+            new Response(JSON.stringify({ "cache-cleared": true })),
+        )
         return
     }
+
     const shouldBeCached =
         origin.host === requestUrl.host &&
-            origin.hostname !== "127.0.0.1" &&
-            origin.hostname !== "localhost" &&
-            !origin.hostname.endsWith(".local") &&
-            !origin.host.endsWith(".gitpod.io") &&
-            origin.pathname.indexOf("service-worker") < 0
+        !neverCacheHost.some(blacklisted => origin.host.match(blacklisted)) &&
+        !neverCache.some(blacklisted => event.request.url.match(blacklisted))
     if (!shouldBeCached) {
         console.debug("Not intercepting ", requestUrl.toString(), origin.host, requestUrl.host)
         // We return _without_ calling event.respondWith, which signals the browser that it'll have to handle it himself
         return
     }
-        await cacheFirst(event)
+    await event.respondWith(await cacheFirst(event))
+}
+
+self.addEventListener("fetch", async (e) => {
+    // Important: this lambda must run synchronously, as the browser will otherwise handle the request
+    const event: ServiceWorkerFetchEvent = <ServiceWorkerFetchEvent>e
+    try {
+        await handleRequest(event)
     } catch (e) {
         console.error("CRASH IN SW:", e)
         await event.respondWith(fetch(event.request.url))