Merge pull request #304 from skaro13/master

Fixed Progressive Web App for Android and iOS

src/index.html

@@ -20,7 +20,46 @@
     <meta property="fb:app_id" content="1618309211750238">
     <link rel="apple-touch-icon" sizes="180x180" href="touchicon.png">
 
-    <!--<link rel="apple-touch-startup-image" href="css/images/iossplash.png">-->
+    <!-------------------- iPhone 5 ------------------->
+    <link href="splashscreens/iphone5_splash.png" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="splashscreens/iphone5_splash_l.png" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!------------- iPhone 6, 6S, 7 and 8 ------------->
+    <link href="splashscreens/iphone6_splash.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="splashscreens/iphone6_splash_l.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!------------- iPhone 6+, 7+ and 8+ -------------->
+    <link href="splashscreens/iphoneplus_splash.png" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="splashscreens/iphoneplus_splash_l.png" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!------------------- iPhone X -------------------->
+    <link href="splashscreens/iphonex_splash.png" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="splashscreens/iphonex_splash_l.png" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!------------------- iPhone Xr ------------------->
+    <link href="splashscreens/iphonexr_splash.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="splashscreens/iphonexr_splash_l.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!------------------- iPhone Xs ------------------->
+    <link href="splashscreens/iphonexsmax_splash.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="splashscreens/iphonexsmax_splashl.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!--------------------- iPad ---------------------->
+    <link href="splashscreens/ipad_splash.png" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="splashscreens/ipad_splash_l.png" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!------------------ iPad Pro 1 ------------------->
+    <link href="splashscreens/ipadpro1_splash.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="splashscreens/ipadpro1_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+    
+    <!------------------ iPad Pro 3 ------------------->
+    <link href="splashscreens/ipadpro3_splash.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="splashscreens/ipadpro3_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!------------------ iPad Pro 2 ------------------->
+    <link href="splashscreens/ipadpro2_splash.png" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="splashscreens/ipadpro2_splash_l.png" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
     <link rel="shortcut icon" href="favicon.ico">
     <meta name="msapplication-TileImage" content="touchicon144.png">
     <meta name="msapplication-TileColor" content="#333333">

src/manifest.json

@@ -3,10 +3,11 @@
     "name": "Jellyfin",
     "description": "Jellyfin: the Free Software Media System.",
     "lang": "en-US",
-    "display": "minimal-ui",
-    "short_name": "Emby",
+    "short_name": "Jellyfin",
     "start_url": "/web/index.html",
     "theme_color": "#101010",
+    "background_color": "#101010",
+    "display": "standalone",
     "icons": [{
             "sizes": "72x72",
             "src": "touchicon72.png",
@@ -21,6 +22,11 @@
             "sizes": "144x144",
             "src": "touchicon144.png",
             "type": "image/png"
+        },
+        {
+            "sizes": "512x512",
+            "src": "touchicon512.png",
+            "type": "image/png"
         }
     ],
     "related_applications": [{