feat: apple-touch-startup-image and theme color

frontend/public/index.html

@@ -4,9 +4,21 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="theme-color" content="#20262e"/>
     <link rel="icon" type="image/svg+xml" href="./favicon.svg">
     <link rel="apple-touch-icon"  href="./apple-touch-icon.png">
-    <meta name="apple-mobile-web-app-capable" content="no">
+    <!-- https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/#device-screen-sizes-and-orientations -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <link href="./splash/iphone-12-pro-max.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
+    <link href="./splash/iphone-12.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
+    <link href="./splash/iphone-12-mini.png" media="(device-width: 375px) and (device-height: 812x) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
+    <link href="./splash/iphone-11-pro-max.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
+    <link href="./splash/iphone-11-pro.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
+    <link href="./splash/iphone-11.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
+    <link href="./splash/iphone-xs-max.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
+    <link href="./splash/iphone-xs.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
+    <link href="./splash/iphone-xr.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
+    <link href="./splash/iphone-x.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
     <link rel="manifest" href="./manifest.json">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

frontend/public/manifest.json

@@ -2,5 +2,6 @@
   "name": "Double Take",
   "short_name": "Double Take",
   "start_url": "/",
-  "display": "standalone"
+  "display": "standalone",
+  "theme_color": "#20262e"
 }