HTML5: Up and Running

Chapter 8. Let’s Take This Offline

Diving In

What is an offline web application? At first glance, it sounds like a contradiction in terms. Web pages are things you download and render. Downloading implies a network connection. How can you download when you’re offline? Of course, you can’t. But you can download when you’re online. And that’s how HTML5 offline applications work.

At its simplest, an offline web application is just a list of URLs pointing to HTML, CSS, or JavaScript files, images, or any other kinds of resources that may be present. The home page of the offline web application points to this list, called a manifest file, which is just a text file located elsewhere on the web server. A web browser that implements HTML5 offline applications will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the local copies up to date as they change. When you try to access the web application without a network connection, your web browser will automatically switch over to the local copies instead.

From there, most of the work is up to you, as the web developer. There’s a flag in the DOM that will tell you whether you’re online or offline, and there are events that fire when your status changes (one minute you’re offline and the next minute you’re online, or vice versa). But that’s pretty much it. If your application creates data or saves state, it’s up to you to store that data locally (see Chapter 7 ...