don't cache requests, show offline page instead when not online

sigmaSd · Apr 24, 2024 · bdf6868 · bdf6868
1 parent 68d1aea
commit bdf6868
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 15 deletions.
diff --git a/static/offline.html b/static/offline.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Offline</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f2f2f2;
+        }
+        .container {
+            margin-top: 100px;
+        }
+        h1 {
+            color: #333;
+        }
+        p {
+            color: #666;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Offline Page</h1>
+        <p>Sorry, it seems like you're offline. This app requires an internet connection to function.</p>
+    </div>
+</body>
+</html>
+
diff --git a/static/sw.js b/static/sw.js
@@ -1,23 +1,22 @@
-// Cache requests so the app can work offline
-// https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers
 const cacheName = "myapp";
+const offlinePage = "/offline.html";
 
-self.addEventListener("fetch", (e) => {
-  e.respondWith(
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(cacheName).then((cache) => {
+      return cache.add(offlinePage);
+    }),
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
     (async () => {
       try {
-        const response = await fetch(e.request);
-        const cache = await caches.open(cacheName);
-        console.log(`[Service Worker] Caching resource: ${e.request.url}`);
-        cache.put(e.request, response.clone());
-        return response;
+        return await fetch(event.request);
       } catch {
-        // if we have no network access, try to use the cache
-        const response = await caches.match(e.request);
-        console.log(`[Service Worker] Using cached resource: ${e.request.url}`);
-        if (response) {
-          return response;
-        }
+        // If no cache is available, respond with the offline page
+        return caches.match(offlinePage);
       }
     })(),
   );