iOS 9 Mobile WebApp Startup Screen Problem

Hi there,


I've recently made a website that is Mobile WebApp compatible, however for some reasons the startup screens don't display while the app is launching.

It worked in iOS 8. Have I done something wrong or is this a known bug?


Here is my code:

    <!-- META TAGS START -->
   
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <!-- Chrome & Firefox OS -->
    <meta name="theme-color" content="#2196f3">
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="#2196f3">
   
   
    <!-- META TAGS END -->
   
    <!-- APPLE MOBILE WEB APP TAGS START -->
   
    <!-- CONFIGURATION -->
   
    <!-- Allow web app to be run in full-screen mode. -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
   
    <!-- Make the app title different than the page title. -->
    <meta name="apple-mobile-web-app-title" content="Cloud Craft">
   
    <!-- Configure the status bar. -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-transparent">
   
    <!-- Set the viewport. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   
    <!-- Enable automatic phone number detection. -->
    <meta name="format-detection" content="telephone=yes">
   
    <!-- ICONS -->
   
    <!-- iPad retina icon -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-152x152.png" sizes="152x152" rel="apple-touch-icon-precomposed">
   
    <!-- iPad retina icon (iOS < 7) -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-144x144.png" sizes="144x144" rel="apple-touch-icon-precomposed">
   
    <!-- iPad non-retina icon -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-76x76.png" sizes="76x76" rel="apple-touch-icon-precomposed">
   
    <!-- iPad non-retina icon (iOS < 7) -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-72x72.png" sizes="72x72" rel="apple-touch-icon-precomposed">
   
    <!-- iPhone 6 Plus icon -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-180x180.png" sizes="120x120" rel="apple-touch-icon-precomposed">
   
    <!-- iPhone retina icon (iOS < 7) -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-114x114.png" sizes="114x114" rel="apple-touch-icon-precomposed">
   
    <!-- iPhone non-retina icon (iOS < 7) -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-57x57.png" sizes="57x57" rel="apple-touch-icon-precomposed">
   
    <link rel="manifest" href="/assets/favicons/manifest.json">
    <link rel="shortcut icon" href="/assets/favicons/favicon.ico">
    <meta name="application-name" content="Cloud Craft">
    <meta name="msapplication-TileColor" content="#2196f3">
    <meta name="msapplication-TileImage" content="/assets/favicons/mstile-144x144.png">
    <meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
    <meta name="theme-color" content="#2196f3">
   
    <!-- STARTUP IMAGES -->
   
    <!-- iPad retina portrait startup image -->
    <link href="/assets/startup/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px)
                     and (-webkit-device-pixel-ratio: 2)
                     and (orientation: portrait)" rel="apple-touch-startup-image">
   
    <!-- iPad retina landscape startup image -->
    <link href="/assets/startup/apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px)
                     and (-webkit-device-pixel-ratio: 2)
                     and (orientation: landscape)" rel="apple-touch-startup-image">
   
    <!-- iPad non-retina portrait startup image -->
    <link href="/assets/startup/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px)
                     and (-webkit-device-pixel-ratio: 1)
                     and (orientation: portrait)" rel="apple-touch-startup-image">
   
    <!-- iPad non-retina landscape startup image -->
    <link href="/assets/startup/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px)
                     and (-webkit-device-pixel-ratio: 1)
                     and (orientation: landscape)" rel="apple-touch-startup-image">
   
    <!-- iPhone 6 Plus portrait startup image -->
    <link href="/assets/startup/apple-touch-startup-image-1242x2148.png" media="(device-width: 414px) and (device-height: 736px)
                     and (-webkit-device-pixel-ratio: 3)
                     and (orientation: portrait)" rel="apple-touch-startup-image">
   
    <!-- iPhone 6 Plus landscape startup image -->
    <link href="/assets/startup/apple-touch-startup-image-1182x2208.png" media="(device-width: 414px) and (device-height: 736px)
                     and (-webkit-device-pixel-ratio: 3)
                     and (orientation: landscape)" rel="apple-touch-startup-image">
   
    <!-- iPhone 6 startup image -->
    <link href="/assets/startup/apple-touch-startup-image-750x1294.png" media="(device-width: 375px) and (device-height: 667px)
                     and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
   
    <!-- iPhone 5 startup image -->
    <link href="/assets/startup/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px)
                     and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
   
    <!-- iPhone < 5 retina startup image -->
    <link href="/assets/startup/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px)
                     and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
   
    <!-- iPhone < 5 non-retina startup image -->
    <link href="/assets/startup/apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px)
                     and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
   
   
    <!-- APPLE MOBILE WEB APP TAGS END -->
