Maciej A. Czyzewski Blog Talks About

Application cache in HTML5

Posted on

Often there is no time to retrieve packages again. It’s becoming increasingly important for web-based applications to be accessible offline.

Diagram

The cache manifest in HTML5 is a software storage feature which provides the ability to access a web application even without a network connection.

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 “standard”, your users will get the offline experience

Disadvantages:

  • Outdated - packages don’t resent automatically
  • Storage limit - between 5 MB to 10 MB

Referencing

To enable the application cache for an app, include the manifest attribute on the document’s html tag:

<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 config file:

AddType text/cache-manifest .appcache

Structure

The manifest is a separate file you link to via the manifest attribute on the html element. A simple manifest looks something like this:

CACHE MANIFEST
# 2014-01-01:v5

# Explicitly cached
CACHE:
favicon.ico
index.html
styles/main.css
scripts/main.js
images/logo.png

# Resources that require the user to be online
NETWORK:
*

Status

The window.applicationCache object is your programmatic access the browser’s app cache. It’s status property is useful for checking the current state of the cache:

var appCache = window.applicationCache;

// appCache.status

// UNCACHED     == 0
// IDLE         == 1
// CHECKING     == 2
// DOWNLOADING  == 3
// UPDATEREADY  == 4
// OBSOLETE     == 5

Jekyll

If you are using jekyll, you can do this things easily:

---
---
CACHE MANIFEST
# {{ site.time | date_to_xmlschema }}
# here, list of your files...