Add service worker for offline caching; update 404 page structure

Author: prasad-kmd

404.html

@@ -9,17 +9,19 @@
     max-width: 600px;
     text-align: center;
   }
+
   h1 {
     margin: 30px 0;
     font-size: 4em;
     line-height: 1;
     letter-spacing: -1px;
   }
 </style>
+<div class="ui segment">
+  <div class="container">
+    <h1>404</h1>
 
-<div class="container">
-  <h1>404</h1>
-
-  <p><strong>Page not found :(</strong></p>
-  <p>The requested page could not be found.</p>
-</div>
+    <p><strong>Page not found :(</strong></p>
+    <p>The requested page could not be found.</p>
+  </div>
+</div>

_includes/service-worker.html

@@ -0,0 +1,13 @@
+<script>
+    if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+            navigator.serviceWorker.register('../service-worker.js')
+                .then((registration) => {
+                    console.log('Service worker registered successfully:', registration);
+                })
+                .catch((error) => {
+                    console.error('Service worker registration failed:', error);
+                });
+        });
+    }
+</script>

service-worker.js

@@ -0,0 +1,68 @@
+// service-worker.js
+
+const CACHE_NAME = "prasad-blogfolio-v1";
+const urlsToCache = [
+  "/",
+  "/index.html",
+  "/blog/",
+  "/assets/main.css",
+  // Add other static assets (images, fonts, scripts) that you want to cache here.
+];
+
+// Install the service worker
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      console.log("Cache opened");
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+// Fetch cached assets when offline
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      // Cache hit - return response
+      if (response) {
+        return response;
+      }
+
+      // Not in cache - fetch from network
+      return fetch(event.request).then((networkResponse) => {
+        // Check if the request was successful
+        if (
+          !networkResponse ||
+          networkResponse.status !== 200 ||
+          networkResponse.type !== "basic"
+        ) {
+          return networkResponse;
+        }
+
+        // Response is good - add it to the cache
+        const responseToCache = networkResponse.clone();
+
+        caches.open(CACHE_NAME).then((cache) => {
+          cache.put(event.request, responseToCache);
+        });
+        return networkResponse;
+      });
+    })
+  );
+});
+
+// Activate the service worker and remove old caches
+self.addEventListener("activate", (event) => {
+  const cacheWhitelist = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys().then((cacheNames) =>
+      Promise.all(
+        cacheNames.map((cacheName) => {
+          if (!cacheWhitelist.includes(cacheName)) {
+            return caches.delete(cacheName);
+          }
+        })
+      )
+    )
+  );
+});