CHAPTER 12 ■ CREATING OFFLINE WEB APPLICATIONS
Similarly, the internal page chrome://appcache-internals/ provides details about the contents of the different application caches stored on your system. It also provides a way to view the contents and remove these caches entirely as shown in Figure 12-2.
Figure 12-2. Viewing application cache entries in Chrome
Browser Support for HTML5 Offline Web Applications
For a complete overview of the current browser support, including mobile support, refer to http://caniuse.com and search for Offline Web Applications or Application Cache. If you have to support older browsers, it’s always a good idea to first see whether Application Cache is supported before you use the API. The section “Checking for Browser Support” later in this chapter will show you how you can programmatically check for browser support.
Using the HTML5 Application Cache API
In this section, we will explore the specifics of how you can use the Offline Web Applications API.
Checking for Browser Support
Before you try to use the Offline Web Applications API, it is a good idea to check for browser support. Listing 12-1 shows how you can do that.
Listing 12-1. Checking Browser Support for the Offline Web Applications API
if(window.applicationCache) {
// this browser supports offline applications
}
297
CHAPTER 12 ■ CREATING OFFLINE WEB APPLICATIONS
Creating a Simple Offline Application
Let’s say that you want to create a one-page application that consists of an HTML document, a style sheet, and a JavaScript file. To add offline support to your HTML5 application, you include a manifest attribute on the html element as shown in the Listing 12-2.
Listing 12-2. The manifest Attribute on the HTML Element
<!DOCTYPE html>
<html manifest="application.appcache">
.
.
.
</html>
Alongside the HTML document, provide a manifest file with the *.appcache extension) specifying which resources to cache. Listing 12-3 shows the contents of an example cache manifest file.
Listing 12-3. Contents of an Example Cache Manifest File
CACHE MANIFEST example.html example.js example.css example.gif
Going Offline
To make applications aware of intermittent connectivity, there are additional events exposed by HTML5 browsers. Your applications may have different modes for online and offline behavior. Some additions to the window.navigator object make that easier. First, navigator.onLine is a Boolean property that indicates whether the browser believes it is online. Of course, a true value of onLine is not a definite assurance that the servers that your web application must communicate with are reachable from the user’s machine. On the other hand, a false value means the browser will not even attempt to connect out over the network. Listing 12-4 shows how you can check to see if your page is online or offline.
Listing 12-4. Checking Online Status
// When the page loads, set the status to online or offline function loadDemo() {
if (navigator.onLine) { log("Online");
} else { log("Offline");
}
}
// Now add event listeners to notify a change in online status window.addEventListener("online", function(e) {
log("Online"); }, true);
298
CHAPTER 12 ■ CREATING OFFLINE WEB APPLICATIONS
window.addEventListener("offline", function(e) { log("Offline");
}, true);
Manifest Files
Offline applications consist of a manifest listing one or more resources that browser will cache for offline use. Manifest files have the MIME type text/cache-manifest. The SimpleHTTPServer module in the Python standard library will serve files with the .manifest extension with the header Content-type: text/cache-manifest. To configure settings, open the file PYTHON_HOME/Lib/mimetypes.py, and add the following line:
'.appcache' |
: 'text/cache-manifest manifest', |
Other web servers may require additional configuration. For example, for Apache HTTP Server, you can update the mime.types file in the conf folder by adding the following line:
text/cache-manifest appcache
If you are using Microsoft IIS, in your website’s home, double-click the MIME Types icon, then add the .appcache extension with MIME type text/cache-manifest in the Add MIME Type dialog.
The manifest syntax is simple line separated text that starts with CACHE MANIFEST (as the first line). Lines can end in CR, LF, or CRLF—the format is flexible—but the text must be UTF-8 encoded, which is the typical output for most text editors. Comments begin with the hash symbol and must be on their own lines; you cannot append a comment to other non-comment lines in the file.
Listing 12-5. Example Manifest File with All Possible Sections
CACHE MANIFEST
# files to cache about.html html5.css index.html happy-trails-rc.gif lake-tahoe.JPG
#do not cache signup page NETWORK
signup.html
FALLBACK
signup.html offline.html /app/ajax/ default.html
Let’s look at the different sections.
If no CACHE: heading is specified, the files that are listed will be treated as files to be cached (caching is the default behavior). The following simple manifest specifies that three files (index.html, application.js, and style.css) must be cached:
CACHE MANIFEST index.html application.js
299
CHAPTER 12 ■ CREATING OFFLINE WEB APPLICATIONS
style.css
Similarly, the following section would do the same (you can use the same CACHE, NETWORK, and FALLBACK headers multiple times in a manifest file if you want to):
CACHE MANIFEST
# Cache section CACHE: Index.html application.js style.css
By listing a file in the CACHE section, you instruct the browser to serve the file from the application cache, even if the application is online. It is unnecessary to specify the application's main HTML resource. The HTML document that initially pointed to the manifest file is implicitly included (this is called a Master entry). However, if you want to cache multiple HTML documents or if you would like multiple HTML documents to act as possible entry points for the cacheable application, they should all be explicitly listed in the cache manifest file.
FALLBACK entries allow you to give alternate paths to replace resources that cannot be fetched. The manifest in Listing 12-5 would cause requests to /app/ajax/ or subpaths beginning with /app/ajax/ to fall back to default.html when /app/ajax/* is unreachable.
NETWORK specifies resources that are always fetched using the network. The difference with simply omitting these files from the manifest is that master entries are cached without being explicitly listed in the manifest file. To ensure that the application requests the file from the server even if the cached resource is cached in the application cache, you can place that file in the NETWORK: section.
The ApplicationCache API
The ApplicationCache API is an interface for working with the application cache. A new window.applicationCache object fires several events related to the state of the cache. The object has a numerical property, window.applicationCache.status, which indicates the state of the cache. The six states a cache can have are shown in Table 12-1.
Table 12-1. The Six Cache States
Numerical Cache Status
Property
0UNCACHED
1IDLE
2CHECKING
3DOWNLOADING
4UPDATEREADY
5OBSOLETE
Most pages on the Web today do not specify cache manifests and are uncached. Idle is the typical state for an application with a cache manifest. An application in the idle state has all its resources stored
300