ytplayer/frontend/sw-update.js

/* ============================================================================
 * sw-update — makes "Refresh UI" actually land the new build.
 *
 * Framework-free and dependency-free on purpose (same pattern as
 * async-guard.js):
 *   • Loads as a plain <script> under CSP `script-src 'self'` (browser
 *     global `window.SwUpdate`).
 *   • `require`-able by `node --test` (CommonJS `module.exports`).
 *
 * History: the "Update available keeps showing" loop was patched three times
 * by chasing individual triggers (a transient `reg.waiting`, the activate
 * broadcast, the buildTag poll firing before a worker was waiting). It kept
 * coming back on the real deployment because the homelab link is slow and
 * drops requests: the new worker's install (`cache.addAll`, all-or-nothing)
 * failed, "Refresh UI" reloaded into the OLD cached shell, and the next
 * successful install re-opened the banner — sometimes on a page that was
 * already current (a failed install leaves a partial cache that the
 * activate handler then mistook for a previous deploy).
 *
 * The fix no longer depends on the service-worker install lifecycle:
 *   1. refreshShellInPlace() downloads a fresh copy of every file the shell
 *      caches hold (cache-busted, so even an old worker's cache-first
 *      handler can't answer with the stale copy) — ALL of them or nothing —
 *      and writes them into every versioned shell cache. Whichever worker
 *      serves the next load, it serves the new build.
 *   2. Only then is a waiting worker (if any) activated, and the page
 *      reloaded once.
 * The banner itself only opens when the build the page is running differs
 * from the server's (see app.js maybeShowUpdateBanner), so no lifecycle
 * event can re-open it once the page is current.
 * ========================================================================== */
(function (root) {
  'use strict';

  const BUST_PARAM = '__ytpfresh';

  function withTimeout(promise, ms, setTimeoutFn, label) {
    if (!ms || !setTimeoutFn) return promise;
    return Promise.race([
      promise,
      new Promise((_, reject) => setTimeoutFn(() => reject(new Error(label || 'timed out')), ms)),
    ]);
  }

  /**
   * Re-downloads every file held by the versioned shell caches and replaces
   * the cached copies. All-or-nothing: if any download fails, nothing is
   * written and it throws, so a flaky connection can never leave a
   * half-old/half-new shell.
   *
   * @param {object} opts
   * @param {CacheStorage} opts.cachesApi
   * @param {(url: string, init: object) => Promise<Response>} opts.fetchFn
   * @param {(name: string) => boolean} opts.isShellCache
   * @param {string} [opts.bust]      cache-busting token
   * @param {number} [opts.timeoutMs] overall download budget
   * @param {number} [opts.attempts]  tries per file (default 3)
   * @param {number} [opts.attemptTimeoutMs] bound on a single try
   * @param {Function} [opts.setTimeout]
   * @returns {Promise<{refreshed: number, caches: number}>}
   */
  async function refreshShellInPlace({ cachesApi, fetchFn, isShellCache, bust, timeoutMs, attempts, attemptTimeoutMs, setTimeout: setTimeoutFn }) {
    const names = (await cachesApi.keys()).filter(isShellCache);
    if (!names.length) return { refreshed: 0, caches: 0 }; // uncontrolled page: a reload already hits the network

    const urls = new Set();
    for (const name of names) {
      const cache = await cachesApi.open(name);
      for (const req of await cache.keys()) {
        const u = new URL(req.url);
        if (u.searchParams.has(BUST_PARAM)) { await cache.delete(req); continue; } // leftovers of a failed try
        urls.add(u.href);
      }
    }

    const token = bust || String(Date.now());
    // Each file gets a few attempts (the homelab link drops requests), each
    // bounded so one hung connection can't eat the whole budget.
    const fetchOne = async (url) => {
      let last = null;
      for (let attempt = 0; attempt < (attempts || 3); attempt++) {
        const u = new URL(url);
        u.searchParams.set(BUST_PARAM, token + '-' + attempt);
        const ctl = typeof AbortController !== 'undefined' ? new AbortController() : null;
        try {
          const res = await withTimeout(
            fetchFn(u.href, { cache: 'reload', credentials: 'same-origin', signal: ctl ? ctl.signal : undefined }),
            attemptTimeoutMs, setTimeoutFn, `${new URL(url).pathname} timed out`);
          if (res && res.ok) return [url, res];
          last = new Error(`${new URL(url).pathname} → ${res ? res.status : 'no response'}`);
        } catch (err) {
          if (ctl) { try { ctl.abort(); } catch { /* already done */ } }
          last = err;
        }
      }
      throw last;
    };
    const fetched = await withTimeout(Promise.all([...urls].map(fetchOne)),
      timeoutMs, setTimeoutFn, 'update download timed out');

    for (const name of names) {
      const cache = await cachesApi.open(name);
      for (const [url, res] of fetched) await cache.put(url, res.clone());
      // An old worker's cache-first handler may have stored the busted URLs.
      for (const req of await cache.keys()) {
        if (new URL(req.url).searchParams.has(BUST_PARAM)) await cache.delete(req);
      }
    }
    return { refreshed: fetched.length, caches: names.length };
  }

  /**
   * Applies an update: refresh the shell in place (throws on failure — the
   * caller reports it and nothing reloads), then activate a waiting worker if
   * there is one, then reload exactly once.
   *
   * @param {object} opts
   * @param {ServiceWorkerRegistration|null} opts.reg
   * @param {ServiceWorkerContainer} opts.container
   * @param {() => void} opts.reload                    called at most once
   * @param {() => Promise<any>} [opts.refreshShell]    refreshShellInPlace bound to real APIs
   * @param {Function} [opts.setTimeout]                injectable for tests
   * @returns {Promise<void>}
   */
  async function applyUpdate({ reg, container, reload, refreshShell, setTimeout: setTimeoutFn }) {
    const scheduleTimeout = setTimeoutFn || (typeof setTimeout !== 'undefined' ? setTimeout : null);

    if (refreshShell) await refreshShell();

    const waiting = reg && reg.waiting;
    if (!waiting) {
      reload();
      return;
    }

    let reloaded = false;
    const reloadOnce = () => {
      if (reloaded) return;
      reloaded = true;
      reload();
    };
    // The waiting worker's cache was refreshed too, so activating it is safe
    // either way; reload on controllerchange, or after a short safety net.
    container.addEventListener('controllerchange', reloadOnce, { once: true });
    if (scheduleTimeout) scheduleTimeout(reloadOnce, 4000);
    waiting.postMessage({ type: 'SKIP_WAITING' });
  }

  const SwUpdate = { applyUpdate, refreshShellInPlace, BUST_PARAM };

  if (typeof module !== 'undefined' && module.exports) {
    module.exports = SwUpdate;
  } else {
    root.SwUpdate = SwUpdate;
  }
})(typeof globalThis !== 'undefined' ? globalThis : this);