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:
- Caching of application dependent resources
- 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.