Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 4: Working with the offline application HTTP cache CHAPTER 16 609

FALLBACK:

/Content/Images/Products/ /Content/Images/offline.jpg

There are some important things to point out in this example. First, the top line of the file

must always be the CACHE MANIFEST statement. Comment lines begin with a # symbol and

will be ignored by the browser. Empty lines are also ignored. The file has the following three

sections within it.

■■CACHE This section contains any items that you want to cache explicitly. The URLs

within it can be fully qualified or relative to the location of the manifest file. You can

also list these files directly under the CACHE MANIFEST header.

■■NETWORK This section contains white-listed URLs that require a connection. These

files will not be included in the cache, so they will not be available when offline. In the

sample, the /API/ section of the site is specified because this area contains services that

can only function when a network connection is available.

■■FALLBACK he last section enables you to specify substitute files that you might not T

want cached for whatever reason but would like something to be used in their place.

The URL on the left side is substituted by the one on the right. In this example, all

images in the Products directory should be replaced by a default offline.jpg image.

Updating the cache

When a change is made to the manifest file, the browser is triggered to download every file

listed within it. It does this asynchronously behind the scenes, so it won’t block the rendering

of the page being displayed.

After the browser caches resources listed in the manifest file, those files are held until one

of the following occurs.

■■The manifest file is updated.

■■The user manually clears the cache.

■■The cache is updated through a developer-created script.

A change to a resource itself doesn’t trigger it to be automatically updated within the

cache, so it can be very easy for the cache become stale. A common practice is to include a

version number or timestamp as a comment line that is updated with each deployment of the

web application as follows.

CACHE MANIFEST

# version 1.0

Quick check

■■When do you use the FALLBACK section of a manifest file?

Quick check answer

■■Use the FALLBACK section to specify substitutions for resources in offline mode.