Although there are plenty of exciting features within HTML5 that don't explicitly help our responsive quest (the Geolocation API, for example), Offline Web applications potentially could. As we're aware of the growing number of mobile users likely to be accessing our sites, how about we provide a means for them to view our content without even being connected to the Internet? The HTML5 Offline Web applications feature provides this possibility.
Such functionality is of most obvious use to web applications (funnily enough; wonder how they thought up the title). Imagine an online note-taking web application. A user may be halfway through completing a note when their cell phone connection drops. With HTML5 Offline Web applications, they would be able to continue writing the note whilst offline and the data could be sent once a connection is later available.
What's great about the HTML5 Offline Web applications tools is that they are too easy to set up and use. Here, we are going to use them in a basic way—to create an offline version of our site. That means that if users want to look at our site while they don't have a network connection, they can.
Offline Web applications work by each page that needs to be used offline, pointing to a text file known as a .manifest file. This file lists all the resources (HTML, images, JavaScript, and so on) that are needed by the page should it be offline. An Offline Web application enabled browser (Firefox 3+, Chrome 4+, Safari 4+, Opera 10.6+, iOS 3.2+, Opera Mobile 11+, Android 2.1+, Internet Explorer 10+) reads the .manifest file, downloads the resources listed, and caches them locally should the connection be dropped. Simple, eh? Let's do this…
In the opening HTML tag, we point to a .manifest file:
<html lang="en" manifest="/offline.manifest">
You can call this file anything you want but it is recommended that the file extension used is .manifest.
Tip
You must add the manifest="/offline.manifest" attribute to the HTML tag of every page you want to be available offline.
If your web server runs on Apache, you'll probably need to amend the .htaccess file with the following line:
AddType text/cache-manifest .manifest
This will allow the file to have the correct MIME type, which is text/cache-manifest.
While we're in the .htaccess file, also add the following:
<Files offline.manifest> ExpiresActive On ExpiresDefault "access" </Files>
Adding the preceding lines of code, stops the browser from caching the cache. Yes, you read that right. As the offline.manifest file is a static file, by default the browser will cache the offline.manifest file. So, this tells the server to tell the browser not to!
Now we need to write the offline.manifest file. This will instruct the browser about which files to make available offline. Here's the content of the offline.manifest file for the And the winner isn't... site:
CACHE MANIFEST #v1 CACHE: basic_page_layout_ch4.html css/main.css img/atwiNavBg.png img/kingHong.jpg img/midnightRun.jpg img/moulinRouge.jpg img/oscar.png img/wyattEarp.jpg img/buntingSlice3Invert.png img/buntingSlice3.png NETWORK: * FALLBACK: / /offline.html
The manifest file must begin with CACHE MANIFEST. The next line is merely a comment, stating the version number of the manifest file. More on that shortly.
The CACHE: section lists the files that we need for offline use. These should be relative to the offline.manifest file, so paths may need to be changed depending upon the resources that need caching. It's also possible to use absolute URLs if needed.
The NETWORK: section lists any resources that should not be cached. Think of it as an "online whitelist". Whatever is listed here will always by-pass the cache if a network connection is available. If you want to make your site content available where a network is available (rather than only looking in the offline cache), the * character allows it. It's known as the online
whitelist
wildcard
flag.
The FALLBACK: section uses the / character to define a URL pattern. It basically asks "is this page in the cache?" If it finds the page there, great, it displays it. If not, it shows the user the file specified—offline.html.
Depending on the circumstances, there's an even easier way of setting an offline.manifest file up. Any page that points to an offline manifest file (remember that we do this by adding manifest="/offline.manifest" in our opening <html> tag) gets automatically added to the cache when a user visits it. This technique will add every page on your site that a user visits to their cache so they can view it again offline. Here's what the manifest should look like:
CACHE MANIFEST # Cache Manifest v1 FALLBACK: / /offline.html NETWORK: *
One point of note when opting for this technique is that just the HTML of the page that is visited will be downloaded and cached. Not the images/JavaScript and other resources it may contain and link to. If these are essential, specify them in a CACHE: section as already described earlier in the Understanding the manifest file section.
When you make changes to your site or any of its resources, you must change the offline.manifest file somehow and re-upload it. This will enable the server to provide the new file to the browser, which will then get the new versions of the files and kick off the offline process again. I follow Nick Pilgrim's example (from the excellent Dive into HTML5) and add a comment to the top of the offline.manifest file that I increment with each change:
# Cache Manifest v1
Now, it's time to test our handiwork. Visit the page in an Offline Web application capable browser. Some browsers will warn about offline mode (Firefox for example—note the top bar) whilst Chrome makes no mention of it:
Now, pull the plug (or you know, switch off WiFi—that just didn't sound as dramatic as "pull the plug") and refresh the browser. Hopefully, the page will refresh as if connected – only it isn't.
When I have problems getting sites to work correctly in Offline mode I tend to use Chrome to troubleshoot. The built-in Developer tools have a handy Console section (access it by clicking the spanner logo to the right of the address bar and then go to Tools | Developer tools and click the Console tab) that flags up success or failure of the offline cache and often points out what you're doing wrong. In my experience, it's usually path issues; for example, not pointing my pages to the correct location of the manifest file.
For the full specification of the Offline Web applications, head over to the following URL: