Offline mode app in a (HTML5) browser possible?

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

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.

hasseg

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.

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

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

Here's a hacks.mozilla.org article with a demo: http://hacks.mozilla.org/2010/01/offline-web-applications/

Another demo.

More detailed documentation: https://developer.mozilla.org/en/HTML/HTML5#Web_application_features

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/

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.

Javascript give you an option for website offline mode and called UpUp Javascript Framework. A tiny script that make sure your site is always there for your users even when they're on plane or 20,000 league under the sea.

<html>
<head>
  <meta charset="UTF-8">
  <title>Lonely Globe Advisor</title>
</head>
<body>
  <h1>Top Hotels in Rome</h1>
  <ol>
    <li>Villa Domus - Via Piacenza 9, Rome, Italy</li>
    <li>Hotel Trivelli - Piazza Barberini 11, Rome, Italy</li>
  </ol>
  <script src="/upup.min.js"></script>
  <script>
    UpUp.start({
      'content-url': 'offline.html',
      'assets': ['css/bootstrap.min.css', 'css/offline.css']
    });
  </script>
</body>
</html>

Now the content our users see when they are offline, is the contents of offline.html. This is just a simple HTML file, no different than any other page on our site.

Our offline.html file contains two css files: bootstrap.min.css and offline.css. Let's make sure these are cached and available to our users when they are offline

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.

来源：https://stackoverflow.com/questions/2786303/offline-mode-app-in-a-html5-browser-possible

标签

html5

offline-mode