HTML5 AppCache
Application Cache
- MDN
- You can easily run into tricky issues with appcache vs HTTP caching/expiry
- IE 10+. Firefox gives a user prompt when it's used. Chrome doesn't.
<!DOCTYPE html> <html manifest="html5offline.manifest">
- The manifest file is a text list of absolute or relative URLs (optional sections are NETWORK and FALLBACK).
- The manifest must be served with text/cache-manifest MIME type.
- The referring page is implicitly in the manifest (you can have "lazy" caching).
CACHE MANIFEST # version 1.0 - 2012-09-09 html5offline.html style.css utilities.js # Always try the network, never cache NETWORK: * # If [left] unavailable, use [right] FALLBACK: / html5offline.html
You can only change cached items by changing the manifest. Best practice is to use a version comment line
window.applicationCache fires various events:
var appCache = window.applicationCache;
if (appCache) {
if (appCache.status == appCache.UNCACHED) {
document.getElementById("log").innerHTML = "Not cached";
}
appCache.addEventListener('noupdate', function() {
document.getElementById("log").innerHTML = "Loaded from cache";
});
appCache.addEventListener('updateready', function() {
document.getElementById("log").innerHTML = "Loaded from web and cached";
});
}