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.

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.

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.