fix: service worker improvements for PWA reliability (#127)

Author: chriswritescode-dev

backend/src/index.ts

@@ -269,6 +269,15 @@ app.all('/api/opencode/*', requireAuth, async (c) => {
 const isProduction = ENV.SERVER.NODE_ENV === 'production'
 
 if (isProduction) {
+  app.use('/*', async (c, next) => {
+    await next()
+    if (c.req.path === '/sw.js') {
+      c.res.headers.set('Cache-Control', 'no-cache, no-store, must-revalidate')
+      c.res.headers.set('Pragma', 'no-cache')
+      c.res.headers.set('Expires', '0')
+    }
+  })
+
   app.use('/*', serveStatic({ root: './frontend/dist' }))
 
   app.get('*', async (c) => {

frontend/package.json

@@ -73,10 +73,6 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",
     "vite": "^7.1.7",
-    "vite-plugin-pwa": "^1.2.0",
-    "vitest": "^3.2.4",
-    "workbox-core": "^7.4.0",
-    "workbox-window": "^7.4.0",
-    "workbox-precaching": "^7.4.0"
+    "vitest": "^3.2.4"
   }
 }

frontend/public/icons/apple-touch-icon.png

@@ -24,18 +24,6 @@
       "src": "/icons/icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
-    },
-    {
-      "src": "/icons/icon-maskable-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "/icons/icon-maskable-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
     }
   ],
   "categories": ["developer", "productivity", "utilities"],

frontend/public/icons/icon-192x192.png

@@ -1,10 +1,8 @@
+import "../sw?worker";
+
 export function registerServiceWorker(): void {
   if (!("serviceWorker" in navigator)) return;
-
-  navigator.serviceWorker
-    .register("/sw.js", { scope: "/", type: "module" })
-    .then((registration) => registration.update())
-    .catch(() => {});
+  navigator.serviceWorker.register("/sw.js", { scope: "/" }).catch(() => {});
 }
 
 export async function getServiceWorkerRegistration(): Promise<ServiceWorkerRegistration | null> {

frontend/public/icons/icon-512x512.png

@@ -1,12 +1,18 @@
 /// <reference lib="webworker" />
-import { precacheAndRoute, cleanupOutdatedCaches } from "workbox-precaching";
 
-declare const self: ServiceWorkerGlobalScope & {
-  __WB_MANIFEST: Array<{ url: string; revision: string | null }>;
-};
+declare const self: ServiceWorkerGlobalScope & typeof globalThis;
 
-cleanupOutdatedCaches();
-precacheAndRoute(self.__WB_MANIFEST);
+self.addEventListener("install", () => {
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((names) =>
+      Promise.all(names.map((name) => caches.delete(name)))
+    ).then(() => self.clients.claim())
+  );
+});
 
 interface PushNotificationData {
   title: string;
@@ -22,15 +28,7 @@ interface PushNotificationData {
   };
 }
 
-self.addEventListener("activate", (event) => {
-  event.waitUntil(self.clients.claim());
-});
-
-self.addEventListener("install", () => {
-  self.skipWaiting();
-});
-
-self.addEventListener("push", (event: PushEvent) => {
+self.addEventListener("push", (event) => {
   if (!event.data) return;
 
   let payload: PushNotificationData;
@@ -56,7 +54,7 @@ self.addEventListener("push", (event: PushEvent) => {
   event.waitUntil(self.registration.showNotification(payload.title, options));
 });
 
-self.addEventListener("notificationclick", (event: NotificationEvent) => {
+self.addEventListener("notificationclick", (event) => {
   event.notification.close();
 
   const url = (event.notification.data?.url as string) ?? "/";
@@ -67,7 +65,7 @@ self.addEventListener("notificationclick", (event: NotificationEvent) => {
       .then((clientList) => {
         for (const client of clientList) {
           if (new URL(client.url).origin === self.location.origin) {
-            client.focus();
+            (client as WindowClient).focus();
             (client as WindowClient).navigate(url);
             return;
           }