If at first you don't succeed; call it version 1.0
Moving to html offline : Part 2
In part one of this short series, I mentioned some ruby on rails specific issues I encountered making an offline HTML5 app. This second short article explores some more general HTML5 offline application concepts, namely connectivity checks and cache manifest issues
- online/offline checks
When dealing with offline webapps, a major functionality of the app should be reliable detection of whether the user is online or offline. The connectivity state will impact whether the app can make any ajax requests online or if the app should store transactions in local storage (for example localStorage or websql) for synchroization later on.
All this underscores the need for reliable online/offline detection. Most sites we researched pointed towards using an ajax based check to reach a particular URL. If successful, we can assume the app is online, otherwise the app is offline. If you do go down this route, note the check needs to have caching disabled. For example, if you are using jquery, you need to employ the $.ajax method, since this allows you to use the “cache: false” option.
The idea is to nest the above mentioned events within the window.onload event callback, and depending on which event is fired, perform different actions / logic. If “onerror” is fired, your app or your site is offline. If “onobsolete” is fired, you should prompt to reload the page to use the new cache manifest, and lastly, if “onnoupdate” is fired, you can assume your app and site are both online. There are more examples of what you can do with this, but that’s the basic idea to get you started
- cache manifest / webapp changes
- To be absolutely sure all content will be reloaded, change the name of your cache manifest file (for example from cache1.manifest to cache2.manifest). Obviously, also change the reference to you manifest file within the webapp html (example : <html manifest=”/cache2.manifest”>). This will cause your webapp to throw an “onobsolete” event and re-cache all the content
- Another way to force a re-download of content, is to add comment line to manifest, and change this when any of your content changes
Using the above three points, we never ran into any more updating application cache issues