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();