feat: Enhance PWA capabilities by adding new icons, updating the manifest, integrating an install component, and refining service worker caching strategies.

Author: chaxus

index.html

@@ -1,21 +1,27 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <link href="/img/64.png" rel="shortcut icon" />
-    <link rel="manifest" href="./manifest.webmanifest" />
-    <meta name="theme-color" content="#0052cc" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-    <title>Document Editor</title>
-    <script src="/web-apps/apps/api/documents/api.js"></script>
-  </head>
 
-  <body>
-    <div id="app" class="w-full h-full">
-      <div id="iframe"></div>
-    </div>
-  </body>
-  <script type="module" src="./index.ts"></script>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <link href="/img/64.png" rel="shortcut icon" />
+  <link rel="icon" type="image/png" href="/img/64.png" />
+  <link rel="manifest" href="./manifest.webmanifest" />
+  <meta name="theme-color" content="#0052cc" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  <title>Document Editor</title>
+  <script src="/web-apps/apps/api/documents/api.js"></script>
+</head>
+
+<body>
+  <div id="app" class="w-full h-full">
+    <div id="iframe"></div>
+  </div>
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@khmyznikov/pwa-install@0.4.3/dist/pwa-install.bundle.js"></script>
+  <pwa-install id="pwa-install" manifestpath="./manifest.webmanifest" iconpath="./img/pwa-512.png"></pwa-install>
+</body>
+<script type="module" src="./index.ts"></script>
+
+</html>

public/img/64.png

@@ -11,6 +11,16 @@
       "src": "img/64.png",
       "sizes": "64x64",
       "type": "image/png"
+    },
+    {
+      "src": "img/pwa-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "img/pwa-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ]
 }

public/img/pwa-192.png

@@ -28,7 +28,7 @@ self.addEventListener('activate', (event) => {
   self.clients.claim();
 });
 
-// Fetch event: Stale-While-Revalidate strategy
+// Fetch event: Strategy-based resource handling
 self.addEventListener('fetch', (event) => {
   const url = new URL(event.request.url);
 
@@ -42,13 +42,20 @@ self.addEventListener('fetch', (event) => {
   // These are typically documents being edited, which should always be fresh.
   if (url.searchParams.has('file') || url.searchParams.has('src')) return;
 
-  // 4. Stale-While-Revalidate Strategy
-  event.respondWith(
-    caches.match(event.request).then((cachedResponse) => {
-      const fetchPromise = fetch(event.request)
+  // 4. Determine Strategy
+  const isHtml = event.request.mode === 'navigate' ||
+    url.pathname.endsWith('.html') ||
+    url.pathname === '/' ||
+    url.pathname.endsWith('/');
+
+  if (isHtml) {
+    // Strategy: Network-First for HTML/Navigation
+    // Ensuring the user always gets the latest version if online, 
+    // but can still access the app when offline.
+    event.respondWith(
+      fetch(event.request)
         .then((networkResponse) => {
-          // Only cache valid 200 responses
-          if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
+          if (networkResponse && networkResponse.status === 200) {
             const responseToCache = networkResponse.clone();
             caches.open(CACHE_NAME).then((cache) => {
               cache.put(event.request, responseToCache);
@@ -57,15 +64,34 @@ self.addEventListener('fetch', (event) => {
           return networkResponse;
         })
         .catch(() => {
-          // If network fails, return the cached version if we have it
-          return cachedResponse;
-        });
+          return caches.match(event.request);
+        })
+    );
+  } else {
+    // Strategy: Stale-While-Revalidate for other static assets (JS, CSS, Images)
+    event.respondWith(
+      caches.match(event.request).then((cachedResponse) => {
+        const fetchPromise = fetch(event.request)
+          .then((networkResponse) => {
+            // Only cache valid 200 responses
+            if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
+              const responseToCache = networkResponse.clone();
+              caches.open(CACHE_NAME).then((cache) => {
+                cache.put(event.request, responseToCache);
+              });
+            }
+            return networkResponse;
+          })
+          .catch(() => {
+            return cachedResponse;
+          });
 
-      // Use event.waitUntil to ensure the fetch/cache update continues in background
-      if (!cachedResponse) {
-        return fetchPromise;
-      }
-      return cachedResponse;
-    }),
-  );
+        // Use event.waitUntil to ensure the fetch/cache update continues in background
+        if (!cachedResponse) {
+          return fetchPromise;
+        }
+        return cachedResponse;
+      }),
+    );
+  }
 });