So you have a fancy new mobile web app, it loads OK, but wouldn’t it be good if the user was in 3G they didn’t have to suffer longer load times? Or waste their bandwidth each time they loaded your large JavaScript? HTML 5 thought this needed rectifying, so in rolls the Web Application Cache.
The cache identifies files that need to be stored on the users device to use in subsequent visits to the site. Funny, you may say, that this is what the cache that’s built in your browser is supposed to do, right? Well… yeah, it doesn’t quite work that way. The benefit of HTML5 application caching is that you explicitly tell the browser to store bits and pieces, and it remembers it, seemingly forever. It also doesn’t even attempt to download those files again, unless either the cache changes or you tell it to.
Get a Home has just enabled this offline application cache support, so I’ll go through the steps I went through to add it in.
First thing’s first, figure out what you want to cache. When you want to cache a webpage, you don’t automatically get a free pass to cache everything on a webpage. As soon as you add support to your page, your site will break. That is unless you set it up correctly.
You then need a cache manifest. This can be any extension, it seems that some use .appcache and others use .manifest. It doesn’t matter, but what does matter is that it must be sent as text/cache-manifest, there is no way around it and if you use a shared host that doesn’t let you change MIME types then your SOL.
The file starts with the line CACHE MANIFEST, and then a list of addresses. These do not have to be on your server, you can provide a full URL to cache or just a relative path. There can only be one per line, and you don’t get a wildcard, nor can you specify a folder to fully download. As an example,
CACHE MANIFEST
style/style.css
script/getahome.js
image/logo.png
image/load-big.gif
image/logo-black.png
You do not need to include the page that is calling it. The page that you set the offline manifest on is treated as the master page and will be included in the cache regardless.
Let’s say you called this file offline.manifest. To add your cache, just add the manifest attribute to your html element, like,
<html manifest="offline.manifest">
Visit your site and, presto! Hey wait… everything’s broke!
Here’s the fun part, the browser will only ever load things explicitly set in your manifest file, unless you add a handy NETWORK section. This section will specify what to give access to no matter. In this section, you can specify folders. But you can also give it a wildcard to mean “anything and everything that isn’t specified in this manifest can be downloaded.” So our example,
CACHE MANIFEST
style/style.css
script/getahome.js
image/logo.png
image/load-big.gif
image/logo-black.png
NETWORK:
*
Now visit your site and, presto! It’s all working again! Kill your internet connection, and try, you’ll see your site still loads.
How do you get it to update? Simple! Add a comment below the 1st line, these start with a #. Change this every time, as the web browser will check byte-for-byte any changes to the manifest file when you go to the page (online). If it’s different, it’ll redownload everything again.
CACHE MANIFEST
# rev 20110531
style/style.css
script/getahome.js
Chrome’s inspector provides some good debugging information for offline applications. Hit Ctrl+Shift+I, and reload your page to see what it’s doing, including what events are fired and where its manifest is coming from. If you go into the Resources section, you can see what files have been downloaded.
If you wish to remove your application cache, Chrome provides a way, but you have to delve a little deeper. In your address bar, enter chrome://appcache-internals to get a list of apps that have been installed, and you can delete them individually.
One thing you may have noticed is that there is a little notification if the cache is set up on Get a Home. This is done by using one of the caching events, there are a few of them, but in this example, I’ll just use the cached event.
var cache = window.applicationCache;
if (cache) {
cache.addEventLister("cached", function() { alert("Cached!") }, false);
}
That little snippet will throw up an alert saying that the site was successfully cached when it’s completed.
Note that this is best for single page JavaScript applications, not multi-page or those requiring lots of dynamic resources to function properly. You can’t stick an offline manifest on every page of your static site, as it’s likely it won’t function as you expect it to.
Now, one more gotcha before I finish. iOS. You’d think that Apple wouldn’t break something like a simple web view, but you would be wrong. If your application is Web App Compatible, the home screen version of your app won’t use the offline cache. It could be a bug, however it has been around since iOS 4.2, and iOS 4.3 doesn’t even allow web apps to use the speedier Nitro JavaScript engine.
Ironically, one of the best references for the application cache I found was from the Safari Developers Website. No word in there as to how to get the application cache working on home screen apps!
HTML Rocks also has a tutorial on application caching.