Skip to content

Instantly share code, notes, and snippets.

@xdmorgan
Created August 12, 2013 14:25
Show Gist options
  • Save xdmorgan/6211262 to your computer and use it in GitHub Desktop.
Save xdmorgan/6211262 to your computer and use it in GitHub Desktop.
Introduction to the Cache Manifest. (WIP)

#HTML5 Cache Manifest

###Getting Started

Start by adding the cache attribute to your opening html tag <html cache="somefile.manifest">.

####Examples (Dev)

In this first example we're going to be using a dev version of the cache manifest where we will specify that nothing is cached. For examples of a production cache manifest see below.

<html cache="caching/dev.manifest"> 

Note: You may need to add the following to your .htaccess

AddType text/cache-manifest .manifest

An example cache manifest replete with comments that tell you everything you need to know. [1]

CACHE MANIFEST
# the above line is required

# this is a comment
# there can be as many of these anywhere in the file
# they are all ignored
  # comments can have spaces before them
  # but must be alone on the line

# blank lines are ignored too

# these are files that need to be cached they can either be listed
# first, or a "CACHE:" header could be put before them, as is done
# lower down.
images/sound-icon.png
images/background.png
# note that each file has to be put on its own line

# here is a file for the online whitelist -- it isn't cached, and
# references to this file will bypass the cache, always hitting the
# network (or trying to, if the user is offline).
NETWORK:
comm.cgi

# here is another set of files to cache, this time just the CSS file.
CACHE:
style/default.css

A barebones cache manifest with caching of everything disabled.

CACHE MANIFEST

# disable all of the things
NETWORK:
*

####Examples (Production)

The following example is more like what a production version of your appcache would look like. A good practice is to enter in a comment with a version number and increase it every time you update the file (see next example).

CACHE MANIFEST
 
CACHE:
/about.html
/portfolio.html
/portfolio_gallery/image_1.jpg
/portfolio_gallery/image_2.jpg
/info.html
/style.css
/main.js
/jquery.min.js
 
FALLBACK:
/contact.html /offline.html
/comments.html /offline.html
 
NETWORK:
*

An important thing to remember is that your resources will only be cached once. They will not get cached when you update them, only when you change the manifest. A good practice is to enter in a comment with a version number and increase it every time you update the file:

CACHE MANIFEST
 
# version 1
 
CACHE:
...

####References:

  1. http://www.w3.org/TR/html5/browsers.html#manifests
  2. http://www.html5rocks.com/en/tutorials/appcache/beginner/
  3. http://www.html5rocks.com/en/tutorials/appcache/beginner/
  4. http://net.tutsplus.com/tutorials/html-css-techniques/real-world-off-line-data-storage/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment