3dtours
0f2e109aa2
The three things a browser asks for, without a plugin: a manifest in
public/ (name, /app as the start, three icons cut from the one piece of
art this repo has), a service worker, and the two metas iOS reads
instead of the manifest.
The worker caches the shell — /, /app, /library, all one document under
the SPA fallback — and the hashed assets the build emits. A navigation
is network-first, so a deploy is never pinned behind the cache; a
hashed asset or the wasm is cache-first, because under a given build
those never change. /api and any non-GET go straight out: a worker is a
cache, not a proxy. nginx serves sw.js and manifest.json `no-cache`
(both names outlive their contents) with the isolation headers the
worker script needs under COEP.
The offer is the app's own dialog, not Chromium's mini-infobar: the
event is held, and it is spent either after the visitor has been in the
studio two minutes or the moment an export lands — the point at which
the app has done their work. Safari never fires the event, so it gets
the Share > Add to Home Screen line instead. A refusal is remembered and
never asked again.
node scripts/make-icons.mjs 192x192 39785B / 512x512 159296B / maskable 512x512 123723B
node scripts/pwa-check.mjs manifest 3 icons · worker activated · shell cached
· offline reload of /app paints
off (https://localhost:8090) same four, through nginx
87 lines
3.8 KiB
JavaScript
87 lines
3.8 KiB
JavaScript
// Install support is not visible in the source. It is the manifest the browser
|
|
// reads, the worker it registers, and what that worker still holds once the network
|
|
// is gone — so unlike the other checks here, which read a module and assert on it,
|
|
// this one has to drive a real browser at a real build. Four assertions, one line
|
|
// each, against a preview server:
|
|
//
|
|
// npx vite build && npx vite preview --port 4183 &
|
|
// node scripts/pwa-check.mjs
|
|
//
|
|
// The browser is Playwright's own, installed by whoever runs this — there is no
|
|
// test runner in this repo, and software GL is what the studio needs to paint at
|
|
// all. PLAYWRIGHT_CORE points at another copy, CHROME at another browser.
|
|
const BASE = process.argv[2] ?? 'http://localhost:4183';
|
|
const playwright = await import(process.env.PLAYWRIGHT_CORE ?? 'playwright-core').catch(() => null);
|
|
if (!playwright) {
|
|
console.log('SKIP playwright-core is not installed — pass PLAYWRIGHT_CORE=<path to its index.mjs>');
|
|
process.exit(0);
|
|
}
|
|
const { chromium } = playwright;
|
|
|
|
const browser = await chromium.launch({
|
|
// Playwright's own Chromium when it has one; CHROME points at any other.
|
|
executablePath: process.env.CHROME || undefined,
|
|
args: ['--no-sandbox', '--enable-unsafe-swiftshader', '--use-gl=angle', '--use-angle=swiftshader'],
|
|
});
|
|
const context = await browser.newContext();
|
|
|
|
// Every assertion prints, rather than throwing on the first one: which of the four
|
|
// works and which does not is the whole answer.
|
|
let failed = 0;
|
|
const check = (ok, label) => {
|
|
console.log(`${ok ? 'ok ' : 'FAIL'} ${label}`);
|
|
if (!ok) failed++;
|
|
};
|
|
|
|
const page = await context.newPage();
|
|
await page.goto(`${BASE}/app`);
|
|
|
|
// (a) The manifest, as the browser fetches it before it offers anything.
|
|
const manifest = await page.evaluate(async () => await (await fetch('/manifest.json')).json());
|
|
check(Array.isArray(manifest.icons) && manifest.icons.length === 3, `/manifest.json parses with ${manifest.icons?.length} icons`);
|
|
|
|
// (b) The worker registration main.tsx makes on load. `ready` only ever resolves
|
|
// with a registration that has an `active` worker; that worker's own state string
|
|
// is 'activated' (the ServiceWorkerState enum has no 'active' in it).
|
|
const registration = await page.evaluate(async () => {
|
|
const reg = await navigator.serviceWorker.ready;
|
|
return { scope: reg.scope, state: reg.active?.state ?? null };
|
|
});
|
|
check(registration.state === 'activated', `serviceWorker.ready resolves — scope ${registration.scope}, active.state '${registration.state}'`);
|
|
|
|
// (c) What it put away. Read after a reload, because the first load is the one that
|
|
// installs it and the reload is the first one it is in control of.
|
|
await page.waitForFunction(async () => (await caches.match(new URL('/app', location.origin).href)) !== undefined);
|
|
await page.reload();
|
|
const cached = await page.evaluate(async () => {
|
|
const out = {};
|
|
for (const name of await caches.keys()) {
|
|
out[name] = (await (await caches.open(name)).keys()).map((r) => new URL(r.url).pathname);
|
|
}
|
|
return out;
|
|
});
|
|
const names = Object.keys(cached);
|
|
const urls = Object.values(cached).flat().sort();
|
|
check(
|
|
urls.includes('/') && urls.includes('/app') && urls.some((u) => /^\/assets\/index-/.test(u)),
|
|
`worker cache ${names.join(', ')} after reload: ${urls.join(' ')}`,
|
|
);
|
|
|
|
// (d) The point of all of it: the network gone, the shell still paints.
|
|
await context.setOffline(true);
|
|
let brand = 'nothing';
|
|
try {
|
|
await page.reload();
|
|
brand = await page.evaluate(() => document.querySelector('header.header .brand')?.textContent ?? null);
|
|
} catch (err) {
|
|
brand = `reload failed: ${err.message.split('\n')[0]}`;
|
|
}
|
|
check(/RecipesCam/.test(brand ?? ''), `offline reload of /app paints the app's own header: ${brand}`);
|
|
|
|
await browser.close();
|
|
if (failed) {
|
|
console.error(`pwa-check: ${failed} of 4 failed`);
|
|
process.exit(1);
|
|
}
|
|
console.log('pwa-check ok');
|