Stop native web app from reloading itself upon opening on iOS

Asked 27/11, 2010 at 13:5 Answered 30/1, 2013 at 9:57

ios web-applications iphone-standalone-web-app

I'm trying to build a "native web app" using HTML + JS on iOS. As you may know you can add such an application to the homescreen and it will more or less look just like a normal native app.

However if I quit such an app and reopen it again it reloads the whole page again. This also happens when switching to such an application from another over the multitasking bar.

Is this expected behaviour or is there a way to stop the device from doing this?

As an example you can add the jqTouch-Demos from here to your homescreen and test it: http://jqtouch.com/preview/demos/main/

Likelihood answered 27/11, 2010 at 13:5 Comment(1)

See my answer here: https://mcmap.net/q/281493/-iphone-quot-bookmark-to-homescreen-quot-removes-cookies-and-session – Krystin 20/11, 2016 at 17:48

You could save the state of your app in localStorage. On restart, check to see if the state is running, then restore the app to where it last was.

Eyesore answered 15/12, 2010 at 19:39 Comment(5)

I solved the problem by creating a WebView application that is compiled for iOS 4.2 and therefor supports multitasking. This works perfectly for me. – Likelihood 19/12, 2010 at 22:5

I think ghenne's suggestion is probably the best solution currently. – Ulotrichous 4/8, 2011 at 14:46

How do you save the cookies / session state? – Pyrrha 11/8, 2011 at 7:49

There's no single step to do this, unless you have a very simple app. Store a message indicating the state and the values of each of the global variables you want to restore the values of on restart. – Eyesore 21/8, 2011 at 12:21

@Chetan: you can store the session cookie using my strategy below. It doesn't stop the app from reloading, but it does keep the session alive (even between the installed web app and your website viewed through Safari). – Worn 6/2, 2014 at 16:33

Same problem here. Anyway, if you don't want to reinvent the wheel you can use a tool like PhoneGap (http://www.phonegap.com/). Native web application wrapper with built in access to a number of native features. Also, you store the application locally (fast, secure) and you can of course charge for it ;) It's under BSD or MIT license.

Hootman answered 8/7, 2011 at 5:9 Comment(0)

Update: as this answer is receiving downvotes, I added this explanation.

Your problem might not be the actual reload, but the fact that Mobile Safari treats your user's cache and cookies differently when your web app is opened through the browser, than when it's 'installed' as a web app to the home screen. Although the solutions proposed here that use localStorage will work, they're a lot of work for client-side logic that can be avoided if your server is already responsible for persisting the session state of your user. The 30-second solution is to simply explicitly set the session cookie to have a longer lifetime.

This allows you to keep the state intact even between device reboots, so even though it doesn't technically stop the web app from being reloaded when launched from the home screen, it is an easy way to restore the state for the user without him/her noticing the reload - which in many cases I suspect is the real problem.

For a more elaborate discussion of this strategy and code examples, take a look at these questions and my answers there:

Worn answered 30/1, 2013 at 9:57 Comment(1)

This doesn't prevent reloading, but it keeps the session variables, which seems to be the main issue, not the fact that it's reloading. – Busy 6/2, 2014 at 10:12

You might want to look at using cache-manifest to prevent it loading the files.

Matt Might has a good writeup here:

http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Basically you change the html tag to this

<html manifest="cache.manifest">

and write a cache.manifest file on the server which specifies which files should be kept in the device cache and which should be reloaded dynamically from the network.

CACHE MANIFEST
local1.file
local2.file

NETWORK:
network1.php
network2.cgi

You also need to make sure your web server serves up .manifest files with the MIME type text/manifest, or else this won't work. If you're using apache, put the following in your .htaccess file:

AddType text/cache-manifest .manifest

Biotin answered 15/7, 2011 at 3:23 Comment(1)

Good explaination, but unfortunately it doesn't solve the problem of the web app reloading and losing state when multitasking. – Ulotrichous 4/8, 2011 at 14:46

Recommended topics

Hot tags