Project-SDE-WP-Suite/html/sw.js

/* Service worker for the Work Package Suite PWA.

   Goal: let the app (and especially the field view) load and run offline. Data
   durability is already handled by the sync outbox in project-data.js — this
   worker only caches the static app shell so the pages open without a network.

   Strategy:
     • /api/* and non-GET      → never touched (pass straight to the network; offline
       reads fall back to the app's localStorage cache, writes queue in the outbox).
     • HTML / CSS / JS         → network-first, cache as fallback. These reference each
       other, so a page must never run against a stale sibling.
     • images / icons / manifest → stale-while-revalidate (instant from cache).
*/
'use strict';
// Bumped when the shell file list changes, so clients fetch the new assets
// instead of serving a half-old shell from the previous cache.
const CACHE = 'wp-suite-shell-v4';
const SHELL = [
  '/', '/index.html', '/work-package-suite.html', '/wp-creation-index.html',
  '/field.html', '/login.html', '/admin.html',
  '/theme-light.css', '/work-package-suite-styles.css', '/wp-creation-styles.css',
  '/wp-chrome.css',
  '/auth-guard.js', '/project-data.js', '/feedback-config.js', '/help.js',
  '/work-package-suite-app.js', '/wp-creation-app.js', '/field.js',
  '/wp-chrome.js', '/wp-format.js', '/login.js', '/admin.js',
  '/prime-controls-logo.jpg', '/favicon.ico',
  '/manifest.webmanifest', '/icon-192.png', '/icon-512.png',
];

self.addEventListener('install', (e) => {
  // Cache each shell asset individually so one missing file doesn't abort install.
  e.waitUntil(
    caches.open(CACHE)
      .then((c) => Promise.all(SHELL.map((u) => c.add(u).catch(() => {}))))
      .then(() => self.skipWaiting())
  );
});

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys()
      .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))
      .then(() => self.clients.claim())
  );
});

// Code (HTML / CSS / JS) is fetched NETWORK-FIRST, falling back to the cache when
// offline. Everything else (images, icons, the manifest) stays cache-first, which is
// where offline speed actually comes from.
//
// Why not cache-first for code: these files reference each other, and the cache
// stores them as independent entries. Cache-first served whichever copy of each file
// happened to be stored, so a browser could run new HTML against old CSS — which is
// exactly how the embedded creator once collapsed to a 300x150 iframe. A page must
// only ever run against the stylesheet and scripts it shipped with.
const CODE_RE = /\.(html|css|js)$|\/$/i;

self.addEventListener('fetch', (e) => {
  const req = e.request;
  if (req.method !== 'GET') return;                         // outbox owns writes
  const url = new URL(req.url);
  if (url.origin !== self.location.origin) return;          // third-party: default
  if (url.pathname.startsWith('/api/')) return;             // never cache the API

  const isCode = CODE_RE.test(url.pathname);

  if (isCode) {
    e.respondWith(
      fetch(req)
        .then((res) => {
          if (res && res.ok) {
            const copy = res.clone();
            caches.open(CACHE).then((c) => c.put(req, copy));
          }
          return res;
        })
        .catch(() => caches.match(req))                     // offline → last good copy
    );
    return;
  }

  e.respondWith(
    caches.match(req).then((cached) => {
      const network = fetch(req)
        .then((res) => {
          if (res && res.ok) {
            const copy = res.clone();
            caches.open(CACHE).then((c) => c.put(req, copy));
          }
          return res;
        })
        .catch(() => cached);                               // offline → cached copy
      return cached || network;                             // cache-first, then refresh
    })
  );
});