How to use HTML5 in Application Cache
In this article I have described the Application Cache in HTML5
INTRODUCTION
HTML5 Application cache increasingly important for web-based applications to be accessible offline. Yes, all browsers have caching mechanisms, but they're unreliable and don't always work as you might expect. This is commonly known as the HTML5 App cache, and is supported by most major browsers.
Features
- An administrator interface for determining what paths should be cached.
- Built in support for offline lazy loading, where any visited pages are automatically cached for offline access.
- Automatic cache manifest validation.
Browser Support
| Browser |
Support |
| Internet Explorer v8+ |
Yes |
| FireFox v3.5+ |
Yes |
| Google Chrome v4+ |
Yes |
| Safari v4+ |
Yes |
| Opera v10.5+ |
Yes |
Note: Internet Explorer 7 and earlier versions, do not support Application Cache.
HTML5 Cache Manifest Example
|
<!DOCTYPE HTML>
<html manifest="demo.manifest">
<body>
the document is here..............
</body>
</html>
|
Another Example
|
<!DOCTYPE html>
<html manifest="demo.manifest">
<script type="text/javascript">
var lStorage;
function init()
{
if (window.localStorage)
{
lStorage = window.localStorage;
if (typeof lStorage.score == 'undefined')
lStorage.score = 0;
document.getElementById('score').innerHTML = lStorage.score;
}
}
function save()
{
if (lStorage)
{
lStorage.score = getGameScore();
}
}
</script>
<body onload="init();">
<p>
last Game score was: <span id="score">last score insert in init()</span>
</p>
</body>
</html>
|
Updating the Cache
The user clears the browser's cache.
The manifest file is modified.
The application cache is programmatically updated.
Structure of a manifest file in HTML5
This file resides on the server and dictates which files should be stored client-side in the browser's AppCache.
A simple manifest look something like this.
- CACHE MANIFEST
- index.html
- stylesheet.css
- images/Image.png
- scripts/main.js
The Manifest File
- CACHE : This is the default section for entries. Files listed under this header will be explicitly cached after they're downloaded for the first time.
- FALLBACK : What to do when an offline user attempts to access an uncached file.
- NETWORK : Files listed under this section are white-listed resources that require a connection to the server.