PWA iOS Splash does not display despite following instructions

问题

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

回答1:

Right now splash screens are VERY touchy on iOS versions
I was able to make it work ONLY on iOS 11 in the xcode simulator by adding the media attribute.
I do not have a newer iOS device for testing.

Reference article I found here
https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210

Working example from that article
https://pwa-splash.now.sh

My A2HS tester (a work in progress)
https://a2hs.glitch.me/

回答2:

This issue has been solved in iOS 12.1.4! (Splash code is working in my PWA now)

The release notes don't say much, but a couple of PWAs I made have their splash screens working again after the update.

来源：https://stackoverflow.com/questions/51329040/pwa-ios-splash-does-not-display-despite-following-instructions

标签

ios

splash-screen

pwa