Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL

Chapter 7: Offline > Network and fallback in detail - Pg. 212

212 IN TRod u cIN g H T ML5 In addition to the CACHE and FALLBACK categories, there's the NETWORK category, which already has entries associated with it in our example. This is the whitelist category, and what's important about these entries is that they tell the browser that any requests to any asset that isn't in our offline cache should go via the Web. If you're like me, you're probably thinking, "Surely that's the default?" I'm afraid not. If the browser is viewing a page that's running from the AppCache, that is, the page was served up from the manifest, then all resources on that page must match some rule in the manifest; otherwise, they fail to load. This seems odd, but the rule we've already added ensures that we'll never get burnt by this odd behaviour. We could include more specific URLs, but by putting the * rule in it ensures that everything else goes via the Web, and we don't end up with any ugly old broken images. Network and fallback in detail Providing fallback content Both with the FALLBACK and the NETWORK namespaces, there's no pattern matching support--though you might think this if you were looking at an example manifest file with a * char- acter in it; in fact this is a special character that we'll look at in the network whitelist section below. FALLBACK works by specifying a resource location, or a resource prefix, that is, what the URL starts with. Note that there are no regexes going on here; it's just "does it start with...." When your website is offline, and you're using the AppCache, you could direct all the requests to the payment.html page to an offline version of the page using the following: FALLBACK payment.html payment-offline.html However, if your site requests /money/payment.html this rule will not match, but we can match on the start of the URL like this: FALLBACK /money/ payment-offline.html Now any request that starts with /money/ for a URL whilst we're offline and whilst the URl is unavailable in the cache will have the payment-offline.html served up instead.