Merge pull request #22 from charlesrocket/app

static/sw-load.js

@@ -1,14 +1,21 @@
-if ("serviceWorker" in navigator) {
-    navigator.serviceWorker
-        .register("/sw.js",
-                  { scope: "/" })
-        .then(() => {
-            console.info("Service Worker loaded");
-        }, err => console.error("Service Worker error: ", err));
+const registerServiceWorker = async () => {
+  if ("serviceWorker" in navigator) {
+    try {
+      const registration = await navigator.serviceWorker.register("/sw.js", {
+        scope: "/",
+      });
 
-    navigator.serviceWorker
-        .ready
-        .then(() => {
-            console.info("Service Worker is ready");
-        });
-}
+      if (registration.installing) {
+        console.log("Service worker installing");
+      } else if (registration.waiting) {
+        console.log("Service worker installed");
+      } else if (registration.active) {
+        console.log("Service worker active");
+      }
+    } catch (error) {
+      console.error(`Registration failed with ${error}`);
+    }
+  }
+};
+
+registerServiceWorker();

static/sw.js

@@ -1,94 +1,68 @@
-const addResourcesToCache = async (resources) => {
-  const cache = await caches.open('v1');
-  await cache.addAll(resources);
-};
+const cacheName = "v2";
 
-const putInCache = async (request, response) => {
-  const cache = await caches.open('v1');
-  await cache.put(request, response);
+oninstall = (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(cacheName);
+      await cache.add("/offline/");
+      console.log("Service worker added offline page");
+    })(),
+  );
 };
 
-const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => {
-  const responseFromCache = await caches.match(request);
-  if (responseFromCache) {
-    return responseFromCache;
-  }
-
-  const preloadResponse = await preloadResponsePromise;
-  if (preloadResponse) {
-    console.info('using preload response', preloadResponse);
-    putInCache(request, preloadResponse.clone());
-    return preloadResponse;
-  }
+onfetch = (event) => {
+  console.log("Service worker fetching", event.request.url);
+  event.respondWith(
+    caches.open(cacheName).then((cache) => {
+      return cache
+        .match(event.request)
+        .then((response) => {
+          if (response) {
+            console.log("Service worker found response in cache:", response);
+            return response;
+          }
 
-  try {
-    const responseFromNetwork = await fetch(request.clone());
-    putInCache(request, responseFromNetwork.clone());
-    return responseFromNetwork;
-  } catch (error) {
-    const fallbackResponse = await caches.match(fallbackUrl);
-    if (fallbackResponse) {
-      return fallbackResponse;
-    }
-
-    return new Response('Network error happened', {
-      status: 408,
-      headers: { 'Content-Type': 'text/plain' },
-    });
-  }
-};
+          console.log(
+            "No response for %s found in service worker cache. Fetching " +
+              "from network",
+            event.request.url,
+          );
 
-const enableNavigationPreload = async () => {
-  if (self.registration.navigationPreload) {
-    await self.registration.navigationPreload.enable();
-  }
-};
+          return fetch(event.request.clone()).then((response) => {
+            console.log(
+              "Service worker got response for %s from network: %O",
+              event.request.url,
+              response,
+            );
 
-self.addEventListener('activate', (event) => {
-  event.waitUntil(enableNavigationPreload());
-});
+            if (response.status < 400) {
+              console.log("Caching the response to", event.request.url);
+              cache.put(event.request, response.clone());
+            } else {
+              console.log("Service worker not caching the response to", event.request.url);
+            }
 
-self.addEventListener('install', (event) => {
-  event.waitUntil(
-    addResourcesToCache([
-      './',
-      './index.html',
-      './404.html',
-      './atom.xml',
-      './sitemap.xml',
-      './search.js',
-      './main.css',
-      './glitch.css',
-      './syntax-theme-light.css',
-      './syntax-theme-dark.css',
-      './langs.css',
-      './robots.txt',
-      './offline/index.html',
-      './webfonts/fa-brands-400.ttf',
-      './webfonts/fa-brands-400.woff2',
-      './webfonts/fa-regular-400.ttf',
-      './webfonts/fa-regular-400.woff2',
-      './webfonts/fa-solid-900.ttf',
-      './webfonts/fa-solid-900.woff2',
-      './webfonts/fa-v4compatibility.ttf',
-      './webfonts/fa-v4compatibility.woff2',
-      './webfonts/Pixeboy.woff2',
-      './webfonts/PressStart2P-latin-v15.woff2',
-      './vendor/font-awesome/solid.css',
-      './vendor/font-awesome/regular.css',
-      './vendor/font-awesome/brands.css',
-      './vendor/font-awesome/fontawesome.css',
-      './vendor/font-awesome/v4-shims.css',
-    ])
+            return response;
+          }).catch(() => caches.match("/offline/"));
+        })
+        .catch((error) => {
+          console.error("Error in service worker fetch handler:", error);
+          throw error;
+        });
+    }),
   );
-});
+};
 
-self.addEventListener('fetch', (event) => {
-  event.respondWith(
-    cacheFirst({
-      request: event.request,
-      preloadResponsePromise: event.preloadResponse,
-      fallbackUrl: './offline/',
-    })
-  );
-});
+self.onactivate = (event) =>  {
+  event.waitUntil(
+    (async () => {
+      const keys = await caches.keys();
+      return keys.map(async (cache) => {
+        if(cache !== cacheName) {
+          console.log('Removing old service worker cache '+cache);
+          return await caches.delete(cache);
+        }
+      })
+    })()
+  )
+};