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>
34 lines
980 B
JavaScript
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")))
|
|
);
|
|
});
|