HTML5, JavaScript, and jQuery 24-Hour Trainer

Lesson 32

Application Cache

In the previous two lessons, you learned how data can be stored inside the web browser. Although this approach meant the web application was no longer reliant on Internet ­connectivity to access data, the web application was still very much dependent on an Internet connection to in order to load resources such as HTML pages, JavaScript files, images, and CSS files.

For instance, if you shut down the web server and attempt to run the web application, you will receive an error message that the web page is unavailable.

There are, however, many scenarios where you might wish to use a web application without Internet connectivity. This is increasingly true now that web applications are regularly accessed from portable devices, which may not have access to networks for periods of time.

Offline-able web applications was clearly a feature that needed to be addressed in order for browser-based web applications to become a viable alternative to desktop applications; ­therefore HTML5 introduced a technology called the application cache.

The application cache is a mechanism for specifying a set of resources that should be stored inside the browser after they are accessed the first time. From this point forward they will be accessed directly from the browser, removing all reliance on Internet connectivity.

In this lesson, you will learn how to configure a web application to work with the ­application cache, along with approaches for interacting with the application ...