Fix stale/mismatched engine cache causing "ASM_CONSTS[...] is not a function" live

The service worker's engine cache key relied on a manual CACHE_VERSION
bump that was forgotten across the last two @valknar/vpinball-wasm
version bumps, so returning visitors kept getting served old cached
vpinball.js/.wasm/.data via cache-first with no revalidation — the origin
server itself was serving a correct, matching 0.3.4 set the whole time
(verified via headers/sizes against the local build).

Split CACHE_VERSION into a manually-bumped SHELL_VERSION and an
ENGINE_VERSION that copy-engine-assets.mjs now writes automatically from
the installed engine's package.json on every build, so the engine cache
always busts in lockstep with the dependency version — no step to forget.
This commit is contained in:
2026-08-24 14:42:38 +02:00
parent 89d4d9b071
commit 5423ca70f4
3 changed files with 36 additions and 14 deletions
+12 -5
View File
@@ -1,9 +1,16 @@
// Bump this on every release that changes the app shell or the vendored // Bump manually (via `pnpm sw:bump`) whenever SHELL_ASSETS or the shell's
// engine build — it's the only thing that invalidates old caches, since // caching behavior changes — nothing else invalidates the shell cache, since
// none of the cached URLs below are content-hashed by us. // none of the cached URLs below are content-hashed by us.
const CACHE_VERSION = "v2"; const SHELL_VERSION = "v2";
const SHELL_CACHE = `shell-${CACHE_VERSION}`; // Written automatically by scripts/copy-engine-assets.mjs from the installed
const ENGINE_CACHE = `engine-${CACHE_VERSION}`; // @valknar/vpinball-wasm version — do not edit by hand. Ties the engine
// cache key to the actual engine build, so a version bump always busts
// stale caches instead of relying on a human to remember a separate step
// (which is exactly how returning visitors ended up on a stale, and
// possibly internally inconsistent, engine bundle before this existed).
const ENGINE_VERSION = "0.3.4";
const SHELL_CACHE = `shell-${SHELL_VERSION}`;
const ENGINE_CACHE = `engine-${ENGINE_VERSION}`;
const SHELL_ASSETS = [ const SHELL_ASSETS = [
"/", "/",
+8 -7
View File
@@ -1,7 +1,8 @@
#!/usr/bin/env node #!/usr/bin/env node
// Bumps public/sw.js's CACHE_VERSION so a deploy invalidates old caches — // Bumps public/sw.js's SHELL_VERSION so a deploy invalidates old shell
// run this before cutting a release that changes the app shell or updates // caches — run this before cutting a release that changes SHELL_ASSETS or
// the vendored vpinball-wasm engine build. // the shell's caching behavior. (The engine cache busts itself automatically
// from the installed vpinball-wasm version — see copy-engine-assets.mjs.)
import { readFile, writeFile } from "node:fs/promises"; import { readFile, writeFile } from "node:fs/promises";
import path from "node:path"; import path from "node:path";
import { fileURLToPath } from "node:url"; import { fileURLToPath } from "node:url";
@@ -10,12 +11,12 @@ const rootDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
const swPath = path.join(rootDir, "public", "sw.js"); const swPath = path.join(rootDir, "public", "sw.js");
const contents = await readFile(swPath, "utf8"); const contents = await readFile(swPath, "utf8");
const match = contents.match(/CACHE_VERSION = "v(\d+)"/); const match = contents.match(/SHELL_VERSION = "v(\d+)"/);
if (!match) { if (!match) {
console.error(`Couldn't find CACHE_VERSION in ${swPath}`); console.error(`Couldn't find SHELL_VERSION in ${swPath}`);
process.exit(1); process.exit(1);
} }
const next = Number(match[1]) + 1; const next = Number(match[1]) + 1;
const updated = contents.replace(/CACHE_VERSION = "v\d+"/, `CACHE_VERSION = "v${next}"`); const updated = contents.replace(/SHELL_VERSION = "v\d+"/, `SHELL_VERSION = "v${next}"`);
await writeFile(swPath, updated); await writeFile(swPath, updated);
console.log(`Bumped service worker CACHE_VERSION to v${next}`); console.log(`Bumped service worker SHELL_VERSION to v${next}`);
+16 -2
View File
@@ -3,13 +3,14 @@
// so it's served as plain static files (see lib/pinball/usePinballInstance.ts for why: // so it's served as plain static files (see lib/pinball/usePinballInstance.ts for why:
// the package's own loadPinball() does a dynamic import() of its glue script that must // the package's own loadPinball() does a dynamic import() of its glue script that must
// never pass through webpack's module graph). // never pass through webpack's module graph).
import { cp, mkdir, rm } from "node:fs/promises"; import { cp, mkdir, readFile, rm, writeFile } from "node:fs/promises";
import { existsSync } from "node:fs"; import { existsSync } from "node:fs";
import path from "node:path"; import path from "node:path";
import { fileURLToPath } from "node:url"; import { fileURLToPath } from "node:url";
const rootDir = path.dirname(path.dirname(fileURLToPath(import.meta.url))); const rootDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
const pkgDistDir = path.join(rootDir, "node_modules", "@valknar", "vpinball-wasm", "dist"); const pkgDir = path.join(rootDir, "node_modules", "@valknar", "vpinball-wasm");
const pkgDistDir = path.join(pkgDir, "dist");
const targetDir = path.join(rootDir, "public", "vendor", "vpinball-wasm"); const targetDir = path.join(rootDir, "public", "vendor", "vpinball-wasm");
if (!existsSync(pkgDistDir)) { if (!existsSync(pkgDistDir)) {
@@ -24,3 +25,16 @@ await mkdir(targetDir, { recursive: true });
await cp(pkgDistDir, targetDir, { recursive: true }); await cp(pkgDistDir, targetDir, { recursive: true });
console.log(`Copied vpinball-wasm engine assets to ${path.relative(rootDir, targetDir)}/`); console.log(`Copied vpinball-wasm engine assets to ${path.relative(rootDir, targetDir)}/`);
// Keep the service worker's engine cache key in lockstep with the installed
// engine version, so a version bump always busts stale caches for returning
// visitors — see sw.js's ENGINE_VERSION comment for why this must not be a
// manual step.
const { version: engineVersion } = JSON.parse(await readFile(path.join(pkgDir, "package.json"), "utf8"));
const swPath = path.join(rootDir, "public", "sw.js");
const swContents = await readFile(swPath, "utf8");
const updatedSw = swContents.replace(/ENGINE_VERSION = "[^"]*"/, `ENGINE_VERSION = "${engineVersion}"`);
if (updatedSw !== swContents) {
await writeFile(swPath, updatedSw);
console.log(`Set sw.js ENGINE_VERSION to ${engineVersion}`);
}