IPhone Web App Screen Saver Delay

Question

I created a web application for the iPhone and took all the steps to make it look like a native application: an application icon that prevents scrolling, preventing selection, using js methods with touch controls, etc. However, I have a difficult time with a screensaver.

I tried PNG 320x460 and JPEG cached with manifest file. A pop-up image appears, but only a few seconds after launching the application using a white screen. Thus, a pop-up screen appears only a split second before the application finishes launching.

I can’t understand why it doesn’t load the splash right away. I know that it is cached by the manifest because it loads without an internet connection. I read before that the surge does not appear until the DOM is ready, so I assume the problem, but I do not know how to fix it.

Answer 1

Do you paste it using the launch link?

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

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

Answer 2

If you use Sencha Touch, I found that the problem is related to this. To try to determine the screen size, they added 2 huge delays of 500 ms. This adds an extra second to boot time.

I managed to reduce the time to 50 ms on the iPhone. I'm not sure how well the code works, 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 first checks that we are on the iPhone. Thus, I just changed the functionality for the iPhone. I do not have access to other devices for testing.

I think that even this can be done better. For example, offline on the iPhone, we know exactly how tall the screen is.

Now it will be done.

Hope this helps.

Answer 3

This will add a pop-up screen to your web application. Below are the sizes you need for both the iPad and the iPhone / iPod Touch. These also include the state area.

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 (High Resolution Retina)

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

When creating compatibility with the web application for iPad, it is recommended to use both the size of the landscape and the portrait.

EDIT . You also need to clear the cache and rename the file (for example, from image.png to new_image.png) so that the device loads a new [correct] image. It will not show the splash screen the first time you launch the web application, and maybe not even the second, depending on whether you provide enough time to download all the necessary files to the device’s memory.