@modernman00/shared-js-lib 1.2.82 → 1.2.83

package/templates/sw.template.js

@@ -0,0 +1,239 @@
+/**
+ * ⚡ CANONICAL SERVICE WORKER BLUEPRINT — @modernman00/shared-js-lib
+ * Standardized across PartyPlatform, FamilyPlatform, ExecMind, iAccount, iDecide, LoanEasy
+ *
+ * Implements:
+ * 1. Marcus Lindqvist (Deloitte) 3000ms navigation timeout race (no hanging Safari white screens)
+ * 2. Scoped runtime cache names: ${APP_NAME}-code-${SW_VERSION}, ${APP_NAME}-media, ${APP_NAME}-api
+ * 3. Strict NetworkOnly security gate for /auth, /admin, /login, /logout, /csrf
+ * 4. Self-hosted Workbox 7.0 fallback & background sync
+ * 5. Universal Push Notification, Web Badging API, and Cross-Tab BroadcastChannel
+ */
+
+// Workbox 7.0.0 — self-hosted
+importScripts('/public/js/workbox/workbox-sw.js');
+if (typeof workbox !== 'undefined') {
+  workbox.setConfig({ modulePathPrefix: '/public/js/workbox/' });
+}
+
+// Build stamp & app identification
+const SW_VERSION = 'dev';
+const APP_NAME = 'app';
+
+// Dynamic cache names scoped per app & build
+const CODE_CACHE = `${APP_NAME}-code-${SW_VERSION}`;
+const MEDIA_CACHE = `${APP_NAME}-media-v1`;
+const API_CACHE = `${APP_NAME}-api-cache`;
+const OFFLINE_CACHE = `${APP_NAME}-offline-v1`;
+const KEEP_CACHES = [CODE_CACHE, MEDIA_CACHE, API_CACHE, OFFLINE_CACHE];
+
+const OFFLINE_HTML = '/public/offline.html';
+
+// Activation & Cache Pruning
+self.addEventListener('activate', (event) => {
+  event.waitUntil((async () => {
+    const keys = await caches.keys();
+    await Promise.all(keys.map((key) => {
+      if (KEEP_CACHES.includes(key)) return undefined;
+      // Delete old versioned code caches or stale legacy buckets
+      if (key.startsWith(`${APP_NAME}-code-`) || key === 'static-resources') {
+        return caches.delete(key);
+      }
+      return undefined;
+    }));
+    await self.clients.claim();
+  })());
+});
+
+// Helper: 3000ms Timeout Promise Race (Deloitte Safari Navigation Protection)
+function fetchWithTimeout(request, timeoutMs = 3000) {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      reject(new Error('[SW] Navigation network timeout (3000ms) exceeded'));
+    }, timeoutMs);
+
+    fetch(request)
+      .then((response) => {
+        clearTimeout(timer);
+        resolve(response);
+      })
+      .catch((err) => {
+        clearTimeout(timer);
+        reject(err);
+      });
+  });
+}
+
+// Workbox Routing & Strategies
+if (typeof workbox !== 'undefined') {
+  console.log(`[${APP_NAME} SW] Workbox initialized successfully 🎉`);
+
+  // 1. Strict Security Gate — Never cache authentication, admin, or session endpoints
+  workbox.routing.registerRoute(
+    ({ url }) => ['/admin', '/login', '/register', '/auth', '/logout', '/signout', '/api/csrf', '/2fa'].some(p => url.pathname.startsWith(p)),
+    new workbox.strategies.NetworkOnly()
+  );
+
+  // 2. Navigation Requests with 3000ms WebKit Timeout Race
+  workbox.routing.registerRoute(
+    ({ request }) => request.mode === 'navigate',
+    async ({ request }) => {
+      try {
+        return await fetchWithTimeout(request, 3000);
+      } catch (err) {
+        console.warn(`[${APP_NAME} SW] Navigation failed or timed out. Serving offline fallback shell.`);
+        const fallback = await caches.match(OFFLINE_HTML);
+        return fallback || new Response('<h1>Offline</h1><p>Please check your internet connection.</p>', {
+          status: 503,
+          headers: { 'Content-Type': 'text/html' }
+        });
+      }
+    }
+  );
+
+  // 3. Same-origin app assets (Webpack JS & CSS)
+  const isDev = SW_VERSION === 'dev' ||
+    self.location.hostname === 'localhost' ||
+    self.location.hostname === '127.0.0.1' ||
+    self.location.hostname.endsWith('.test');
+
+  if (isDev) {
+    workbox.routing.registerRoute(
+      ({ url, request }) => url.origin === self.location.origin && (request.destination === 'script' || request.destination === 'style'),
+      new workbox.strategies.NetworkOnly()
+    );
+  } else {
+    workbox.routing.registerRoute(
+      ({ url, request }) => url.origin === self.location.origin && (request.destination === 'script' || request.destination === 'style'),
+      new workbox.strategies.NetworkFirst({
+        cacheName: CODE_CACHE,
+        networkTimeoutSeconds: 4,
+        plugins: [
+          new workbox.expiration.ExpirationPlugin({
+            maxEntries: 80,
+            maxAgeSeconds: 7 * 24 * 60 * 60,
+          }),
+        ],
+      })
+    );
+  }
+
+  // 4. Media, fonts, and images (StaleWhileRevalidate)
+  workbox.routing.registerRoute(
+    ({ request }) => ['style', 'script', 'font', 'image'].includes(request.destination),
+    new workbox.strategies.StaleWhileRevalidate({
+      cacheName: MEDIA_CACHE,
+      plugins: [
+        new workbox.expiration.ExpirationPlugin({
+          maxEntries: 120,
+          maxAgeSeconds: 30 * 24 * 60 * 60,
+        }),
+      ],
+    })
+  );
+
+  // 5. Precache Offline Shell
+  workbox.precaching.precacheAndRoute([
+    { url: OFFLINE_HTML, revision: '1' }
+  ]);
+}
+
+// Push Notifications & Badging Engine
+self.addEventListener('push', (event) => {
+  let data = {
+    title: APP_NAME,
+    body: 'You have a new update!',
+    icon: '/public/resources/assets/images/pwa/icons/icon-192x192.png',
+    badge: '/public/resources/assets/images/pwa/icons/icon-72x72.png',
+    url: '/',
+    tag: `${APP_NAME}-notification`
+  };
+
+  if (event.data) {
+    try {
+      data = { ...data, ...event.data.json() };
+    } catch (e) {
+      data.body = event.data.text();
+    }
+  }
+
+  const promises = [];
+
+  // 1. Show System Notification Banner
+  promises.push(
+    self.registration.showNotification(data.title, {
+      body: data.body,
+      icon: data.icon,
+      badge: data.badge,
+      data: { url: data.url, id: data.targetNotificationId },
+      tag: data.tag
+    })
+  );
+
+  // 2. Web Badging API Sync (Phone App Icon Red Counter)
+  if ('setAppBadge' in navigator) {
+    let count = null;
+    if (typeof data.badgeCount === 'number') {
+      count = Math.max(0, Math.floor(data.badgeCount));
+    } else if (data.badgeCount !== null && data.badgeCount !== undefined && !isNaN(parseInt(data.badgeCount, 10))) {
+      count = Math.max(0, parseInt(data.badgeCount, 10));
+    }
+
+    if (count !== null) {
+      promises.push(
+        count > 0 
+          ? navigator.setAppBadge(count).catch(() => {}) 
+          : navigator.clearAppBadge().catch(() => {})
+      );
+    } else {
+      // Fallback: When an active push notification arrives, ensure at least 1 badge is set on the app icon
+      promises.push(navigator.setAppBadge(1).catch(() => {}));
+    }
+  }
+
+  // 3. Notify any active client windows so in-app bell counter updates immediately
+  promises.push(
+    clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
+      clientList.forEach((client) => {
+        client.postMessage({
+          type: 'ON_APP_NOTIFICATION',
+          payload: data
+        });
+      });
+    }).catch(() => {})
+  );
+
+  event.waitUntil(Promise.all(promises));
+});
+
+// Notification Click & Deep-Linking
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  const targetUrl = event.notification.data?.url || '/';
+
+  const promises = [];
+
+  if ('clearAppBadge' in navigator) {
+    promises.push(navigator.clearAppBadge().catch(() => {}));
+  }
+
+  promises.push(
+    clients.matchAll({ type: 'window', includeUncontrolled: true }).then((list) => {
+      for (const client of list) {
+        if (client.url.includes(targetUrl) && 'focus' in client) {
+          if ('navigate' in client) client.navigate(targetUrl);
+          return client.focus();
+        }
+      }
+      if (clients.openWindow) return clients.openWindow(targetUrl);
+    })
+  );
+
+  event.waitUntil(Promise.all(promises));
+});
+
+// Cross-Tab Client Messages
+self.addEventListener('message', (event) => {
+  if (event.data?.action === 'skipWaiting') self.skipWaiting();
+  if (event.data?.action === 'clearUserCache') event.waitUntil(caches.delete(API_CACHE));
+});