Return to Snippet

Revision: 50181
at August 14, 2011 10:17 by FatFolderDesigner


Initial Code
<!-- The manifest added to the opening html tag -->
<html lang="en" manifest="cache.appcache">


<!-- The line to add to the htaccess file -->
AddType text/cache-manifest .appcache

<!-- The contents of the cache.appcache file -->
CACHE MANIFEST

NETWORK:
http://*

CACHE:
# list of every file to cache
index.html
otherpage.html
images/image1.jpg
images/image2.jps
# note that you can't like to remote ssl served files like this one except in chrome
https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

FALLBACK:
# link of fallback files, in the format "original fallback"
otherpage.html offline.html
# for a catch all, use a simple slash like this
/ offline.html

Initial URL
http://fatfolderdesign.com/295/html5/making-offline-sitesapplications

Initial Description
The link has a full explanation with more detail about how this all works, as well as an example of it in action. This is just going to be the short-short version. If you have any questions check that out, if you still have questions then leave a comment and I'll help you as best I can.

First we need to define a cache manifest, to do that you simple need to add a cache manifest item to your initial HTML tag. The proper extensions is .appcache, check the first section of the source to see an example.

Then, if the server isn't set up to support the .appcache file we need to add a line to out .htaccess file, this is important because it must be servered with the proper header. See the second section for the line to add to the htaccess file.

The we need to add the files to be cached to the appcache, there is a more complete example at the link, this is just the basic format. It's in the third section below.

If you have any questions or problems implementing leave a comment and I'll help you if I can.

Initial Title
Offline Sites in HTML5

Initial Tags
html5

Initial Language
HTML