🦜 Cache remote assets using a ServiceWorker in the browser (#555)

This introduces a ServiceWorker to intercept and cache network requests to remote assets in the browser. It works for Clerk's js bundle, its tailwind css script, fonts and as well as javascript dynamically loaded using d3-require like Clerk's Vega and Plotly viewers.

To use it, you need to open Clerk in the browser when online to populate the cache. Viewers that are dynamically loaded (e.g. Vega or Plotly) need to be used once while offline to be cached. We're considering loading them on worker init in a follow up.

We currently apply it to the following urls:
* https://fonts.bunny.net
* https://cdn.skypack.dev
* https://cdn.tailwindcss.com
* https://storage.clerk.garden
* https://cdn.jsdelivr.net
* https://vega.github.io


Co-authored-by: Martin Kavalar <martin@nextjournal.com>

resources/public/clerk_service_worker.js

@@ -0,0 +1,54 @@
+const cacheName = 'clerk-browser-cache-v2';
+
+const hosts = [
+  'https://fonts.bunny.net',
+  'https://cdn.skypack.dev',
+  'https://cdn.tailwindcss.com',
+  'https://storage.clerk.garden',
+  'https://cdn.jsdelivr.net',
+  'https://vega.github.io'  
+];
+
+self.addEventListener('install', function(event) {
+  //console.log('install', event);
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', function(event) {
+  //console.log('activate', event);
+
+  // Remove unwanted caches
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cache) {
+          if (cache !== cacheName) {
+            console.log("Service Worker: Clearing old cache");
+            return caches.delete(cache);
+          }
+        }));
+    }));
+
+  return self.clients.claim()
+});
+
+self.addEventListener('fetch', function(event) {
+  //console.log(event);
+
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+        return response || fetch(event.request).then(function(response) {
+
+        hosts.map(function(host) {
+          if (event.request.url.indexOf(host) === 0) {
+            var clonedResponse = response.clone();
+            caches.open(cacheName).then(function(cache) {
+              cache.put(event.request, clonedResponse);
+            });
+          }
+        });
+        return response;
+      });
+    })
+  );
+});

src/nextjournal/clerk/view.clj

@@ -55,6 +55,14 @@
    [:head
     [:meta {:charset "UTF-8"}]
     [:meta {:name "viewport" :content "width=device-width, initial-scale=1"}]
+    (when conn-ws?
+      [:script {:type "text/javascript"}
+       "if ('serviceWorker' in navigator) {
+          navigator.serviceWorker
+            .register('/clerk_service_worker.js')
+            //.then(function() { console.log('Service Worker: Registered') })
+            .catch(function(error) { console.log('Service Worker: Error', error) })
+        }"])
     (when current-path (v/open-graph-metas (-> state :path->doc (get current-path) v/->value :open-graph)))
     (if exclude-js?
       (include-viewer-css state)

src/nextjournal/clerk/webserver.clj

@@ -4,6 +4,7 @@
             [clojure.pprint :as pprint]
             [clojure.set :as set]
             [clojure.string :as str]
+            [clojure.java.io :as io]
             [editscript.core :as editscript]
             [nextjournal.clerk.config :as config]
             [nextjournal.clerk.view :as view]
@@ -104,6 +105,7 @@
 
 #_(serve-file "public" {:uri "/js/viewer.js"})
 
+
 (defn sync-atom-changed [key atom old-state new-state]
   (eval '(nextjournal.clerk/recompute!)))
 
@@ -251,6 +253,7 @@
       (case (get (re-matches #"/([^/]*).*" uri) 1)
         "_blob" (serve-blob @!doc (extract-blob-opts req))
         ("build" "js" "css") (serve-file uri (str "public" uri))
+        "clerk_service_worker.js" (serve-file uri (fs/path (io/resource "public/clerk_service_worker.js")))
         ("_fs") (serve-file uri (str/replace uri "/_fs/" ""))
         "_ws" {:status 200 :body "upgrading..."}
         "favicon.ico" {:status 404}