web: make the studio installable, and give it a shell that opens offline
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
This commit is contained in:
@@ -6,6 +6,16 @@
|
||||
<meta name="theme-color" content="#0a0a0a" />
|
||||
<link rel="icon" type="image/png" href="/assets/RecipesCamIcon.png" />
|
||||
<link rel="apple-touch-icon" href="/assets/RecipesCamIcon.png" />
|
||||
<!-- The installed app. The manifest is a static file in public/ (see
|
||||
public/manifest.json and scripts/make-icons.mjs for its icons), so a build
|
||||
needs no plugin to ship it. iOS ignores most of the manifest and reads these
|
||||
three metas instead: 'capable' is what makes a home-screen bookmark open
|
||||
without Safari's chrome, 'black-translucent' gives it the app's black bars,
|
||||
and 'title' is the name under the icon. -->
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="apple-mobile-web-app-title" content="RecipesCam" />
|
||||
<title>RecipesCam — web</title>
|
||||
<meta name="description" content="RecipesCam web — grade photos with the same film recipes as the app." />
|
||||
<link rel="canonical" href="/" />
|
||||
|
||||
Reference in New Issue
Block a user