Best IT Recipes

Is it possible to use offline mode in (HTML5) browser?

Can I create an application inside the browser? Application means:

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

  • application works in typical web mode
  • the application stores the necessary data in offline storage, which will be used offline (2)
  • The application synchronizes / deletes data (taken offline) back to the server when it resumes from offline mode back to online mode.

2 If there is a connection between the browser and the remote application server (offline mode):

  • the application will still work (javascript?)
  • the application will provide data (which are stored offline) to the user
  • the application can receive input from the user (and store / add it in offline storage)

Is it possible? If the answer is yes, is there any (Ruby / Python / PHP) structure?

thank

+41
html5
May 7 '10 at 4:55
source share
7 answers

Yes it is possible.

  • You need to write the application in Javascript and somehow find out if the browser is offline (the easiest way is to poll the server once in a while). (Edit: see Comments for a better way to detect offline mode)

  • Make sure your application consists of only static HTML, Js, and CSS files (or set the caching policy manually in a script so that your browser remembers them offline). Updates on the page are performed using JS DOM manipulation, and not through the server (an infrastructure such as ExtJS http://www.extjs.com can help here)

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

  • You need to pre-cache images and other used resources, otherwise they will not be available offline if you have not used them before.

  • Again: the main part of your application should be in javascript, the PHP / Ruby / Python structure will help you a little if the server is unavailable. Perhaps the server is kept as simple as possible, a REST-like AJAX API for storing and loading data.

+37
May 7 '10 at 6:15
source share

"Let Take This Offline" chapter in Mark Pilgrim's book (online) Immersion in HTML5 is a very good overview of writing offline web applications with HTML5 technology.

Note: Since the original dive with Mark Pilgrim Dive in HTML5 does not seem to work.

Now copies can be found here among other places.

+14
May 30 '10 at 10:23
source share

Jake Archibald wrote Offline Cookbook. A modern (December 9, 2014) and enjoyable approach with ServiceWorker:

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

+3
Feb 25 '15 at 16:25
source share

Here's the 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

+1
May 7, '10 at 8:43
source share

Javascript provides you with an offline website feature called UpUp Javascript Framework . A small script that ensures that your site will always be available to your users, even if they are on an airplane or 20,000 leagues under water.

<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 that our users see when they are offline is offline.html content. This is a simple HTML file, different from any other page on our site.

Our offline.html file contains two css files: bootstrap.min.css and offline.css . Make sure they are cached and available to our users when they are offline.

0
Sep 28 '15 at 5:57
source share

Take a look at Google Gears, http://code.google.com/apis/gears/ . Although they have been canceled in favor of HTML5. However, it appears that what is interpreted as HTML5 is Google Gears.

-one
May 21 '10 at 3:25
source share

I was looking for this too, I learned abt HTML5 Offline Web Apps . havent tried this

Users of typical online web applications can only use applications if they have an Internet connection. When they go offline, they can no longer check their email, view their calendar appointments, or prepare presentations using their online tools. Meanwhile, native applications provide these functions: local folders of mail client caches locally, calendars store their events locally, presentation packages store their data files locally.

-one
May 30 '10 at 10:12
source share


More articles:


All Articles