(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.
Save yourself the trouble if you have to support IE6.
Make a branch so we can do whatever we want.
git checkout -b 'html5-app-cache'
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.
# add the following line for serving offline cache manifest AddType text/cache-manifest .manifest
Specific the path to manifest file in your web app.
<!DOCTYPE html> <html manifest="/cache.manifest"> <head> <!-- everything else -->
Write up the manifest itself, inside
Now fire up your app and it will not work. Be patient, we still have 2 minutes.
F12 to enter Chrome DevTools
Img: A quick way to know what we wanna cache
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.
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
Why 5 minutes? That’s because I had to wait for this.
- Using the application cache - HTML (HyperText Markup Language) | MDN
- A Beginner’s Guide to Using the Application Cache - HTML5 Rocks