chore: update PWA support (#26491)

web/src/lib/components/shared-components/apple-header.svelte

@@ -1,184 +0,0 @@
-<script lang="ts">
-  import appleSplash20482732 from '$lib/assets/apple/apple-splash-2048-2732.png';
-  import appleSplash27322048 from '$lib/assets/apple/apple-splash-2732-2048.png';
-  import appleSplash16682388 from '$lib/assets/apple/apple-splash-1668-2388.png';
-  import appleSplash23881668 from '$lib/assets/apple/apple-splash-2388-1668.png';
-  import appleSplash15362048 from '$lib/assets/apple/apple-splash-1536-2048.png';
-  import appleSplash20481536 from '$lib/assets/apple/apple-splash-2048-1536.png';
-  import appleSplash16682224 from '$lib/assets/apple/apple-splash-1668-2224.png';
-  import appleSplash22241668 from '$lib/assets/apple/apple-splash-2224-1668.png';
-  import appleSplash16202160 from '$lib/assets/apple/apple-splash-1620-2160.png';
-  import appleSplash21601620 from '$lib/assets/apple/apple-splash-2160-1620.png';
-  import appleSplash12902796 from '$lib/assets/apple/apple-splash-1290-2796.png';
-  import appleSplash27961290 from '$lib/assets/apple/apple-splash-2796-1290.png';
-  import appleSplash11792556 from '$lib/assets/apple/apple-splash-1179-2556.png';
-  import appleSplash25561179 from '$lib/assets/apple/apple-splash-2556-1179.png';
-  import appleSplash12842778 from '$lib/assets/apple/apple-splash-1284-2778.png';
-  import appleSplash27781284 from '$lib/assets/apple/apple-splash-2778-1284.png';
-  import appleSplash11702532 from '$lib/assets/apple/apple-splash-1170-2532.png';
-  import appleSplash25321170 from '$lib/assets/apple/apple-splash-2532-1170.png';
-  import appleSplash11252436 from '$lib/assets/apple/apple-splash-1125-2436.png';
-  import appleSplash24361125 from '$lib/assets/apple/apple-splash-2436-1125.png';
-  import appleSplash12422688 from '$lib/assets/apple/apple-splash-1242-2688.png';
-  import appleSplash26881242 from '$lib/assets/apple/apple-splash-2688-1242.png';
-  import appleSplash8281792 from '$lib/assets/apple/apple-splash-828-1792.png';
-  import appleSplash1792828 from '$lib/assets/apple/apple-splash-1792-828.png';
-  import appleSplash12422208 from '$lib/assets/apple/apple-splash-1242-2208.png';
-  import appleSplash22081242 from '$lib/assets/apple/apple-splash-2208-1242.png';
-  import appleSplash7501334 from '$lib/assets/apple/apple-splash-750-1334.png';
-  import appleSplash1334750 from '$lib/assets/apple/apple-splash-1334-750.png';
-  import appleSplash6401136 from '$lib/assets/apple/apple-splash-640-1136.png';
-  import appleSplash1136640 from '$lib/assets/apple/apple-splash-1136-640.png';
-</script>
-
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash20482732}
-  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash27322048}
-  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash16682388}
-  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash23881668}
-  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash15362048}
-  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash20481536}
-  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash16682224}
-  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash22241668}
-  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash16202160}
-  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash21601620}
-  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash12902796}
-  media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash27961290}
-  media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-/>
-
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash11792556}
-  media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash25561179}
-  media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash12842778}
-  media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash27781284}
-  media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash11702532}
-  media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash25321170}
-  media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash11252436}
-  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash24361125}
-  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash12422688}
-  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash26881242}
-  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash8281792}
-  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash1792828}
-  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash12422208}
-  media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash22081242}
-  media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash7501334}
-  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash1334750}
-  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash6401136}
-  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-/>
-<link
-  rel="apple-touch-startup-image"
-  href={appleSplash1136640}
-  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-/>

web/src/routes/+layout.svelte

@@ -4,7 +4,6 @@
   import { shortcut } from '$lib/actions/shortcut';
   import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
   import ErrorLayout from '$lib/components/layouts/ErrorLayout.svelte';
-  import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
   import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
   import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
   import VersionAnnouncement from '$lib/components/VersionAnnouncement.svelte';
@@ -189,8 +188,8 @@
 <svelte:head>
   <title>{page.data.meta?.title || 'Web'} - Immich</title>
   <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
-  <meta name="theme-color" content="currentColor" />
-  <AppleHeader />
+  <meta name="theme-color" content="white" media="(prefers-color-scheme: light)" />
+  <meta name="theme-color" content="black" media="(prefers-color-scheme: dark)" />
 
   {#if page.data.meta}
     <meta name="description" content={page.data.meta.description} />

web/static/manifest.json

@@ -1,6 +1,7 @@
 {
   "background_color": "#ffffff",
   "description": "Self-hosted photo and video backup solution directly from your mobile phone.",
+  "dir": "auto",
   "display": "standalone",
   "icons": [
     {
@@ -9,12 +10,6 @@
       "src": "manifest-icon-192.maskable.png",
       "type": "image/png"
     },
-    {
-      "purpose": "maskable",
-      "sizes": "192x192",
-      "src": "manifest-icon-192.maskable.png",
-      "type": "image/png"
-    },
     {
       "purpose": "any",
       "sizes": "512x512",
@@ -31,5 +26,19 @@
   "lang": "en",
   "name": "Immich",
   "short_name": "Immich",
+  "shortcuts": [
+    {
+      "name": "Photos",
+      "url": "/photos"
+    },
+    {
+      "name": "Albums",
+      "url": "/albums"
+    },
+    {
+      "name": "Map",
+      "url": "/map"
+    }
+  ],
   "start_url": "/"
 }