iPhone WebApp on Home Screen Persistence

Question

I have created a webapp that can be saved to the "Home Screen" on the iPhone. The app uses a canvas and is fairly interactive with changing state.

Whenever the app is minimised and re-opened it resets back to the initial state. The same (as expected) occurs when closing the app and reloading it.

1. How can I prevent the app from being reloaded when it is merely minimised?

2. What is the best way to persist state data so that when the app is closed and re-opened it continues seamlessly?

3. What events would I need to use to ensure that state data is not lost?

If possible a cross platform solution would be preferred iPhone + Android...

Answer 1

TL;DR You'll need to design your application to use local storage or cookies or some other mechanism with which you can preserve state. It will need to look at this local storage and rebuilt it's interface every time it is launched. Using local storage or webdb (depreciated but supported), you'll need to save every state change and make sure you reload them when your page loads in the browser.

1. Define minimized? Running in the background?

   Your webapp, regardless of it's status on the homescreen, is merely another page loaded into the browser. Due to a) the lack of memory on the device and b) how multitasking works, applications can be asked by the operating system to free up memory or even to terminate themselves at anytime.

   This is why when you're building an iOS app you have:

   - (void)applicationWillTerminate:(UIApplication *)application

   This method allows you, as the developer, to specify a behavior to use (such as saving user data) before your application terminates when it receives the terminate signal from the OS. This is also why the iOS developer guides ask you to retain state and always make sure that your state is restored when an app is brought to the foreground. (Users may not know an app has terminated as it still will appear in the "running applications" list when you double-click the home).

   Now I understand you're talking about a web app, but this is important. Web pages, and I'm sure yours as well, take up some memory in the phone -- you've got the DOM, all the resources, information about the state as to where the page is and what widgets are set to what. You say your app is fairly interactive using the canvas and stuff -- I'm sure it takes up a lot of memory.

   So when you put Safari in the background, Safari is most likely trashing your in-memory cache.

2. Safari has access to both local storage and cookie data. iOS5 also has access to WebSQL (but no IndexedDB which is sad because WebSQL is depreciated). Choose your poison.

3. You'll need to always save state. Since you don't have access to the UIApplicationDelegate methods via JS, every time the user does something, you'll need to save that state change. And every time your page is reloaded, it needs to check for a persistant state and reload from the storage option which you've chosen.