The Application Cache is an HTML5 feature that allows you to cache a part or all of your website locally. This allows, say mobile users, the ability to use your site even if their wireless connection quits.
The File System API might be a better choice for you depending on your needs and goals. There is even a file system polyfill for older browsers.
Note: I wrote this back in 2012 or so; therefore this information is a bit old. You’ve been warned...
See Apple’s tutorial on Web Applications.
HTML5Doctor has a great article on the App Cache.
Application Cache is a Douchebag goes into the pitfalls and nuances; very good article.
This information came from the excellent article A Beginner’s Guide to Using the Application Cache.
Allows for a whole, or part, of a website to be cache locally for offline browsing/use.
<html lang="en" manifest="offline.appcache">.htaccess with the following line inside it. AddType text/cache-manifest .appcache Alternatively, your web host may have an on-line form for adding mime-types.CACHE MANIFEST
# 2010-06-18:v2
# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com
# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html
Lines starting with a ‘#’ are comment lines, but can also serve another purpose. An application's cache is only updated when its manifest file changes. So for example, if you edit an image resource or change a javascript function, those changes will not be re-cached. You must modify the manifest file itself to inform the browser to refresh cached files. Creating a comment line with a generated version number, hash of your files, or timestamp is one way to ensure users have the latest version of your software. You can also programmatically update the cache once a new version.
A manifest can have three distinct sections: CACHE, NETWORK, and FALLBACK.
CACHE:
This is the default section for entries. Files listed under this header (or immediately after the CACHE MANIFEST) will be explicitly cached after they’re downloaded for the first time. Note: The HTML file that references your manifest file is automatically cached. There's no need to include it in your manifest, however it is encouraged to do so.
NETWORK:
Files listed under this section are white-listed resources that require a connection to the server. All requests to these resources bypass the cache, even if the user is offline. Wildcards may be used.
FALLBACK:
An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.
Note: These sections can be listed in any order and each section can appear more than one in a single manifest.
In Safari, check the error console or look in the Application Cache section under the Resources tab. You can also put this JavaScript code on your page to check when/if events are firing.
function logEvent(event) {
console.log(event.type);
}
window.applicationCache.addEventListener('checking', logEvent, false);
window.applicationCache.addEventListener('noupdate', logEvent, false);
window.applicationCache.addEventListener('downloading', logEvent, false);
window.applicationCache.addEventListener('cached', logEvent, false);
window.applicationCache.addEventListener('updateready', logEvent, false);
window.applicationCache.addEventListener('obsolete', logEvent, false);
window.applicationCache.addEventListener('error', logEvent, false);
Change the timestamp/version comment after each modification to ensure the cache is rebuilt. Also, I should look into whether or not it is possible to force reloading the cache with the swapCache() function when a GET query is added to the page (e.g. myPage.html?swap=true)
PITFALL #1 : When a file is available in the cache and on the remote HTTP server, it will always be retrieved from the cache! You can force the cache to update itself by modifying the manifest.appcache file, or via programmatic methods.
PITFALL #2: If one file cannot be retrieved and cached, zero files will be updated in the cache. There is not "partial update" possible. A best practice is to always validate you manifest file using a tool such as: