Offline mode app in a (HTML5) browser possible?

Question

Is it possible to build an application inside in browser? An application means:

1 Where there is connection (online mode) between the browser and an remote application server:

• the application runs in typical web-based mode
• the application stores necessary data in offline storage, to be used in offline mode (2)
• the application sync/push data (captured during offline mode) back to the server when it is resumed from offline mode back to online mode

2 Where there is no connection (offline mode) between the browser and an remote application server:

• the application will still run (javascript?)
• the application will present data (which is stored offline) to user
• the application can accept input from user (and store/append in offline storage)

Is this possible? If the answer is a yes, is there any (Ruby/Python/PHP) framework being built?

Thanks

Answer 1

Yes, that is possible.

• You need to write the application in Javascript, and detect somehow whether the browser is in offline mode (simplest is to poll a server once in a while). (Edit: see comments for a better way to detect offline mode)

• Make sure that your application consists of only static HTML, Js and CSS files (or set the caching policy manually in your script so that your browser will remember them in offline mode). Updates to the page are done through JS DOM manipulation, not through the server (a framework such as ExtJS http://www.extjs.com will help you here)

• For storage, use a module such as PersistJS ( http://github.com/jeremydurham/persist-js ), which uses the local storage of the browser to keep track of data. When connection is restored, synchronize with the server.

• You need to pre-cache images and other assets used, otherwse they will be unavailable in offline mode if you didn't use them before.

• Again: the bulk of your app needs to be in javascript, a PHP/Ruby/Python framework will help you little if the server is unreachable. The server is probably kept as simple as possible, a REST-like AJAX API to store and load data.

Answer 2

The "Let's Take This Offline" chapter in Mark Pilgrim's (online) book Dive Into HTML5 is a very nice overview of writing offline web apps with HTML5 technologies.

Note: Since Mark Pilgrim's original Dive Into HTML5 link seems to be down.

Copies can now be found here among other places.