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

The answer in 2018 is to leverage the service worker, and to build a Progressive Web App: https://developers.google.com/web/progressive-web-apps/

Answer 2

Jake Archibald wrote "The offline cookbook". A modern (9 December 2014) and nice approach with ServiceWorker:

http://jakearchibald.com/2014/offline-cookbook/

Answer 3

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.

Answer 4

i was looking for this also, i found out abt HTML5 Offline Web Apps. havent tried it tho

Users of typical online Web applications are only able to use the applications while they have a connection to the Internet. When they go offline, they can no longer check their e-mail, browse their calendar appointments, or prepare presentations with their online tools. Meanwhile, native applications provide those features: e-mail clients cache folders locally, calendars store their events locally, presentation packages store their data files locally.

Answer 5

Have a look at Google Gears, http://code.google.com/apis/gears/. Although they have been phased out in favour of HTML5. However, it seems that what is being pushed as HTML5 is Google Gears.

Answer 6

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.