Add basic PWA offline page

- Remove feed_icons cache because it's causing more problems that it solve.
- Add basic offline mode when using the service worker.
- Starting in Chrome 93, offline mode is going to be a requirement to install the PWA.

https://developer.chrome.com/blog/improved-pwa-offline-detection/#enforcement-starting-chrome-93-august-2021

ui/static/js/service_worker.js

@@ -1,14 +1,44 @@
+
+// Incrementing OFFLINE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+
+self.addEventListener("install", (event) => {
+    event.waitUntil(
+        (async () => {
+            const cache = await caches.open(CACHE_NAME);
+
+            // Setting {cache: 'reload'} in the new request will ensure that the
+            // response isn't fulfilled from the HTTP cache; i.e., it will be from
+            // the network.
+            await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+        })()
+    );
+
+    // Force the waiting service worker to become the active service worker.
+    self.skipWaiting();
+});
+
 self.addEventListener("fetch", (event) => {
-    if (event.request.url.includes("/feed/icon/")) {
+    // We proxify requests through fetch() only if we are offline because it's slower.
+    if (navigator.onLine === false && event.request.mode === "navigate") {
         event.respondWith(
-            caches.open("feed_icons").then((cache) => {
-                return cache.match(event.request).then((response) => {
-                    return response || fetch(event.request).then((response) => {
-                        cache.put(event.request, response.clone());
-                        return response;
-                    });
-                });
-            })
+            (async () => {
+                try {
+                    // Always try the network first.
+                    const networkResponse = await fetch(event.request);
+                    return networkResponse;
+                } catch (error) {
+                    // catch is only triggered if an exception is thrown, which is likely
+                    // due to a network error.
+                    // If fetch() returns a valid HTTP response with a response code in
+                    // the 4xx or 5xx range, the catch() will NOT be called.
+                    const cache = await caches.open(CACHE_NAME);
+                    const cachedResponse = await cache.match(OFFLINE_URL);
+                    return cachedResponse;
+                }
+            })()
         );
     }
 });