HTML5 offline article

Home >> HTML5 offline >>

  HTML5 offline application manifest file.

Introduction
It's becoming increasingly important for web-based applications to be accessible offline. Yes, all browsers can cache pages and resources for long periods if told to do so, but the browser can kick individual items out of the cache at any point to make room for other things.

Using the cache interface gives your application three advantages:

Offline browsing:- Users can navigate your full site when they're offline
Speed:- Resources come straight from disk, no trip to the network.
Resilience:- If your site goes down for maintenance your users will get the offline experience

The Application Cache allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they're offline.

The cache manifest file

An offline web application revolves around a cache manifest file. What’s a manifest file? It’s a list of all of the resources that your web application might need to access while it’s disconnected from the network. In order to bootstrap the process of downloading and caching these resources, you need to point to the manifest file, using a manifest attribute on your html open tag (<html>)

<html manifest="cache.appcache">
<body>
...
</body>
</html>

Your cache manifest file can be located anywhere on your web server, but it must be served with the content type text/cache-manifest. If you are running an Apache-based web server, you can probably just put an AddType directive in the .htaccess file at the root of your web directory:

# Appcache manifest mime type 
AddType text/cache-manifest .appcache

Then make sure that the name of your cache manifest file ends with .appcache. If you use a different web server or a different configuration of Apache, consult your server’s documentation on controlling the Content-Type header.

CACHE MANIFEST

CACHE:

#css files
/root-folder/style.css
http://your-domain-name.com/root-folder/abc.css

NETWORK:
*

NOTE:- It's doesn't make any different either you use relative or absolute path like below

/root-folder/style.css
http://your-domain-name.com/root-folder/style.css

 

Write your comment now