Motyar

@motyar

Freelance Web Developer

Static Web Hosting, made easy

Sep 11, 2011

Offline Web Applications Using HTML5 Application Cache

HTML5 provides a way to use application even when you are offline, developers can list the files that are required for the Web application to work offline and browser keep a copy of that files using its caching mechanisms.

A manifest file is a text file contains the file list. A web browser will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the local copies up to date as they change. When user try to access the web application without a network connection, web browser will automatically switch over to the local copies instead.

To enable the application cache for an app, include the manifest attribute on the document's html tag, like this


<html manifest="example.appcache">
  ...
</html>

A manifest file must be served with the mime-type text/cache-manifest. You may need to add a custom file type to your web server or .htaccess configuration.

For example, to serve this mime-type in Apache, add this line to your .htaccess file:

AddType text/cache-manifest .appcache

A simple manifest may look something like this:


CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
js/app.js

But a manifest can have three distinct sections: CACHE, NETWORK, and FALLBACK.

CACHE:
Files listed under this will be explicitly cached after they're downloaded for the first time.

NETWORK:
Files listed under this section are resources that require a connection to the server.

FALLBACK:
An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback.

Here is a more complex example:

CACHE MANIFEST

# Explicitly cached entries.
CACHE:
/favicon.ico
index.html

# Resources that require the user to be online.
NETWORK:
login.php
/api

# main.html will be served if main.php is inaccessible
FALLBACK:
/main.php /main.html

Labels: , , ,




By :