9/12/13
As a Web application architect and developer, an increasing share of my efforts is being directed towards the preservation of functionality in times of network failures. This practice has become so ubiquitous that it even has a name: Offline Applications. Whereas the old desktop apps of the eighties were mostly stand-alone operations with a bit of network connectivity, today’s HTML5 Web apps are almost exclusively online, except when networks go down. In this age of up-to-99.999% up time, it’s hard to believe that connectivity would be an issue, but it is. Other factors, some as network congestion, can adversely affect performance to the point that it becomes scarcely better than offline. In my Build an Offline HTML5 Web Application article, I hinted at the role of the Manifest File in offline applications. In today’s follow-up, we’ll go through the steps required to equip a real life Web application to go offline if necessary.
The GoodFoodTalks.com Website
You may have noticed that a lot of restaurant sites use PDF format for their menus? Unfortunately, PDF format is not always very compatible with screen readers. GoodFoodTalks.com offers restaurant menus that are accessible to visually impaired individuals by employing HTML that is fully optimized for desktop and mobile device screen readers. Matt Wadsworth, acclaimed lute player, motorcycle daredevil, and owner of GoodFoodTalks.com asked me to help his users keep some of their favorite menus cached for offline retrieval. In particular, he was interested in having the main page automatically fallback to the cached version in the event of a network failure.
The Role of the AppCache
It turns out that this is exactly the type of situation that the AppCache – aka the Application Cache – was made for. The AppCache allows us to specify which files the browser should cache and make available to offline users. The app will load and work in a very similar – if not exactly the same – fashion as when online. Even pressing the refresh button behaves as usual while offline.
Using the AppCache for offline web activities provides four distinct advantages:
- Offline browsing – Depending on the size of your site, users can navigate some or all of your site when they’re offline.
- Speed – Cached resources are stored locally, so that they load faster.
- Reduced server load – The browser will only download resources from the server that have changed.
- No coding required! – The AppCache takes care of everything for you without the need for any coding, whether JavaScript, or any other programming language. All that’s required is the inclusion of a plaintext Manifest File.
More On the Manifest File
The Manifest File lists which files are required by your Web app. To make use of Application Caching, simply include the “manifest” attribute on the document’s HTML tag in every page of your application that requires it:
<html manifest="GoodFoodTalks.appcache"> ... </html>
A manifest needs the “CACHE MANIFEST” title at the top of the file and can have up to three sections: CACHE, NETWORK, and FALLBACK. The order of the sections doesn’t matter. Here is a description of each section:
- CACHE: This is the default section for entries. Files listed under this header (or immediately after the CACHE MANIFEST title) will be explicitly cached after they’re downloaded for the first time.
- NETWORK: Files listed in this section are resources that always require a connection to the server. Hence, all requests to these resources cause the browser to connect to the network, even if the user is offline. Wildcards are accepted.
- FALLBACK: An optional section specifying fallback pages if a resource is irretrievable. Entries are made up of two parts, the the URI of the online resource followed by the fallback. Both URIs must be relative and from the same server as the manifest file. Wildcards are permitted here as well, so one fallback resource may apply to many online ones.
Here then is the Cache Manifest for the GoodFoodTalks Offline Menu Viewer:
CACHE MANIFEST # 2013-09-11:v1 # Explicitly cached 'master entries'. CACHE: /favicon.ico images/gft-headlogo.png scripts/GoodFoodTalks.js scripts/jquery-1.6.4.js scripts/json2.js # Resources that require the user to be online. NETWORK: # resources to serve as fallbacks when online resources are unavailable # menu_manager.html will be served in place of all .html files FALLBACK: *.html /menu_manager.html
In the CACHE section, I included all of the accessory files required in order to view the offline page. These include, the site icon, as well as referenced images, scripts, and css stylesheets.
The FALLBACK section plays a vital role in serving up the offline app for any HTML page on the site. The menu_manager.html page contains functionality to retrieve cached menus using a combination of JSON and localStorage.
Under the CACHE MANIFEST title, you’ll notice a comment which contains a version number. The purpose of this entry is to trigger a refresh of the cached files whenever changes are made. Unfortunately, the AppCache doesn’t automatically refresh online resources when they’ve been updated. Rather, changes in the Cache Manifest are what trigger the refresh.
Conclusion
Today we learned how to configure a Web application to retain functionality in an offline setting. Next time, we’ll look at some strategies for testing your Offline Application, both locally and in a production environment.