Offline Web Applications
Reading static web pages offline is easy: connect to the Internet, load a web page, disconnect from the Internet, drive to a secluded cabin, and read the web page at your leisure. (To save time, you may wish to skip the step about the cabin.) But what about using web applications like Gmail or Google Docs when youâre offline? Thanks to HTML5, anyone (not just Google!) can build a web application that works offline.
Offline web applications start out as online web applications. The first time you visit an offline-enabled website, the web server tells your browser which files it needs in order to work offline. These files can be anythingâHTML, JavaScript, images, even videos (see Video). Once your browser downloads all the necessary files, you can revisit the website even if youâre not connected to the Internet. Your browser will notice that youâre offline and use the files it has already downloaded. When you get back online, any changes youâve made can be uploaded to the remote web server.
Checking for offline support uses detection technique #1
(see Detection Techniques). If your browser supports
offline web applications, there will be an applicationCache
property on the global window
object. If your browser doesnât support
offline web applications, the applicationCache
property will be undefined. You
can check for offline support with the following function:
function supports_offline() { return !!window.applicationCache; }
Instead of writing this ...
Get HTML5: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.