Add basic caching service worker

js/caching-worker.js

@@ -0,0 +1,37 @@
+const putInCache = async (request, response) => {
+  const cache = await caches.open("v1");
+  await cache.put(request, response);
+};
+
+const cacheFirst = async ({ request, fallbackUrl }) => {
+  const responseFromCache = await caches.match(request);
+  if (responseFromCache) {
+    return responseFromCache;
+  }
+
+  try {
+    const responseFromNetwork = await fetch(request);
+    // Cloning is needed because a response can only be consumed once.
+    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" },
+    });
+  }
+};
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    cacheFirst({
+      request: event.request,
+      fallbackUrl: "/index.html",
+    }),
+  );
+});

js/jenot.js

@@ -1,3 +1,4 @@
+import "./service-worker.js";
 import { renderText } from "./dom.js";
 import { NoteStore } from "./store.js";
 import "./components.js";

js/service-worker.js

@@ -0,0 +1,23 @@
+const registerServiceWorker = async () => {
+  if ("serviceWorker" in navigator) {
+    try {
+      const registration = await navigator.serviceWorker.register(
+        "/js/caching-worker.js",
+        {
+          scope: "/",
+        },
+      );
+      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();