https://stayawake.pages.dev/service-worker.js

1// service-worker.js
2
3// Define a unique name for the cache storage. Increment version to force update.
4const CACHE_NAME = "stay-awake-cache-v1";
5
6// List of URLs to cache during the service worker installation.
7const urlsToCache = [
8  "/", // Cache the root URL (often serves index.html)
9  "/index.html", // Explicitly cache index.html
10  "/index.css", // Cache the main stylesheet
11  "/index.js", // Cache the compiled JavaScript
12  "/nosleep/nosleep.js", // Cache the NoSleep library
13  "/favicon/favicon_green.ico", // Cache favicons
14  "/favicon/favicon_blue.ico",
15  "/manifest.json", // Cache the Web App Manifest
16  "/icons/ghost_192x192.png", // Cache PWA icons (Update paths if different)
17  "/icons/ghost_512x512.png",
18  // Cache essential CDN assets for basic offline functionality
19  "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
20  "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
21  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css",
22  // Add other crucial CDN assets if needed (e.g., Google Fonts CSS, though font files might be trickier)
23  "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;800&display=swap", // Cache the font CSS definition
24];
25
26// Install event: triggered when the service worker is first registered or updated.
27self.addEventListener("install", (event) => {
28  console.log("Service Worker: Installing...");
29  // Prevent the SW from completing installation until the cache is populated.
30  event.waitUntil(
31    caches
32      .open(CACHE_NAME) // Open the specified cache.
33      .then((cache) => {
34        console.log("Service Worker: Caching app shell");
35        // Add all specified URLs to the cache.
36        // If any request fails, the entire cache operation fails.
37        return cache.addAll(urlsToCache);
38      })
39      .then(() => self.skipWaiting()) // Force the waiting SW to become active immediately.
40      .catch((err) =>
41        console.error("Service Worker: Cache open/addAll failed", err)
42      )
43  );
44});
45
46// Activate event: triggered after the SW installation and when it takes control.
47// Used to clean up old caches.
48self.addEventListener("activate", (event) => {
49  console.log("Service Worker: Activating...");
50  // Define a whitelist of cache names to keep (only the current one).
51  const cacheWhitelist = [CACHE_NAME];
52  event.waitUntil(
53    caches
54      .keys()
55      .then((cacheNames) => {
56        // Get all cache storage keys (names).
57        return Promise.all(
58          cacheNames.map((cacheName) => {
59            // If a cache name is not in the whitelist, delete it.
60            if (!cacheWhitelist.includes(cacheName)) {
61              console.log("Service Worker: Deleting old cache", cacheName);
62              return caches.delete(cacheName);
63            }
64          })
65        );
66      })
67      .then(() => self.clients.claim()) // Allow the active SW to take control of the page immediately.
68  );
69});
70
71// Fetch event: triggered for every network request made by the page.
72// Implements a Cache-First strategy.
73self.addEventListener("fetch", (event) => {
74  // Optional: Log the requested URL (can be noisy).
75  // console.log('Service Worker: Fetching', event.request.url);
76
77  // Respond to the fetch request either from cache or network.
78  event.respondWith(
79    caches
80      .match(event.request) // Check if the request exists in the cache.
81      .then((response) => {
82        // Cache hit: If a matching response is found in the cache, return it.
83        if (response) {
84          // console.log('Service Worker: Serving from cache:', event.request.url);
85          return response;
86        }
87
88        // Cache miss: If not found in cache, fetch from the network.
89        // console.log('Service Worker: Fetching from network:', event.request.url);
90        return fetch(event.request).then((networkResponse) => {
91          // Optional: Dynamically cache network responses here.
92          // Be cautious: Only cache responses you know are safe/static,
93          // or implement a more complex caching strategy (e.g., stale-while-revalidate).
94          // Example (commented out):

95          // if(!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
96          //   // Don't cache errors, redirects, or cross-origin opaque responses without care.
97          //   return networkResponse;
98          // }
99          // // Clone the response because it can only be consumed once.
100          // const responseToCache = networkResponse.clone();
101          // caches.open(CACHE_NAME).then(cache => {
102          //   // Put the fetched response into the cache for next time.
103          //   cache.put(event.request, responseToCache);
104          // });
105
106          // Return the network response to the page.
107          return networkResponse;
108        });
109      })
110      .catch((err) => {
111        // Handle potential errors during cache match or network fetch.
112        console.error("Service Worker: Fetch failed", err);
113        // Optional: Provide a fallback offline page/resource here.
114        // Example: return caches.match('/offline.html');
115      })
116  );
117});