feat(web): immich as webapp, add apple icons and manifest file (immic…

…h-app#2310)

* add apple specific icons
so it can be added to homescreen

* remove jpg icons

* change background color to white

---------

Co-authored-by: faupau03 <[email protected]>

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

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import appleIcon180 from '$lib/assets/apple/apple-icon-180.png';
+	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-icon" href={appleIcon180} />
+<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

@@ -13,6 +13,7 @@
 	import { fileUploadHandler } from '$lib/utils/file-uploader';
 	import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
 	import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
+	import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
 
 	let showNavigationLoadingBar = false;
 	export let data: LayoutData;
@@ -42,6 +43,9 @@
 <svelte:head>
 	<title>{$page.data.meta?.title || 'Web'} - Immich</title>
 	<link rel="icon" href={faviconUrl} />
+	<link rel="manifest" href="/manifest.json" />
+	<meta name="theme-color" content="currentColor" />
+	<AppleHeader />
 
 	{#if $page.data.meta}
 		<meta name="description" content={$page.data.meta.description} />

web/static/manifest.json

@@ -0,0 +1,35 @@
+{
+	"name": "Immich",
+	"short_name": "Immich",
+	"start_url": "/",
+	"display": "standalone",
+	"background_color": "#ffffff",
+	"icons": [
+		{
+			"src": "manifest-icon-192.maskable.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"purpose": "any"
+		},
+		{
+			"src": "manifest-icon-192.maskable.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"purpose": "maskable"
+		},
+		{
+			"src": "manifest-icon-512.maskable.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "any"
+		},
+		{
+			"src": "manifest-icon-512.maskable.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "maskable"
+		}
+	],
+	"description": "Self-hosted photo and video backup solution directly from your mobile phone.",
+	"lang": "en"
+}