Offline Applications with Pageforest

HTML5 applications support an offline mode - all the files needed for an application can be saved in the client, so it can run without and internet connect.  For a great explanation of offline applications see:

 

http://diveintohtml5.org/offline.html

 

As you can see from the article, the concept is simple - but it can be a hassle to use:

  1. Create a Manifest file, and list all of the application files that you wanto be available offline.  Be sure your server serves this file using mime type text/cache-manifest.  You can see an example of a manifest file here: http://scratch.pageforest.com/app.manifest
  2. Add a reference to the manifest in the <html> tag of your main application page (all the html pages for your application, if you have more than one).

Seems simple enough.  The problem comes in when you change your application files.

  1. If your files change, but your don't modify your manifest, then the browser will not know to re-download the new files, and will instead use the out-dated version stored in its cache.  So, you have to be sure to modify the manifest file in some way (usually by updating a version number in the file).
  2. If you add a file, you have to, of course, remember to add it to the manifest, or it won't be available when your application is offline.

pf.py to the rescue - autogenerated app.manifest

In order to simplify the process for Pageforest applications, I've introduced a new command into the pf.py utility:

$ pf.py manifest

When you issue this command, an app.manifest file will be automatically created for you, listing all the files in your application.  More than that, when an app.manifest file exists in the root directory of your application, it will be automatically be updated whenever you do a put command to the server.  So if any files change or are added, you don't have to manually update the manifest file yourself.

Customizing Manifest Files

You may want to add additional resources that are not part of your private application files to your manifest.  For example, the scratch application adds:

http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
/lib/beta/css/client.css
/lib/beta/js/json2.min.js
/lib/beta/js/utils.js
/static/images/appbar/green-left.png
/static/images/appbar/green-center.png
/static/images/appbar/green-right.png
/static/images/appbar/down.png
/static/images/appbar/logo.png

When placed above the AUTOGENERATED line in your manifest file, pf.py will preserve these lines and not modify them.

Excluding Files From a Manifest

 

If you have a large number of big files, you may not want to include them in the manifest (browsers will typically not download more than a few megabtes of data to the application cache). To exclude them from being added to your manifest, you can put an EXCLUDE directive in the auto generated section of your app.manifest:

#!EXCLUDE: big-images

Any files in the big-images directory will now be omitted from the manifest.