WEBMAK!

HTML5 AppCache Manifest/ACM

Overview: The HTML5 AppCache manifest or ACM file is simply a normal text file with a neccessary MIME-Type of "text/cache-manifest". The AppCache have 3 methods to control the cache of your page. The file extension of this file must be '.appcache' (recommended) or, '.manifest' as required by the browsers and the servers.

This file is served to the clients browser by putting an attribute named "manifest" and the value pair of your ACM File inside the <html> tag.

See an Example Below:

CACHE MANIFEST

# 09-09-2013 v1.0.0

CACHE:
/page.html
/style.css
/image.png
/code.js
/cached.html
/freeAccess.html
http://outside.url/logo.png

NETWORK:
/login.php
/change.php
/signup.html
*

FALLBACK:
/folder/ /cached.html
/cpanel/ /freeAccess.html

# End Of AppCache

Putting the code: You must put the html manifest attribute in all of your pages if you want to control the cache of all the pages you have and the appcache file must be in the root directory of your site. Lets see an example to put this:

<!DOCTYPE html>
<html manifest="global.appcache">
-----------------------------------
</html>

ACM File Overview: You may seen the example of a manifest or ACM File at the top of this page, Now I'm gonna explain its syntax components and its methods:
The ACM File is consists of three methods, includes 'CACHE', 'NETWORK', and 'FALLBACK' which are explained below.
The first necessary line of the ACM File can be assumed as the DOCTYPE declaration, which is "CACHE MANIFEST" , The three methods of this file can be assumed as the syntax or the attributes of this file, The URL locations are the values for it and the line with a '#' before it is a comment and will be ignored accept the version line.

CACHE MANIFEST	#(DOCTYPE Declaration)
# 2013-09-09 v1.0.0	#(Comment for updating the cache)
CACHE: /file.extension	#(Cache Method) #(File can be cached)
NETWORK: *	#(No Cache method) #(All other files can never be cached)
FALLBACK: /main.html /cache.html	#(Fall-Back/Optional Method) #(When cant browse first value, second executed.)
#End of The ACM File with a Comment	# A Normal Comment Line

The Three Methods: Well you are already familiar with the ACM File if you have read the above paragraph. Now lets take a look in its methods,

CACHE: This method tells the browsers that the provided url values can be cached for the offline browsing. Users can access these file without internet connection. Be sure on what to cache and what to not because the cache will not be refreshed or updated till the user not clears its browser's cache. And there is some limits of 5MB per site etc. on some browsers. You'll learn about the refreshing or updating the browsers cache later below.

NETWORK: This method tells the browsers that the given url values can never be cached and the user can not access the file or the page without internet connection. The asterisk value (*) can be used here to specify that all the other files and documents accept the values entered in CACHE and FALLBACK methods, needs the internet connection to be used.

FALLBACK: The fallback method is used to specify that the given pair of url values can be used instead of each other. The first url value or the path needs the internet connection but in case, when there is no internet connection, the second url value is used to be browsed without internet connection as a cached version of your page.

Updating The Cache: The Cache Updating is very important because when you will not notify or update the browsers cache, Your user will continue browsing the old version, non updated site. You must notify the browsers that the version of your page or new update is available, This time the second comment line to which describes the cache version is useful. You can execute the version of cache the that user is using and upadate it or notify the user as well as using a simple Java Script. The JavaScript example is given below:

function logEvent(event) {
console.log(event.type);
}
window.applicationCache.addEventListener('checking',logEvent,false);
window.applicationCache.addEventListener('noupdate',logEvent,false);
window.applicationCache.addEventListener('downloading',logEvent,false);
window.applicationCache.addEventListener('cached',logEvent,false);
window.applicationCache.addEventListener('updateready',logEvent,false);
window.applicationCache.addEventListener('obsolete',logEvent,false);
window.applicationCache.addEventListener('error',logEvent,false);

WEBMAK!

HTML5 AppCache Manifest/ACM

Top 5 Popular Articles: