How to use HTML5 in Application Cache

In this article I have described the Application Cache in HTML5
  • 2089

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.
© 2019 DotNetHeaven. All rights reserved.