diff --git a/docs/manual-verification.md b/docs/manual-verification.md index dd80bf0..01c05c8 100644 --- a/docs/manual-verification.md +++ b/docs/manual-verification.md @@ -16,8 +16,9 @@ - [ ] Android adaptive icon (maskable) fills the OS shape without clipping the mark. - [ ] Service-worker update flow: ship a new build, reload — the update-available prompt appears and applying it loads the new version (`registerType: 'prompt'`). -- [ ] iOS home-screen icon — **known residual**: the manifest ships SVG only; iOS - wants a PNG `apple-touch-icon`, so the iOS home-screen icon may fall back. +- [ ] iPad add-to-home-screen (Safari → Share → Add to Home Screen) shows the astrolabe + `apple-touch-icon.png`, not a page screenshot or generic glyph. Phones are out of + scope — iPad is the only touch surface Astrolabe targets. ## Keyboard & accessibility diff --git a/index.html b/index.html index 0541810..2ca84bb 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Astrolabe diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..9e20364 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/vite.config.ts b/vite.config.ts index d4dda62..d742af1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -35,7 +35,7 @@ export default defineConfig({ react(), VitePWA({ registerType: 'prompt', - includeAssets: ['favicon.svg', 'icon-maskable.svg', 'icon-mono.svg'], + includeAssets: ['favicon.svg', 'icon-maskable.svg', 'icon-mono.svg', 'apple-touch-icon.png'], manifest: { name: 'Astrolabe', short_name: 'Astrolabe', @@ -47,12 +47,18 @@ export default defineConfig({ background_color: '#ffffff', display: 'standalone', // SVG marks scale to any size — Chrome/Edge/desktop install accept SVG - // icons. (iOS home-screen still prefers a PNG apple-touch-icon; tracked as - // a known residual.) maskable = Android adaptive; monochrome = tinted mark. + // icons. maskable = Android adaptive; monochrome = tinted mark. Safari + // ignores SVG and the manifest both, so the 180×180 PNG covers the one + // touch surface we target — iPad add-to-home-screen (Astrolabe is a + // desktop/tablet tool, not a phone app). It's linked as + // in index.html, where Safari reads it; the + // PNG is the favicon art rasterized full-bleed (no self-rounding — iOS + // masks its own corners). icons: [ { src: 'favicon.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any' }, { src: 'icon-maskable.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'maskable' }, { src: 'icon-mono.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'monochrome' }, + { src: 'apple-touch-icon.png', sizes: '180x180', type: 'image/png', purpose: 'any' }, ], }, workbox: {