(2017-07-17) AppCache has been deprecated, see how to cache web pages using ServiceWorker in this post.
OK, let’s do this in 5 minutes to get you started with HTML5 app cache.
10 seconds
Save yourself the trouble if you have to support IE6.
30 seconds
Make a branch so we can do whatever we want.
git checkout -b 'html5-app-cache'
1 minute
Your server has to serve the manifest file in text/cache-manifest MIME type. Look it up how to setup this if you are not using Apache.
nano .htaccess
# add the following line for serving offline cache manifest
AddType text/cache-manifest .manifest
2 minutes
Specific the path to manifest file in your web app.
<!DOCTYPE html>
<html manifest="/cache.manifest">
<head>
<!-- everything else -->
3 minutes
touch cache.manifest
Write up the manifest itself, inside cache.manifest:
CACHE MANIFEST
Now fire up your app and it will not work. Be patient, we still have 2 minutes.
Tab F12 to enter Chrome DevTools
Img: A quick way to know what we wanna cache
4 minutes
Copy and paste the paths to whatever files we are supposed to cache from DevTools console warnings.
CACHE MANIFEST
CACHE:
/js/app.js
/js/angular/angular.min.js
/js/angular-resource/angular-resource.min.js
/js/angular-sanitize/angular-sanitize.min.js
/css/base.css
/css/animate.css
NETWORK:
*
Everything listed under CACHE will be cached, other stuff like Google fonts are loaded as usual.
5 minutes
Now we are done. It is always a good idea to cache your web app to optimize page load time. In particular, when your web app is an utility app intended to be usable offline. There are more to do with cache.manifest such as version-based caches, hooks to manifest loading… The references below explain better how those features work. So far, I only need to cache my Javascript and CSS files.
Why 5 minutes? That’s because I had to wait for this.
