Docs: Add appcache manifest docs for offline support #1103
Description
Well I started reading about appcache last night and got a decent version working in my app. So I thought it'd be really cool if it was added to the angular material docs since it's a perfect application for offline support.
What is it?
AppCache is the acronym for Application Cache. As the name suggests AppCache is a technique for implementing offline HTML5 web applications.
For those of you who don't know what appcache is it's essentially a manifest file that tells the browser which files your app needs to run offline. As a side benefit when you are online your app will load files right from this cache instead of from the server.
Which browsers support it?
Essential most recent versions of chrome, firefox, safari and ie 10+. Which is pretty good since our target audience is developers so everyone should benefit from this.
http://caniuse.com/#feat=offline-apps
Why we need it
This would make viewing the docs offline a lot easier since if you currently wanted to do so you would have to clone the repo install a bunch of build tools then build and run the docs. Which is not very user friendly + it forces you to at least git clone ahead of time.
What I learned while adding it to my own app
- With angular you tend to have to make a "appcache loader" file which is just an html tag with the
manifestattribute- you need to do this because of the concept of
masterentries which basically add any page to the cache automatically if they include the manifest
- you need to do this because of the concept of
- You can only cache js files that are on the same domain(I haven't yet confirmed if they can be on a subdomain yet)
- html and css files can be on any domain
- The biggest problem with this is you must host angular and other common libraries if you want to display anything more then a basic html page when your user is offline. You may be able to get around this with some js though as there is a decent js api that comes with the appcache.
- You will probably need
NETWORK: *see why in the mdn docs below - You will want to be generating the manifest file when you end up deploying. This means it will need to be added to the build process. gulp-manifest may be helpful but I haven't tried it yet
Helpful links
- MDN Docs
- Creating offline html5 apps with appcache
- Explains the basics of an appcache manifest in a short guide
- Problems with appcache
chrome://appcache-internals/view your cached files/manifests(useful for debugging)
I'll add more information as I finish my implementation into my own app. However It shouldn't be too hard to add since the docs don't depend on a rest api.
As a side note not many doc projects are using this yet(but they all should) so it'd make angular-material look alot better.