Menu
I am making a PWA and I am trying to display splash screen. I was following this tutorial:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
Confirmed with this:
https://www.netguru.co/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native
and my code in my index.html is like this:
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" sizes="2048x2732" href="splash/apple_splash_2048.png"/>
<link rel="apple-touch-startup-image" sizes="1668x2224" href="splash/apple_splash_1668.png"/>
<link rel="apple-touch-startup-image" sizes="1536x2048" href="splash/apple_splash_1536.png"/>
<link rel="apple-touch-startup-image" sizes="1125x2436" href="splash/apple_splash_1125.png"/>
<link rel="apple-touch-startup-image" sizes="1242x2208" href="splash/apple_splash_1242.png"/>
<link rel="apple-touch-startup-image" sizes="750x1334" href="splash/apple_splash_750.png"/>
<link rel="apple-touch-startup-image" sizes="640x1136" href="splash/apple_splash_640.png"/>
<link rel="apple-touch-startup-image" sizes="2048x1536" href="splash/apple_splash_2048.png"/>
<link rel="apple-touch-startup-image" sizes="640x960" href="splash/apple_splash_640x960.png"/>
<link rel="apple-touch-startup-image" sizes="320x480" href="splash/apple_splash_320.png"/>
<link rel="apple-touch-startup-image" sizes="1024x768" href="splash/apple_splash_1024x768.png"/>
<link rel="apple-touch-startup-image" sizes="2208x1242" href="splash/apple_splash_2208x1242.png"/>
<link rel="apple-touch-startup-image" sizes="768x1024" href="splash/apple_splash_768x1024.png"/>
<link rel="apple-touch-startup-image" sizes="2048x1536" href="splash/apple_splash_2048x1536.png"/>
This is all in the header of main .html index file, which serves as a template for the whole app. The same way I have done my icon thing, and it works on iOS. The splash version does not (all icons are in the same directory under splash folder). What am I doing wrong?
Kind regards,
Grzegorz
545
Working answer, as of March 2020
Instead of manually specifying the individual tags to add the required splash screens and touch icons, the pwacompat package (developed by the Google Chrome team), will allow you to easily generate the required assets(splash images and touch icons) for PWA support on iOS devices.
Installation:
npm i pwacompat
This will ensure that your PWA will be supported even in non-compliant devices/browsers, without the need to manually specify the link tags on your document's <head>. More specifically, for the case of Safari, the pwacompat package will do the following:
- Sets apple-mobile-web-app-capable (opening without a browser chrome) for display modes standalone, fullscreen or minimal-ui
- Creates apple-touch-icon images, adding the manifest background to transparent icons: otherwise, iOS renders transparency as black
- Creates dynamic splash images, closely matching the splash images generated for Chromium-based browsers
You may read more about the package on their documentation.
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
