Online Whitelist and Fallback Options

It is possible to force the browser to always access certain resources over the network (this process is known as whitelisting). This means the browser will not cache them locally and they will not be available when the user is offline. To specify a resource as online only, use the NETWORK: keyword (the trailing : is essential) in the manifest file like so:

CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css

NETWORK:
logo.jpg

This whitelists logo.jpg by moving it into the NETWORK section of the manifest file. When the user is offline, the image will show up as a broken image link (Figure 6-2). When he is online, it will appear normally (Figure 6-3).

If you don’t want offline users to see the broken image, use the FALLBACK keyword to specify a fallback resource like so:

CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css

FALLBACK:
logo.jpg offline.jpg

Now, when the user is offline, he’ll see offline.jpg (Figure 6-4), and when he’s online, he’ll see logo.jpg (Figure 6-5).

Whitelisted images will show up as broken links when the user is offline

Figure 6-2. Whitelisted images will show up as broken links when the user is offline

Whitelisted images will show up normally when the user is online

Figure 6-3. Whitelisted images will show up normally when the user is online

Fallback images will show up when the user is offline

Figure 6-4. Fallback ...

Get Building Android Apps with HTML, CSS, and JavaScript, 2nd Edition 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.