Files
bgclock/public_html/sw.js
T
hansdezwartandClaude Opus 5 b438630796 Only touch the DOM when a displayed value changes
The readout hung and then skipped numbers in a focused desktop window.
render() runs every animation frame and was writing unconditionally —
measured at 11 DOM mutations per frame — whether or not anything had
changed. Two of those are the .time text node, a glyph run up to 190px, so
every frame forced a style recalc and a full relayout to redraw digits that
turn over once a second. Routing the per-frame writes through change guards
takes a steady frame from 11 writes to 0.

The timing itself was never at fault and is untouched here. elapsed() is one
subtraction from a single monotonic performance.now() stamp and the reserve
is debited once, in tap(), so nothing accumulates per frame and a dropped
frame cannot cost or gift anyone a millisecond. Measured against wall clock
over a running turn: 0.0000ms drift across 5s, 12s and 17s segments.

Also fixes a real skip in fmt(). It switched from m:ss to tenths at
ms < 10000 with both branches rounding up, so the coarse branch read a
second high: counting down gave 0:11 for a full second, 0:10 for a single
millisecond, then 10.0. Handing 10000ms to the tenths branch gives a
monotone 0:11 -> 10.0 -> 9.9.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-11 15:40:11 +02:00

34 lines
980 B
JavaScript

/* Cache-first: once installed the clock never touches the network again. */
const CACHE = "bgclock-v7";
const FILES = [
"./",
"./index.html",
"./manifest.webmanifest",
"./icon-192.png",
"./icon-512.png",
"./icon-maskable-512.png"
];
self.addEventListener("install", (e) => {
e.waitUntil(caches.open(CACHE).then((c) => c.addAll(FILES)).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())
);
});
self.addEventListener("fetch", (e) => {
if (e.request.method !== "GET") return;
e.respondWith(
caches.match(e.request).then((hit) => hit || fetch(e.request).then((res) => {
const copy = res.clone();
caches.open(CACHE).then((c) => c.put(e.request, copy)).catch(() => {});
return res;
}).catch(() => caches.match("./index.html")))
);
});