47

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

ohho
  • 47,708
  • 70
  • 236
  • 372
  • 3
    A follow-up question: Are there any existing Javascript frameworks that make all this easy to implement? – Chetan Apr 18 '11 at 23:35

6 Answers6

41

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.

wump
  • 4,047
  • 21
  • 24
  • 13
    you can use navigator.onLine to test if a browser is online – Vitalii Fedorenko May 07 '10 at 08:51
  • 6
    navigator.onLine does not give an accurate value in many browsers. See http://code.google.com/p/chromium/issues/detail?id=7469, for example. – kpozin Jan 04 '11 at 22:39
  • 1
    @kpozin the issue in WebKit was fixed, so now all major browsers support it – Vitalii Fedorenko Feb 16 '12 at 17:38
  • 3
    in Firefox navigator.onLine only returns false if user set the browser to offline mode even when it's not connected https://developer.mozilla.org/en-US/docs/DOM/window.navigator.onLine – Captain kurO Oct 30 '12 at 04:49
  • @CaptainkurO the page you linked now says: "since Firefox 41, on OS X and Windows, the value will follow the actual network connectivity." So apparently it's now fixed in Firefox. – Matias Kinnunen Mar 20 '16 at 10:34
15

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.

Preet Sangha
  • 61,126
  • 17
  • 134
  • 202
hasseg
  • 6,707
  • 33
  • 41
4

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

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

Johann Echavarria
  • 8,595
  • 4
  • 23
  • 31
2

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/

Joe Zack
  • 3,105
  • 2
  • 28
  • 37
0

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.

Jiew Meng
  • 74,635
  • 166
  • 442
  • 756
-1

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.

sean
  • 9,628
  • 8
  • 44
  • 56