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 -->

Replies

Do you what are the correct sizes for iPhone X?


TIA

This whole thread is seriously frustrating, BUT WAIT!
I do have an answer (somewhat...)!

I am working on a web app as well right now and I haven't created a splash screen in years. It didn't work and I started googling, just to find this post.

I have come across a different website (caktux.ca) which does have a working splash screen on my iPhone 5s!

So I started digging around and found that the following meta tag works on the iPhone 5s (and probably the iPhone 5 as well):
<link rel="apple-touch-startup-image" href="https://yourdomain.com/iphone5.jpg">

Now, before you run away and insert this to your website, there is a major caveat:

I found that the startup-image above only works when the following conditions are met:

  • The image must be a jpg
  • The image must be named iphone5.jpg - and ONLY iphone5.jpg (this stuff is case sensitive and all!)
  • you can host it wherever you want, as long as


okay, after a few more hours I really don't understand anything anymore. All of a sudden, all my splash screens seem to work and I don't have a clue why that would be the case. One thing you could try is copy the splash screen from caktux.ca tag and check if it works in your emulator. then just play around until it works? I really don't get it anymore.

Well, I have the exact opposite here for some reason....


Just now I decided to test again, as I haven’t used my webapp in a while.

Shortcut was added quite some time ago and webapp splash screen was NOT working then (forget which iOS version I last tested on, probably 10), and was still NOT working on iOS 11.2.5 which I crrently have on my iPad Air right now.

So I’ve just deleted my webapp shortcut and re-added it and BOOM! Splash screen IS working on iPad Air (first gen) under iOS 11.2.5!


I suspect this has a lot to do with what the state of your webapp meta tags on the webserver were at the time you installed the shortcut AND what version of iOS you are running at the time (as we know it was definitely broken for many iOS major releases up till now). Each time I’ve played with this in the past I’ve fiddled with the tags quite a bit (testing different combinations, resolutions etc) and then usually set them back to what I think are the correct retina resolutions when I’m done. But usually I probably do NOT remember to delete and recreate my shortcut when I’ve done that....


At least that’s the only way I can explain what gregblass is reporting (started working then stopped again on recreating shortcut) and what I have just seen (was not working and has just started working on recreating shortcut) under iOS 11(.2.5).


gregblass - are you able to check your meta tags, and do you perhaps know if you might have somehow updated them since you created old (now deleted) webapp shortcut?


FWIW my current (for the time being working!) tags..

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-title" content="agility-time">

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no" />

<link rel="apple-touch-icon" href="@Url.Content("~/apple-touch-icon.png")" sizes="114x114" />

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<!-- iPad Portrait -->

<link rel="apple-touch-startup-image" sizes="768x1004" href="@Url.Content("~/apple-splash-portrait.png")" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">

<!-- iPad Landscape -->

<link rel="apple-touch-startup-image" sizes="1024x748" href="@Url.Content("~/apple-splash-landscape.png")" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">

<!-- iPad Portrait (Retina) -->

<link rel="apple-touch-startup-image" sizes="1536x2048" href="@Url.Content("~/apple-splash-portrait-retina.png")" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">

<!-- iPad Landscape (Retina) -->

<link rel="apple-touch-startup-image" sizes="2048x1536" href="@Url.Content("~/apple-splash-landscape-retina.png")" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">


Hanlon’s razor: “Never attribute to malice that which is adequately explained by stupidity.” 😀


EDIT: Also perhaps worth noting that the architival example here http://taylor.fausak.me/static/pages/2012-03-27-web-app.html is also now working for me, but ONLY in portrait mode. Landscape still just doesn’t want to play for some reason.

My own webapp is working in BOTH portrait and landscape, although if you start with the iPad inverted (in either portrait or landscape) the logo briefly jumps around and turns upside down before the start page displays. Taylor’s example does the same in portrait (landscape, as I said, isn’t working in his implementation for some reason).


so Glad to finally have my splashes back! 😀😀😀

Well, it seems that my previous post with iOS 11.2.5 might have been a bit premature. Because after a week or so my iPad got locked in a re-boot loop and I had to DFU and restore from backup. After several more days it locked up again, and again. So thinking my device was on the way out, I purchased a new iPad.


But after a week or two that also died in a boot loop, and so this time I DFUed it and didn't restore any of my backups but just installed and configured a few basic things from scratch (such as YouTube and eMail), and also put my WebApp on the home screen. But guess what? After a few more days new iPad was still getting stuck in a DFU loop every few days.


By this point I'd fairly much concluded that this was down to Apples botched iOS 11.2.5 and some interaction with WebApps, and so it was back to the Apple store with both devices, a long session at the Genius Bar, and eventually the new iPad was returned for refund.


Then when I installed the next version of iOS the old iPad stopped locking up, but also the splash screens stopped working again.


Now I have installed iOS 12, and it seems if I recreate my WebApp shortcuts again, splash screens are back! Additionally the issue I reported previously with the spash screen jumping around if the app is started with the orientation flipped 180 degrees (either portrait or landscape) also seems to be resolved.


Once issue though, I don't seem to be able to delete my old WebApp shortcut? I get the Cancel/Delete prompt, but clicking delete and the app icon doesn't delete!

I spoke too soon. 10 days later and my iPad is stuck in a boot loop again and i'm having to DFU it.


No coincidence I think that...

* I use my webapp a lot.

* With iOS 11.2.5 my splash screens started working again, but soon afterwards my iPad gets stuck in a reboot loop

* This happens multipe times over a month or so until the next version of iOS

* Splash screens stop working again, however iPad is stable again for 7 months (despite ongoing use of webapp)

* iOS 12.0.0 splash screens are back again when I re-add my web apps to the home screen

* 10 days afterwards and iPad Air is stuck in a reboot loop and I'm having to DFU it again 😠


How I wish I had a back-channel to Apple right now.

And iOS 12.0 has killed my iPad again..... DFUing it once more 😠.


This time I have removed the following form my WebApp site metadata:

<!-- iPad Portrait (Retina) -->
<link rel="apple-touch-startup-image" sizes="1536x2048" href="@Url.Content("~/apple-splash-portrait-retina.png")" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />
<!-- iPad Landscape (Retina) -->
<link rel="apple-touch-startup-image" sizes="2048x1536" href="@Url.Content("~/apple-splash-landscape-retina.png")" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />

Let's see if it makes a difference to stability of retina devices.