Offline web applications

Gabor Paller's picture

Mobile application development is characterized by 4 traits that are different compared to desktop or server computing. These are the following:

  • Context-awareness
  • Reflection
  • Off-line access
  • Asynchronous communication

There are more details about these traits in this blog post, I will concentrate now only on off-line access. The requirement for the disconnected operation implies that the application's network accesses are concentrated to the time periods when the device can actually access the network. This may cause problems for applications that fetch data constantly from the network but web applications create a special problem. Unlike "bundled" native applications, web applications are never really downloaded entirely to the client machine. They are fetched page by page and if it just so happens that there is no access to the network when the next page is fetched, they fail horribly.
The widget effort was one experiment to tackle this problem. Widgets were web pages and other resources (e.g. pictures) packed into one ZIP file. This ZIP file also has a manifest that stores all sorts of information about the application. Widgets never became popular on the most widely deployed mobile platforms (namely iOS and Android). The emerging HTML5 specification, however, offers a somewhat similar solution to the offline web application problem.
You can turn any web application into an offline web application if you access a page with a manifest association. A manifest association looks like this:

<html manifest="">
</html> is the URL of the manifest file that we associate with the web application. It can have any name but the web server has to serve it with text/cache-manifest MIME type. The manifest file then lists the URLs that are part of the web application. For example:

When the browser sees a page with a manifest declaration, it fetches the manifest file then downloads all the URLs in the manifest file. The downloaded content is then persistently stored by the browser and is never accessed again. The browser, however, renders the pages from its persistent storage in case the URL of the web application is accessed, even if there is no connection to the network. The entire page set of the web application is downloaded again only if the timestamp of the manifest file changes. If the manifest file timestamp does not change, individual files belonging to the web application are never accessed.
The example files are attached to this post. You have to be logged in to the Sfonge website to access it.
Our example program is a primitive set of pages: one index page and one PHP page. The PHP page displays the current time and is used to demonstrate that after the caching, the network server is never accessed again. In order for this application to work offline, the manifest file has to be served with the correct content type. If you have access to a network-based Apache server, you can just set up the appropriate content type in  the mime.types configurarion file.

text/cache-manifest mf
I did not have such a server so I installed an Apache+PHP combination on my own laptop, configured my Android phone to access the network over the same WiFi router that the laptop was using and directed the phone's browser to the laptop's private address. Another interesting test is to access the index.html page with the Firefox browser: Firefox will prompt for permission to cache the pages and the cached application can be observed in Option/Advanced tab.

Attached file: 
Taxonomy upgrade extras: