3

What is new in HTML 5’s “offline web applications” feature which was not already available in all browsers?

Offline caching is the job of the browser — how did it become a job of HTML?

A web cache is a mechanism for the temporary storage (caching) of web documents, such as HTML pages and images, to reduce bandwidth usage, server load, and perceived lag. A web cache stores copies of documents passing through it; subsequent requests may be satisfied from the cache if certain conditions are met.

As written in Wikipedia’s article for Web cache.

And this is written for offline web cache in the W3C website:

In order to enable users to continue interacting with Web applications and documents even when their network connection is unavailable — for instance, because they are traveling outside of their ISP's coverage area — authors can provide a manifest which lists the files that are needed for the Web application to work offline and which causes the user's browser to keep a copy of the files for use offline.

What is HTML 5 doing better and different in caching?

Is it similar to offline mode in Internet Explorer 5? And can we cache the data beyond the limit of amount of space set in browser?

Please give me an example so that I can understand the difference of HTML 5 offline cache, and browser caches.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

2 Answers2

2

Web browser caching is when browsers decide to store files locally to improve performance. HTTP allows web servers to suggest browsers how long to store the files for, and allows browsers to ask the server whether a file has changed (so that they can avoid re-downloading it).

However, it’s not designed to reliably store assets required by an offline application. It’s ultimately up to the browser whether, and for how long, it caches the files. And browsers will often stop using their cached version if they can’t contact the server to check that it’s up-to-date.

The HTML5 offline web applications spec provides web authors with the ability to tell browsers what to store for offline access, and requires browsers to keep those files up-to-date when it is online. It also provides a DOM property that tells the developer whether the browser is online or offline, and events that fire when the online status changes.

As Peeter describes in his answer, this allows web app developers to store user-inputted data whilst the user is offline, then sync it with the server when they’re online again. The developer has to do this storage and syncing manually, as the browser only provides the events indicating online status, but if the browser also supports localStorage, the developer can store the data there.

I can do no better than point you to the relevant chapter of Dive into HTML5: http://diveintohtml5.ep.io/offline.html

Community
  • 1
  • 1
Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • So suppoese if I have a registration form on a webpage and user fill the from when Internet is not available. then will the data submit? will he get the message that "You are registered" even if internet is off and when internet will be available everything will be synchronized. – Jitendra Vyas Jun 16 '11 at 12:54
  • @Jitendra: if you write it that way, yes. It won’t happen automatically, but you can write some JavaScript that checks whether the user is online when they submit, and if they’re not, stores their data locally, then submits it to the server when they go back online. – Paul D. Waite Jun 16 '11 at 13:01
  • So if user clear the cache before to connect to internet to again, data entered by user will be gone, in all cases, right? Do you know some live example to see the efffect of html 5 offline cache? I will turned my internet on and off to see the changes and synchronization. – Jitendra Vyas Jun 16 '11 at 13:06
  • @Jitendra: depends where you store the data: it’s your responsibility to do that via JavaScript. I think your options are basically cookies and localStorage, so if the user clears either of those, yup, the data‘s gone. I believe the Financial Times has a web app that uses HTML5’s offline capabilities: see possibly http://www.ft.com/cms/275bc334-3063-11dc-9a81-0000779fd2ac.html?segid=70152 – Paul D. Waite Jun 16 '11 at 13:24
  • @Jitendra: on which offline storage method to use for user-entered data, there’s been a question on that very issue today: http://stackoverflow.com/questions/6374266/ – Paul D. Waite Jun 16 '11 at 15:50
1

You can now cache dynamic data, instead of just js/css/html files / images.

Lets say you've got a todo list application open in your browser. You're connected to the internet and you're adding a bunch of stuff you have to do.

Boom, you're on an airplane without a connection. You've got 6 hours of time to kill so you decide to get some work done. You finish all of the things on your todo list (the list was still open in your browser). You select all of the items and change their state to "finished".

Your plane lands, you open up your laptop and refresh the page. All the changes you did without a connection are now synced to the server as you have a internet connection now.

Peeter
  • 9,282
  • 5
  • 36
  • 53
  • 1
    So it's beneficial for web applications not web-sites – Jitendra Vyas Jun 16 '11 at 12:50
  • @Jitendra: depends on your definitions. If a web site wants to make it easier for users to read its content when offline, then popping in a manifest file would help. (Think of e.g. the iPhone. It will pretty aggressively bump pages and files from its cache because it’s resource-constrained. A manifest file would prevent that, assuming it’s supported on iOS.) – Paul D. Waite Jun 16 '11 at 12:52
  • @Paul: which it is, [albeit with a nasty bug related to homescreen web apps in iOS 4.3](http://stackoverflow.com/questions/6270175/ios-did-apple-disable-html5-offline-capability-for-web-apps-saved-to-the-home-sc). – Paul D. Waite Jun 16 '11 at 13:05
  • @Jitendra Vyas: I cannot see this feature offering anything of benefit for a static website. – Peeter Jun 16 '11 at 13:20