HTML and CSS Reference
In-Depth Information
Offline Web Applications
We have now created a web application that is capable of storing its content in the browser,
but unlike a traditional desktop application, this application is still dependent on an Internet
connection to load the HTML, CSS and JavaScript resources.
If we are running the Web Server locally this is not an issue, since accessing localhost does
not rely on an Internet connection, but obviously a real application would be hosted re-
motely, and it is sometimes desirable to allow the user to continue using the web application
even when disconnected from the Internet.
In this chapter we will write functionality to store the application resources on the client
so that after the first time the document is loaded, the client is no longer dependent on an
Internet connection to serve the web page. This will be achieved through another HTML5
specification called the Application Cache.
The Application Cache specification allows you to specify a set of resources that should be
stored on the client. Once these resources are persisted on the client, the client will not at-
tempt to access these resources from the server on future page loads: it will instead use the
versions in the client side Application Cache.
This functionality may sound similar to the caching functionality that browsers have natively
supported for years. Browsers typically cache any resources that are downloaded, and then
use these versions the next time they are requested unless they have changed.
This form of caching is not intended to support offline web pages however, since this cach-
ing functionality still relies on an Internet connection to determine whether a resource has
changed. The Application Cache specification on the other hand is specifically designed to
store resources offline, and only use these versions until requested to retrieve an update.
Before beginning this section, it is worth mentioning that the examples in this chapter will
not use CDN based scripts: they will assume all the JavaScript resources required are served
from the
scripts
folder. If you have been using CDNs to serve the jQuery resources, you
may want to download them instead and add them to the scripts folder so the examples are
the same. This is not a requirement of the application cache (provided the NETWORK prop-
erty is set appropriately: more on this below), but it allows for a consistent set of examples.
In order to implement an Application Cache we will begin by creating a file called
tasks.appcache in the same directory as the tasks.html page.
The Application Cache will contain 3 sections, so begin by adding the following skeleton to
the newly created file. An empty line must separate the sections from one another.
