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
Posted in 
Tags: 
