Offline Web Apps on iPhone/Safari

I have mentioned the cool new “manifest” of HTML5 before and how this feature enables you to leverage the offline storage in the browsers to store data, even if you have no network. That is our basic approach to promote Apps outside the App Stores and it is the key functionality to work with data in browser based web apps.

How much data you can store depends on the browser and operating system of your device. Here is a pretty nice page, that tests your browser. We have used the localStorage.getItem and localStorage.setItem methods of Javascript.

There is a very important setting on the iPhone (tested on 4, 5, 6 and the variations):

Setting your browser to “Private” destroys the data you want to save in your offline apps, be sure to communicate this to the users of your web app:

Private Safari mode on iPhone

If that is turned on, you will see that the link above will not work. I had it turned on accidentally and you add your app to the homescreen with the integrated bookmark tool, the data will vanish every time you hit the “home button” on the phone (by the way, I suspect this is the same on any other device, including Android – even if you do not KILL the app per se, but if you snooze it to the background).

add to home screen

So, starting the app directly with a nice logo from the homescreen only works, if the private mode is not turned on.

Here is the complete source for a little test, that saves random numbers in a key/value pair:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<H1>Test localStorage</H1>
<button style="font-size: 20px;" onclick=" myVar='TEST' + Math.random().toString(); alert(myVar); localStorage.setItem('name',myVar);">
    Save it now
</button>
<BR><BR>
<button style="font-size: 20px;" onclick="alert('value: ' + localStorage.getItem('name'));">
    Show it
</button>
</body>
</html>

That random data stays put in your localStorage, even if you end your browser.

Leave a Reply