offline testing

longmetal7127 · Feb 16, 2024 · 62ccd83 · 62ccd83
1 parent b3e7e8e
commit 62ccd83
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -21,7 +21,25 @@
 </head>
 
 <body>
-
+	<script>
+		async function registerServiceWorker() {
+		  if ("serviceWorker" in navigator) {
+			try {
+			  const registration = await navigator.serviceWorker.register(
+				"sw.js"
+			  );
+			  console.log(
+				"Service Worker registered with scope:",
+				registration.scope
+			  );
+			} catch (error) {
+			  console.error("Service Worker registration failed:", error);
+			}
+		  }
+		}
+
+		registerServiceWorker();
+	  </script>
 	<nav>
 		<div class = "heading">
 			<h1>Longmetal 7127 4</h1>

diff --git a/sw.js b/sw.js
@@ -0,0 +1,40 @@
+const cacheName = "offline-cache-v1";
+const cacheUrls = ["index.html","index.js","manifest.json","sw.js","index.css","node_modules\\dexie\\","pages\\"];
+
+// Installing the Service Worker
+self.addEventListener("install", async (event) => {
+  try {
+    const cache = await caches.open(cacheName);
+    await cache.addAll(cacheUrls);
+  } catch (error) {
+    console.error("Service Worker installation failed:", error);
+  }
+});
+
+// Fetching resources
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    (async () => {
+      const cache = await caches.open(cacheName);
+
+      try {
+        const cachedResponse = await cache.match(event.request);
+        if (cachedResponse) {
+          console.log("cachedResponse: ", event.request.url);
+          return cachedResponse;
+        }
+
+        const fetchResponse = await fetch(event.request);
+        if (fetchResponse) {
+          console.log("fetchResponse: ", event.request.url);
+          await cache.put(event.request, fetchResponse.clone());
+          return fetchResponse;
+        }
+      } catch (error) {
+        console.log("Fetch failed: ", error);
+        const cachedResponse = await cache.match("index.html");
+        return cachedResponse;
+      }
+    })()
+  );
+});