From 8d7e264ffb6f5ba1905617f783178e458f014957 Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Fri, 15 Nov 2024 13:20:06 +0100
Subject: [PATCH] Add basic caching service worker

---
 js/caching-worker.js | 37 +++++++++++++++++++++++++++++++++++++
 js/jenot.js          |  1 +
 js/service-worker.js | 23 +++++++++++++++++++++++
 3 files changed, 61 insertions(+)
 create mode 100644 js/caching-worker.js
 create mode 100644 js/service-worker.js

diff --git a/js/caching-worker.js b/js/caching-worker.js
new file mode 100644
index 0000000..a23389e
--- /dev/null
+++ b/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",
+    }),
+  );
+});
diff --git a/js/jenot.js b/js/jenot.js
index 32bf055..1a8c813 100644
--- a/js/jenot.js
+++ b/js/jenot.js
@@ -1,3 +1,4 @@
+import "./service-worker.js";
 import { renderText } from "./dom.js";
 import { NoteStore } from "./store.js";
 import "./components.js";
diff --git a/js/service-worker.js b/js/service-worker.js
new file mode 100644
index 0000000..48c77d5
--- /dev/null
+++ b/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();