Offline Web Apps – Part 1: Cache Resources

"No internet connection"

Offline web apps seems like a contradictory notion. After all, the web is based on the interconnectivity of devices. However, as we push the limits of when and where users access web content, “offline” web applications are drawing an increased demand. By taking advantage of a few different browser features (like window.applicationCache or navigator.onLine) providing dual mode (online/offline) applications an easier than expected task.

Basics of an Offline Application

Dual mode web applications at the bare minimum must satisfy two fundamental tasks:

  1. Caching of application dependent resources
  2. Be intelligent enough to handle both online and offline scenarios

Depending on the complexity of your web application, these two fundamentals may have varying levels of difficulty but the core concepts are the same.

Cache Application Resources

For initial load of an application, end users must have an online connection to access resources from the server. It is at this time where you can configure your application to let the browser know what files to keep a copy of locally in case your connection is dropped. This is done by using a cache manifest. The cache manifest is a simple text file with an “appcache” extension referenced as an attribute to your top level html tag.

<html manifest="manifest.appcache">
    <head>
        ...
    </head>
    <body>   
        ...
    </body>
</html>

At the most basic level your cache manifest file should list the files required to run your application in an offline mode under a “CACHE MANIFEST” header. These files will be stored locally on the device and the next time an application is accessed, the browser will know to use the cached file if available. (Note: This is also a very helpful tool for improving online application performance.)

CACHE MANIFEST
index.html
scripts/app.js
scripts/data.js
css/app.css
images/logo.png
...

For more information on using a cache manifest, check out Appcache Facts.

Part 2: Handle Offline Scenarios

Unlike setting up an application cache, configuring your application to handle offline scenarios is much more application specific in it’s implementation. In Part 2 of this post, I’ll cover how to handle those scenarios.

Ready to see more? Check out Part 2 of this post learn about navigator.onLine.