Add service worker (#93)

public/manifest.json

@@ -1,18 +1,32 @@
 {
   "name": "2FA Directory",
   "lang": "en",
+  "start_url": "/",
+  "scope": "/",
+  "serviceworker": {
+    "src": "/service-worker.js",
+    "scope": "/",
+    "use_cache": true
+  },
+  "theme_color": "#38CCCC",
+  "background_color": "#EEE",
+  "display": "standalone",
+  "display_override": [
+    "standalone",
+    "minimal-ui"
+  ],
   "description": "List of sites with two factor auth support which includes SMS, email, phone calls, hardware, and software.",
   "orientation": "portrait-primary",
   "icons": [
     {
-      "src": "/icons/icon-only.svg",
+      "src": "/icons/icon.svg",
       "sizes": "any",
       "type": "image/svg+xml",
       "purpose": "any"
     },
     {
       "src": "/icons/icon.png",
-      "sizes": "515x515",
+      "sizes": "512x512",
       "type": "image/png",
       "purpose": "any"
     },
@@ -22,10 +36,5 @@
       "type": "image/png",
       "purpose": "maskable"
     }
-  ],
-  "start_url": "/",
-  "scope": "/",
-  "theme_color": "#38CCCC",
-  "background_color": "#EEE",
-  "display": "standalone"
+  ]
 }

public/service-worker.js

@@ -0,0 +1,63 @@
+const DYNAMIC_CACHE = "dynamic-cache-v1";
+
+// Array of regular expressions for URLs to match for dynamic caching
+const URLS_TO_CACHE = [
+  /^https:\/\/fonts\.googleapis\.com/,
+  /^https:\/\/fonts\.gstatic\.com/,
+  /^https:\/\/2fa\.directory\/assets\/.*/,             // Match specific assets on 2fa.directory
+  /^https:\/\/api\.2fa\.directory\/frontend\/v1\/regions\.json$/, // Match specific JSON files
+  /^https:\/\/api\.2fa\.directory\/frontend\/v1\/[a-z]{2}\/categories\.json$/, // Match only specific JSON paths by region
+  /^https:\/\/cdnjs\.cloudflare\.com\/ajax\/libs\/.*/, // Match CDN assets from Cloudflare
+];
+
+// Function to check if the URL matches any in the array using regular expressions
+function shouldCache(url) {
+  return URLS_TO_CACHE.some((regex) => regex.test(url));
+}
+
+// Install event: skipWaiting allows for more aggressive unloading
+self.addEventListener("install", (event) => {
+  self.skipWaiting();
+});
+
+// Activate event: Clean up old caches
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.filter((cacheName) => cacheName !== DYNAMIC_CACHE).
+          map((cacheName) => caches.delete(cacheName)),
+      );
+    }),
+  );
+  self.clients.claim();
+});
+
+// Fetch event: Serve cached assets if available; otherwise, fetch from network and cache the response
+self.addEventListener("fetch", (event) => {
+  const requestUrl = event.request.url;
+
+  // Check if the request URL should be cached dynamically
+  if (shouldCache(requestUrl)) {
+    // Network-first strategy for URLs in the matching array
+    event.respondWith(
+      fetch(event.request).then((response) => {
+        // Clone and store the response in the dynamic cache
+        return caches.open(DYNAMIC_CACHE).then((cache) => {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      }).catch(() => caches.match(event.request)), // Fallback to cache on network failure
+    );
+  } else {
+    // Cache-first strategy for other requests (but do not cache if not matching)
+    event.respondWith(
+      caches.match(event.request).then((cachedResponse) => {
+        if (cachedResponse) return cachedResponse;
+
+        // Fetch from network without caching the result
+        return fetch(event.request);
+      }),
+    );
+  }
+});

src/components/style.js

@@ -2,3 +2,6 @@ import "/assets/css/root.scss";
 import "/assets/css/page.scss";
 import "/assets/css/navbar.scss";
 import "/assets/css/footer.scss";
+import {registerServiceWorker} from '../serviceWorker.js';
+
+registerServiceWorker();

src/serviceWorker.js

@@ -0,0 +1,23 @@
+export function registerServiceWorker() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker
+    .register('/service-worker.js')
+    .then((registration) => {
+      console.log('Service Worker registered with scope:', registration.scope);
+
+      // Listen for updates to the service worker
+      registration.onupdatefound = () => {
+        const newWorker = registration.installing;
+        if (newWorker) {
+          newWorker.onstatechange = () => {
+            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+              // New content is available, notify the user or auto-refresh
+              console.log('New Service Worker found. Refresh for updates.');
+            }
+          };
+        }
+      };
+    })
+    .catch((error) => console.error('Service Worker registration failed:', error));
+  }
+}