HTML5 Cache and JavaScript – how to use HTML5 cache?

html5_c

Level: intermediate

Today, a few words about the issues and possibilities offered by HTML5 Cache.

Working with HTML5 Cache

The back end developers can associate it with a kind of caching the pages, to speed up their loading. In the case of HTML5 Cache it’s also about some other benefits.

HTML5 offers caching mechanism for applications in such a manner, to make an application available even without Internet connection!

The main benefits are:

– the ability to browse offline – users can use the application being offline,

– the speed – resources from the cache are loaded faster,

– server load reduction – browser will download only the changed / updated resources from the server, when will be on-line.

The base to take advantage of these opportunities is the Manifest file.

The Manifest file of HTML5 Cache

We must define the attribute of ‘html’ element, in which we give the name of our Manifest file:

 <!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
  The content goes here ... 
</body>

</html>

The recommended extension for manifest file is “.appcache”.

Warning: the file must be served with the correct MIME type. In this case it’s: “text/cache-manifest” (the server must be configured to handle this type).

The Manifest file itself is a simple text file with appropriate content.

An example of HTML5 Cache Manifest file:

CACHE MANIFEST
/style.css
/logo.gif
/photo.png
/app.js
../something.css

The first line (CACHE MANIFEST section) is required.

CACHE MANIFEST – identifies resources that will be cached in the first download.

There are two additional sections:

NETWORK – resources listed here won’t be cached, and always will need network connection

FALLBACK – this section defines the “emergency” page if the requested page is not reachable

For example:

FALLBACK
login.php

or:

FALLBACK
/html/ /offline.html

In this case the offline.html file will be served instead of all the files from “html” directory, when downloading them from the network will be impossible.

Be careful

Well, when the file is cached, the browser will show cache even if you change the file, so we have to update also the manifest file.

Naturally, it is possible to operate at HTML5 Cache from the JavaScript code.

Example:


var appCache = window.applicationCache;
alert(appCache.status); // get status

// cache reload attempt
...
appCache.update();

Related resources

– basics and examples of using HTML5 cache in JavaScript:

http://www.html5rocks.com/en/tutorials/appcache/beginner/

– description in the “Dive into HTML5”:

http://diveintohtml5.info/offline.html

– W3C:

http://www.w3.org/TR/2011/WD-html5-20110525/offline.html

– HTML5 Cache in the context of web applications for mobile devices:

http://blogs.adobe.com/cantrell/archives/2011/11/building-an-offline-mobile-web-application.html

– resources from MDN, Opera …

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

https://dev.opera.com/articles/offline-applications-html5-appcache/

and Apple Developer Center.

Summary

The more we work with HTML5, the more we appreciate the opportunities offered. Some of them are a big leap forward in web programming.

greetings.appcache

Web and Mobile Software Developer, with years of experience. My biggest passions are programming, new technologies, e-commerce, as well sports, cars, and of course my family.

Facebook Twitter LinkedIn Google+ Skype Xing 

Share: Share on Facebook4Tweet about this on TwitterShare on Google+1Share on LinkedIn2Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
You can leave a response, or trackback from your own site.