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.

Answer 2

If you save the current state using the localStorage API and restore from this API on load, you should be able to recreate the application state.

I recommend this page for an overview of the local storage API: http://diveintohtml5.info/storage.html

I'm afraid you will have trouble preventing the application/webpage in memory when it is in the background, but continuously storing state to localStorage and recover state when the pages is loaded (window.onload or $(document).ready()) would be a solution.

Answer 3

If your app is only using canvas for render, then you could bind a function to the window.unload or pagehide event that whenever the page is unloaded the function captures the pixel data of the canvas using

ctx.getImageData()

• and stores that in localstorage, then when the page is reloaded you can push that data directly to the canvas for near instant reload and put a spinner ontop while you load the real application behind it.

Answer 4

1. I do not think you can
2. WebKit supports HTML5 Client-Side data storage, which you could use
3. I do not know about any way your webApp would get notified on closing, so you should try to save the current state after each step in your navigation etc ( Background behavior for iOS Web App (so app doesn't restart) ).