iPhone Web App splash screen delay

Question

I've built an iPhone web app and have done all the steps to make it look like a native app: app icon, prevent scrolling, prevent selection, use touch-based js methods, etc. However, I'm having a tough time with the splash screen.

I have tried a 320x460 PNG and JPEG, cached with a manifest file. The splash image does appear, but only after a few seconds after the app launches with a white screen. So, really the splash screen shows up only for a fraction of a second before the app finishes launching.

I can't figure out why it isn't loading the splash immediately. I know it is cached by the manifest because it loads without an internet connection. I read before that the splash doesn't show up until the DOM is ready, so I'm guessing that's the problem, but I don't know how to fix it.

Poison

Answer 1

Are you inserting it with the startup link?

<link rel="apple-touch-startup-image" href="startup-graphic.png" />

I also found that sometimes when I made changes to my iPhone web apps I had to completely remove the link on the home-screen and go through the process of adding it again before some of the elements updated properly - even after updating the cache-manifest.

Archaeozoic

Yes I am using that code. And I also noticed I had to remove the app on the home-screen and add it again (among other things) to get the new version cached. The problem is not that big of a deal – it's just a bothering giveaway that it's not a native app. – Poison

@ryanashcraft: Just don't include the app version number in the splash screen, and never change it, so then users will never know... – Prussia

Answer 2

If you're using Sencha Touch I found the problem to be related to that. To try and work out the screen size they have added 2 massive 500ms delays. This adds an extra second to the load time.

I've managed to reduce the time to 50ms on an iPhone. I'm not sure how well the code functions but it works for me.

if (Ext.is.iOS && Ext.is.Phone) {
    Ext.Viewport.init = function(fn, scope) {
        var me = this,
            stretchSize = Math.max(window.innerHeight, window.innerWidth) * 2,
            body = Ext.getBody();

        me.updateOrientation();

        this.initialHeight = window.innerHeight;
        this.initialOrientation = this.orientation;

        body.setHeight(stretchSize);

        Ext.defer(function() {
            me.scrollToTop();
            if (fn) {
                fn.apply(scope || window);
            }
            me.updateBodySize();
        }, 50);
    };
}

The code firstly checks that we're on the iPhone. This way I've only changed the functionality for the iPhone. I haven't got access to any other devices to test on.

I do think that even this can be done better. For example in standalone mode on the iPhone we know exactly how high the screen is.

It'll do for now.

Hope this helps.

Crane

Answer 3

This will add a Splash Screen to your Web App. Below are the sizes you’ll need for both iPad and iPhone/iPod Touch, these include the status bar area as well.

iPad Landscape – 1024 x 748

<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />

iPad Portrait – 768 x 1004

<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

iPhone/iPod Touch Portrait – 320 x 480 (standard resolution)

<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" />

iPhone/iPod Touch Portrait – 640 x 960 pixels (Retina Display high-resolution)

<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />

If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.

EDIT: Also, you need to clear your cache and rename the file (example, from image.png to new_image.png) so that the device will load the new [correct] image. It will not show the splash screen the first time you launch the web app, and maybe not even the second depending on if you give it enough time to load all of the required files into the device's memory.

Pich