34 Replies
      Latest reply on Sep 17, 2018 4:08 PM by pcbbc
      ThatGuySam Level 1 Level 1 (0 points)

        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 -->
        
        
        • This reply has been hidden. This can happen if the message has been hidden by a moderator, or has been reported as abusive.
        • Re: iOS 9 Mobile WebApp Startup Screen Problem
          greg.blass Level 1 Level 1 (0 points)

          Same here. I went through the trouble of crafting 10 different custom images in photoshop and writing all the code to go with it only to find out it doesn't work in iOS9.

           

          Apple, what happened? Did you consciously decide to remove that functionality, or is it a bug? Should I remove it from my codebase forever, or will it make its way back?

           

          People still develop web apps you know. Not everyone has the team to go all native. Fastclick/Turbolinks/Bootstrap!

           

          A response here would be awesome...

          • Re: iOS 9 Mobile WebApp Startup Screen Problem
            HankSmith Level 1 Level 1 (0 points)

            iOS 9.2 still not works.

            But they have fixed the status bar!

            • Re: iOS 9 Mobile WebApp Startup Screen Problem
              njs Level 1 Level 1 (0 points)

              +1 doesn't work for me either (ios9)

              • Re: iOS 9 Mobile WebApp Startup Screen Problem
                ThatGuyShawn Level 1 Level 1 (0 points)

                Ever had a conversation with a brick wall?? LOL... Where am I... Microsoft? LOL... geez...

                • Re: iOS 9 Mobile WebApp Startup Screen Problem
                  eivissa89 Level 1 Level 1 (0 points)

                  same problem here...

                  any new solutions? i really hope an update will follow soon!

                  • Re: iOS 9 Mobile WebApp Startup Screen Problem
                    jirehstudios Level 1 Level 1 (0 points)

                    Same issue, everything works except the startup image on iOS 9.2.1 with an iPhone 6s. Startup image is 750 x 1294. I hope this issue is being worked on despite the silence.

                     

                    <head>
                      <meta charset="utf-8">
                      <meta http-equiv="X-UA-Compatible" content="IE=edge">
                      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
                      <meta name="apple-mobile-web-app-capable" content="yes">
                      <meta name="apple-mobile-web-app-status-bar-style" content="black">
                      <link rel="apple-touch-icon" href="/static/img/touch-icon.png">
                      <link rel="apple-touch-startup-image" href="/static/img/startup.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)">
                      <title>...</title>
                      <meta name="apple-mobile-web-app-title" content="...">
                      <link rel="stylesheet" href="/static/libs/bootswatch-dist/css/bootstrap.min.css">
                      <link rel="stylesheet" href="/static/libs/font-awesome/css/font-awesome.min.css">
                      <link rel="stylesheet" href="/static/css/froala.css">
                      <link rel="stylesheet" href="/static/css/style.css">
                      <base href="/">
                    </head>
                    
                    
                    • Re: iOS 9 Mobile WebApp Startup Screen Problem
                      Starfia Level 1 Level 1 (0 points)

                      I'd also love to know what's going on.  I'll be watching.

                      • Re: iOS 9 Mobile WebApp Startup Screen Problem
                        kylew Level 1 Level 1 (0 points)

                        Having the same issue as well. Using an iPhone 6+ with iOS 9.2.1 (13D15). Would love to know if there is a fix for this or if I can remove the code...

                        • Re: iOS 9 Mobile WebApp Startup Screen Problem
                          Thoast Level 1 Level 1 (0 points)

                          Still doesn't work!

                          • Re: iOS 9 Mobile WebApp Startup Screen Problem
                            skyynet Level 1 Level 1 (0 points)

                            Same here. Hope to see this being fixed. Has anyone reported this bug within Apple Bug Reporter? Just did that #26974806.

                            • Re: iOS 9 Mobile WebApp Startup Screen Problem
                              varseb Level 1 Level 1 (0 points)

                              Same problem here with my iPhone 6s running iOS 9.3.2

                              • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                webappdev Level 1 Level 1 (0 points)

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

                                • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                  ThinkingThings Level 1 Level 1 (0 points)

                                  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. :-(

                                  • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                    dorindo Level 1 Level 1 (0 points)

                                    IOS 10.1.1 and still no splash screen.

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

                                    • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                      axZj Level 1 Level 1 (0 points)

                                      +1 same problem here...

                                      • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                        iromablog Level 1 Level 1 (0 points)

                                        Does it still not work properly?

                                        • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                          heliomass Level 1 Level 1 (0 points)

                                          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.

                                            • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                              jmap Level 1 Level 1 (0 points)

                                              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.

                                            • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                              Zemke Level 1 Level 1 (0 points)

                                              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.

                                              • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                                bzerkz Level 1 Level 1 (0 points)

                                                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!

                                                • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                                  master92 Level 1 Level 1 (0 points)

                                                  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

                                                  • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                                    gregblass Level 1 Level 1 (0 points)

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

                                                      • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                                        pcbbc Level 1 Level 1 (0 points)

                                                        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!

                                                      • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                                        AlexHH Level 1 Level 1 (0 points)

                                                        Do you what are the correct sizes for iPhone X?

                                                         

                                                        TIA

                                                        • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                                          pointmax Level 1 Level 1 (0 points)

                                                          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.

                                                            • Re: iOS 9 Mobile WebApp Startup Screen Problem
                                                              pcbbc Level 1 Level 1 (0 points)

                                                              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!