Offline storage is one of the most anticipated features of HTML5. With users browsing to your pages and accessing your Web apps on various devices, often with limited connectivity, the Application Cache utility could prove to be a serious advantage. With HTML5 App Cache, you can instruct supporting browsers to cache copies of certain files. Once these files have been downloaded they will then be accessible offline. In this tutorial we will work through a simple example of caching a page, including an image and external JavaScript file.
Create an HTML5 Page
Create your HTML5 page using the following initial outline:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Lovely Picture</h1>
<canvas id="picCanvas" width="450" height="350"></canvas>
</body>
</html>The page is going to include a drawing within the canvas element, which will in turn include an image. The canvas element at the moment simply specifies dimensions, we will use JavaScript in a separate file to draw within it, referencing it through the ID attribute.
Create a JavaScript File
So that we can test the App Cache function, let’s create a separate JavaScript file to work with the page. Create a new file and save it “picdraw_functions.js”.
Enter the following function:
function drawPic(picSRC, canvasElem) {
//get the canvas using passed element ID
var canv = document.getElementById(canvasElem);
//get the context
var cont = canv.getContext("2d");
//define a gradient to spread across the canvas diagonally
var grad = cont.createLinearGradient(0, 0, 450, 350);
//define two colors
grad.addColorStop(0, "#000033");
grad.addColorStop(1, "#003300");
//set the gradient fill
cont.fillStyle = grad;
//fill the entire canvas with the gradient
cont.fillRect(0, 0, 450, 350);
//create the image
var picImg = new Image();
//draw the image so that it is centered
picImg.onload = function(){ cont.drawImage(picImg, 25, 25); };
//set the passed image source
picImg.src=picSRC;
}This code is simply going to draw in the canvas element, so don’t worry too much about the detail. The function receives two parameters, one representing the canvas element ID attribute and one representing an image file to include in the drawing. The final canvas drawing will be the imported image file displayed against a background with a gradient fill. We are using this function to demonstrate caching the script and the image file.
Include JavaScript in the Page
Add a link to the JavaScript file in the page head section as follows:
<script type="text/javascript" src="picdraw_functions.js"></script>Now call the function by adding the following before the closing page body tag:
<script type="text/javascript">
drawPic("mypicture.jpg", "picCanvas");
</script>Notice that the script section here passes the name of the image file to display as part of the drawing and the ID of the canvas element to draw within. You can of course alter the image filename to suit an image file you want to use with your own page. If you do use your own image file you may need to alter the dimensions – the code in the HTML and JavaScript file is designed to display an image 400px wide and 300px high in the center of the canvas.
Create the Manifest File
Create a new file and save it with the name “picdraw.appcache”. This is going to be your Manifest file for the page. Inside the file, you can list which items you want the browser to cache for offline use. Enter the following code:
CACHE MANIFEST
your_page.html
picdraw_functions.js
mypicture.jpgAlter the HTML file to suit the name you gave your own page and the image filename to suit your own image file. The Manifest can optionally include a “NETWORK” section to indicate files that you do not want the browser to cache, and a “FALLBACK” section for providing alternatives to files that are not available offline.
Serve the Manifest MIME-Type
For HTML5 App Cache to function correctly, you must configure your server to ensure it uses the appropriate MIME-Type for your Manifest file. The process for this depends on your Web server, but for Apache servers you can simply include the following line in your “.htaccess” file:
AddType text/cache-manifest .appcacheThis instructs the server to treat files with “.appcache” extension as Cache Manifest type. For other servers refer to your Web host or control panel.
Indicate the Manifest File
Finally, you need to indicate the name and location of your Manifest file within the HTML page markup. Alter your opening HTML tag as follows:
<html manifest="picdraw.appcache">This must match the name of your App Cache Manifest file.
Upload and Test
Save your files and upload them to your server, remembering to include the “.htaccess” file, the Manifest file, the Web page, the JavaScript file and the image. Browse to the page in your Web browser. Depending on which browser you are using, you may be prompted to grant permission for the site to store data for offline use. If so, grant permission. To test the cache function, disconnect your computer from the Internet and attempt to load the page again. You should see the content of the page including the JavaScript-powered canvas element with gradient and image, meaning that all three files have been saved to the App Cache.
Conclusion
The possibilities for Web apps using the HTML5 Application Cache utility are considerable. However, the reality at present is a low level of support, with Internet Explorer currently not offering any App Cache support at all. You may also find some unpredictable behavior if you alter pages you are using App Cache for, as the browser will use the cached version by default. If you alter the Manifest file or the user clears their browser cache, the page content will be refreshed.
