Add PWA support with localized manifest and splash screen

app/layout.tsx

@@ -31,6 +31,7 @@ export const viewport: Viewport = {
     maximumScale: 1,
     userScalable: false,
     viewportFit: "cover",
+    interactiveWidget: "resizes-content",
     themeColor: [
         { media: "(prefers-color-scheme: dark)", color: "#000000" },
         { media: "(prefers-color-scheme: light)", color: "#F5F5F7" },
@@ -61,6 +62,74 @@ export const metadata: Metadata = {
         capable: true,
         title: "ReelMark",
         statusBarStyle: "black-translucent",
+        startupImage: [
+            // iPhone SE 1st gen / iPod touch 5th gen — 320×568 @2x
+            { url: '/splash/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png', media: '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
+            { url: '/splash/4__iPhone_SE__iPod_touch_5th_generation_and_later_landscape.png', media: '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
+            // iPhone 6/6s/7/8/SE 2nd-3rd gen (4.7") — 375×667 @2x
+            { url: '/splash/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png', media: '(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
+            { url: '/splash/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_landscape.png', media: '(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
+            // iPhone 6s Plus/7 Plus/8 Plus — 414×736 @3x
+            { url: '/splash/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png', media: '(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
+            { url: '/splash/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_landscape.png', media: '(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
+            // iPhone 11/XR — 414×896 @2x
+            { url: '/splash/iPhone_11__iPhone_XR_portrait.png', media: '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
+            { url: '/splash/iPhone_11__iPhone_XR_landscape.png', media: '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
+            // iPhone X/XS/11 Pro/12 mini/13 mini — 375×812 @3x
+            { url: '/splash/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png', media: '(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
+            { url: '/splash/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_landscape.png', media: '(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
+            // iPhone 12/12 Pro/13/13 Pro/14/16e/17e — 390×844 @3x
+            { url: '/splash/iPhone_17e__iPhone_16e__iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png', media: '(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
+            { url: '/splash/iPhone_17e__iPhone_16e__iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_landscape.png', media: '(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
+            // iPhone 14 Pro/15/15 Pro/16/16 Pro — 393×852 @3x
+            { url: '/splash/iPhone_16__iPhone_15_Pro__iPhone_15__iPhone_14_Pro_portrait.png', media: '(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
+            { url: '/splash/iPhone_16__iPhone_15_Pro__iPhone_15__iPhone_14_Pro_landscape.png', media: '(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
+            // iPhone 16 Pro/17/17 Pro — 402×874 @3x
+            { url: '/splash/iPhone_17_Pro__iPhone_17__iPhone_16_Pro_portrait.png', media: '(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
+            { url: '/splash/iPhone_17_Pro__iPhone_17__iPhone_16_Pro_landscape.png', media: '(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
+            // iPhone XS Max/11 Pro Max — 414×896 @3x
+            { url: '/splash/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png', media: '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
+            { url: '/splash/iPhone_11_Pro_Max__iPhone_XS_Max_landscape.png', media: '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
+            // iPhone Air — 420×912 @3x
+            { url: '/splash/iPhone_Air_portrait.png', media: '(device-width: 420px) and (device-height: 912px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
+            { url: '/splash/iPhone_Air_landscape.png', media: '(device-width: 420px) and (device-height: 912px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
+            // iPhone 12 Pro Max/13 Pro Max/14 Plus — 428×926 @3x
+            { url: '/splash/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png', media: '(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
+            { url: '/splash/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_landscape.png', media: '(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
+            // iPhone 14 Pro Max/15 Plus/15 Pro Max/16 Plus — 430×932 @3x
+            { url: '/splash/iPhone_16_Plus__iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_portrait.png', media: '(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
+            { url: '/splash/iPhone_16_Plus__iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png', media: '(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
+            // iPhone 16 Pro Max/17 Pro Max — 440×956 @3x
+            { url: '/splash/iPhone_17_Pro_Max__iPhone_16_Pro_Max_portrait.png', media: '(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
+            { url: '/splash/iPhone_17_Pro_Max__iPhone_16_Pro_Max_landscape.png', media: '(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
+            // iPad mini 8.3" — 744×1133 @2x
+            { url: '/splash/8.3__iPad_Mini_portrait.png', media: '(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
+            { url: '/splash/8.3__iPad_Mini_landscape.png', media: '(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
+            // iPad 9.7" / iPad mini / iPad Air — 768×1024 @2x
+            { url: '/splash/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png', media: '(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
+            { url: '/splash/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_landscape.png', media: '(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
+            // iPad 10.2" — 810×1080 @2x
+            { url: '/splash/10.2__iPad_portrait.png', media: '(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
+            { url: '/splash/10.2__iPad_landscape.png', media: '(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
+            // iPad Air 10.5" — 834×1112 @2x
+            { url: '/splash/10.5__iPad_Air_portrait.png', media: '(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
+            { url: '/splash/10.5__iPad_Air_landscape.png', media: '(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
+            // iPad Air 10.9" — 820×1180 @2x
+            { url: '/splash/10.9__iPad_Air_portrait.png', media: '(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
+            { url: '/splash/10.9__iPad_Air_landscape.png', media: '(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
+            // iPad Pro 11" / iPad Pro 10.5" — 834×1194 @2x
+            { url: '/splash/11__iPad_Pro__10.5__iPad_Pro_portrait.png', media: '(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
+            { url: '/splash/11__iPad_Pro__10.5__iPad_Pro_landscape.png', media: '(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
+            // iPad Pro M4 11" — 834×1210 @2x
+            { url: '/splash/11__iPad_Pro_M4_portrait.png', media: '(device-width: 834px) and (device-height: 1210px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
+            { url: '/splash/11__iPad_Pro_M4_landscape.png', media: '(device-width: 834px) and (device-height: 1210px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
+            // iPad Pro 12.9" — 1024×1366 @2x
+            { url: '/splash/12.9__iPad_Pro_portrait.png', media: '(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
+            { url: '/splash/12.9__iPad_Pro_landscape.png', media: '(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
+            // iPad Pro M4 13" — 1032×1376 @2x
+            { url: '/splash/13__iPad_Pro_M4_portrait.png', media: '(device-width: 1032px) and (device-height: 1376px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
+            { url: '/splash/13__iPad_Pro_M4_landscape.png', media: '(device-width: 1032px) and (device-height: 1376px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
+        ],
     },
     icons: {
         icon: [

app/manifest.ts

@@ -1,15 +1,85 @@
 import type { MetadataRoute } from 'next'
 
+type LocalizedValue = { value: string }
+type LocalizedMap = Record<string, LocalizedValue>
+
+type LocalizedShortcut = NonNullable<MetadataRoute.Manifest['shortcuts']>[number] & {
+    name_localized?: LocalizedMap
+    short_name_localized?: LocalizedMap
+    description_localized?: LocalizedMap
+}
+
+type LocalizedManifest = Omit<MetadataRoute.Manifest, 'shortcuts'> & {
+    description_localized?: LocalizedMap
+    shortcuts?: LocalizedShortcut[]
+}
+
+const ICON_192 = [{ src: '/maskable_icon_x192.png', sizes: '192x192', type: 'image/png' as const }]
+
 export default function manifest(): MetadataRoute.Manifest {
-    return {
+    const m: LocalizedManifest = {
         name: 'ReelMark',
         short_name: 'ReelMark',
         description: 'Track and organize movies & TV shows you watched.',
+        description_localized: {
+            fr: { value: 'Suivez, organisez et découvrez tous les films et séries que vous avez regardés ou voulez regarder.' },
+        },
         start_url: '/',
         display: 'standalone',
         background_color: '#000000',
         theme_color: '#000000',
         orientation: 'portrait-primary',
+        lang: 'en',
+        dir: 'ltr',
+        categories: ['entertainment', 'lifestyle'],
+        shortcuts: [
+            {
+                name: 'My Library',
+                name_localized: { fr: { value: 'Ma bibliothèque' } },
+                short_name: 'Library',
+                short_name_localized: { fr: { value: 'Bibliothèque' } },
+                description: 'Your personal library of movies and TV shows to watch or already seen.',
+                description_localized: { fr: { value: 'Votre bibliothèque personnelle de films et séries à regarder ou déjà vus.' } },
+                url: '/library',
+                icons: ICON_192,
+            },
+            {
+                name: 'Explorer',
+                name_localized: { fr: { value: 'Explorateur' } },
+                short_name: 'Explorer',
+                short_name_localized: { fr: { value: 'Explorateur' } },
+                description: 'Discover movies and TV shows to add to your collection.',
+                description_localized: { fr: { value: 'Découvrez des films et séries à ajouter à votre collection.' } },
+                url: '/explorer',
+                icons: ICON_192,
+            },
+            {
+                name: 'Dashboard',
+                name_localized: { fr: { value: 'Tableau de bord' } },
+                short_name: 'Dashboard',
+                short_name_localized: { fr: { value: 'Tableau' } },
+                description: 'Access your personal dashboard with recommendations and watch history.',
+                description_localized: { fr: { value: 'Accédez à votre tableau de bord personnel avec vos recommandations et votre historique de visionnage.' } },
+                url: '/dashboard',
+                icons: ICON_192,
+            },
+        ],
+        screenshots: [
+            {
+                src: '/screenshots/screenshot-mobile-1.png',
+                sizes: '390x844',
+                type: 'image/png',
+                form_factor: 'narrow',
+                label: 'Home page',
+            },
+            {
+                src: '/screenshots/screenshot-mobile-2.png',
+                sizes: '390x844',
+                type: 'image/png',
+                form_factor: 'narrow',
+                label: 'Your library',
+            },
+        ],
         icons: [
             { src: '/maskable_icon_x48.png', sizes: '48x48', type: 'image/png' },
             { src: '/maskable_icon_x72.png', sizes: '72x72', type: 'image/png' },
@@ -18,6 +88,9 @@ export default function manifest(): MetadataRoute.Manifest {
             { src: '/maskable_icon_x192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
             { src: '/maskable_icon_x384.png', sizes: '384x384', type: 'image/png' },
             { src: '/maskable_icon_x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
+            { src: '/maskable_icon_mono.png', sizes: '2000x2000', type: 'image/png', purpose: 'monochrome' },
         ],
     }
+
+    return m as MetadataRoute.Manifest
 }