PWA: iPad apple-touch-icon for home-screen install

This commit is contained in:
2026-06-16 23:04:17 +03:00
parent a997a862b9
commit 96a3e121eb
4 changed files with 13 additions and 5 deletions
+9 -3
View File
@@ -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
// <link rel="apple-touch-icon"> 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: {