The Offline Cache Manifest File
The Offline Cache Manifest File
How does it work? Offline caching relies on the cache manifest file that is hosted on the web server. It’s a simple text file document containing all the resources that have to be cached. The first important thing is the content type of this file. It has to be served with the MIME type text/cache-manifest. So, let’s see how we can configure Google App Engine (discussed in the previous chapter) to set the right MIME type for our cache file. Extra MIME types definition are specified in the web.xml file that you will find under your war/web-inf folder:
<?xml version="1.0" encoding="utf-8"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" version="2.5">
<mime-mapping>
<extension>manifest</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping>
</web-app>
CHAPTER 6: Competing with Native Apps
By adding these parameters, Google App Engine will take care of setting the right content type for files with a manifest extension. Now that the server is configured, it’s time to create our cache manifest file. Create an empty text file called cache.manifest that starts with this line: CACHE MANIFEST. We will place this file at the root of the web application (i.e., directly under the war folder).
The next step is to list all the resources we want to cache—for us that will be the following:
snippets/06/todolist.html snippets/06/css/proui.css snippets/06todolist.css js/jquery-1.4.2.min.js js/jquery.validate.js js/prowebapps.js snippets/06/iscroll.js snippets/06/todolist.js
These are all the static resources we need to run the application; we just have to add them to the cache manifest file (all except the todolist.html file, which will be cached implicitly):
CACHE MANIFEST css/proui.css snippets/06/todolist.css js/jquery-1.4.2.min.js js/jquery.validate.js js/prowebapps.js snippets/06/iscroll.js snippets/06/todolist.js
The paths are relative to the location of the manifest file, but you could also use the absolute paths. Now we finally have to declare the manifest file in our application, which we do by adding an attribute inside the HTML tag of the application page:
<html manifest=”cache.manifest”> That’s it! The application is ready to be cached the next time we will access it (online, of
course). To check out that the files are correctly cached, we will use Chrome’s web console:
Creating Application Cache with manifest http://localhost:8080/cache.manifest Application Cache Checking event Application Cache Downloading event Application Cache Progress event (0 of 7) http://localhost:8080/snippets/06/todolist.css Application Cache Progress event (1 of 7) http://localhost:8080/js/jquery-1.4.2.min.js Application Cache Progress event (2 of 7) http://localhost:8080/js/prowebapps.js Application Cache Progress event (3 of 7) http://localhost:8080/snippets/06/todolist.js Application Cache Progress event (4 of 7) http://localhost:8080/js/jquery.validate.js Application Cache Progress event (5 of 7) http://localhost:8080/snippets/06/iscroll.js Application Cache Progress event (6 of 7) http://localhost:8080/css/proui.css
CHAPTER 6: Competing with Native Apps
Application Cache Progress event (7 of 7) Application Cache Cached event
If you turn off your Internet connection now, the application will still work because the browser will retrieve the files from the local cache instead of the server. Going back to our scientist example from Chapter 5, the scientist will now be able to use his application everywhere he wants, even if he plans collecting data on the moon!
But what happens if a resource file is modified? The offline cache mechanism uses a byte-to-byte comparison between the remote and cached manifest, so any change will
be detected.