Up vote post of ThatGuySam Down vote post of ThatGuySam
41k views
Posted by
ThatGuySam
Reply
Add a Comment

Replies

Same problem here with my iPhone 6s running iOS 9.3.2

Posted by
varseb
Up vote reply of varseb Down vote reply of varseb
Add a Comment

And its seems the startup screen will not come back in 10.x either :-(

Posted by
webappdev
Up vote reply of webappdev Down vote reply of webappdev
Add a Comment

I got all excited think that I was going to help everybody here when I saw that Apple FINALLY updated their documentation "Specifying a Startup Image" on March 21, 2016, and maybe it just slipped under the radar. Sadly though... nothing has changed. I, too, have spent countless hours trying all different sizes and schemes in iOS 9.x.x to make it work -- all for nought. :-(

Posted by
ThinkingThings
Up vote reply of ThinkingThings Down vote reply of ThinkingThings
Add a Comment

Apple documentation claims it is still valid and acknowledge open (un-fixed) bugs.

22559391

Posted by
appdev999B
Up vote reply of appdev999B Down vote reply of appdev999B
Add a Comment

IOS 10.1.1 and still no splash screen.

https://github.com/joshbuchea/HEAD#apple-ios

Posted by
dorindo
Up vote reply of dorindo Down vote reply of dorindo
Add a Comment

+1 same problem here...

Posted by
axZj
Up vote reply of axZj Down vote reply of axZj
Add a Comment

Does it still not work properly?

Posted by
iromablog
Up vote reply of iromablog Down vote reply of iromablog
Add a Comment

Sadly, the splash screen is still not working under iOS 10.3 public beta 2. I can't believe this is a difficult bug for Apple to fix, nor can I think of a good reason why it would be unofficially deprecated. 😕

Posted by
heliomass
Up vote reply of heliomass Down vote reply of heliomass
Add a Comment

Have we at least come to a point where we generally agree that it’s been either officially deprecated or a bug? It’s still on their docs at least. I’m leaning toward its existence as a bug and still including it in the apps I build.

Posted by
Zemke
Up vote reply of Zemke Down vote reply of Zemke
Add a Comment

I can think of a reason! Web apps are bad for business compared to native apps distributed through the App Store where Apple can, say, refuse to approve subscription-based apps that don't include in-app subscriptions.

Could be the same reason iOS is the only major browser left that doesn't support web notifications.


It's insane to have a documented feature go unfixed for so long, and IMO shows an extraordinary amount of disrespect for the time of anyone trying to develop for iOS devices.

Posted by
jmap
Up vote reply of jmap Down vote reply of jmap
Add a Comment

It is my pleasure to inform everyone that this issue appears to be fixed in iOS 11. I have tested and it seems to be working for standalone web apps!

Posted by
bzerkz
Up vote reply of bzerkz Down vote reply of bzerkz
Add a Comment

And now it doesn't work again ... Not sure what's going on here anymore.

Posted by
bzerkz
Up vote reply of bzerkz Down vote reply of bzerkz
Add a Comment

Same problem here, searched the web a few hours and tried many things but could not get it to work.

Tested on a iphone 7 with ios 11 and inside the simulator with ios11

Posted by
master92
Up vote reply of master92 Down vote reply of master92
Add a Comment

I almost had a heart attack when I saw it working with a shortcut on the home screen to my web app that I added a long time ago.


Then I tried adding another and its back to a blank screen.


FYI, I tried to make this type of stuff more public here: https://m.phillydevshop.com/apples-refusal-to-support-progressive-web-apps-is-a-serious-detriment-to-future-of-the-web-e81b2be29676

Posted by
gregblass
Up vote reply of gregblass Down vote reply of gregblass
Add a Comment

So here’s the latest that I found. I had a shortcut added on my home screen on iOS 10 with the proper code enabled for a startup screen (which didn’t work). I upgraded to iOS 11 - and that shortcut’s startup screen works now - but if I add the exact same thing to my home screen again in iOS 11 - the startup screen is gone again. So I literally have two of the exact same shortcuts added next to each other - one added before iOS 11 upgrade, and one after - where one has a working startup screen and the other doesn’t. I gotta say - what a cluster f&@#! IMO this basically proves that Apple made a conscious decision to disable it because it goes against their App Store revenue model. Really sad move for the web as a whole. Perhaps even more frustrating is the radio silence and the ignoring of threads like these. EARTH TO APPLE!??? HEY! ANYONE THERE!?

Posted by
gregblass
Up vote reply of gregblass Down vote reply of gregblass
Add a Comment