How to use offline application cache correctly in HTML 5

Question

I've started using HTML5 application cache to provide the possibility for users to use web resources even when they're offline.

The idea is that the user downloads the page in the morning, and enters data into the form through the whole day. If he happens to be online post the data to the server, if not, it should be cached in localStorage.

I have added the filename to the cache.manifest with its js, css resources.

The problem i see that after the caching of the page, only the local copy is displayed, even if the client has connection to the server.

I would like to be able to load the page from the server, if we're online, and load it from the appcache if we're offline.

(Also, how should i decide properly if I'm online or not... i've tried window.navigator.onLine, but i think it's better to actually send an XHR to the server to determine if the connection is there).

Any suggestions?

Answer 1

Have you seen this example of a To Do List Manager?

Answer 2

Remy Sharp also talks about this in the book Introducing HTML5. I haven't had time to test it myself, but if if you have a copy, look that bit up. If not, when I have the chance I'll type it up.

He does mention that navigator.onLine only works with browsers that have a "work offline" option and even then not always, hence it's not very useful.

Answer 3

Implementation details:

http://dev.opera.com/articles/view/offline-applications-html5-appcache/

Some general advice:

http://www.html5rocks.com/tutorials/offline/whats-offline/