HTML and CSS Reference
# offline.html will be served if the user is offline and request new "non-cached" assetsFALLBACK:
# Resources that require the user to be online.
■ You can add comments to the manifest file by beginning a line with # . also, if one asset fails to download, the
entire cache fails.
Let's review the manifest. The first thing you do is define the cache manifest and set a comment with the date of
the last update as well as a version number of 1. The second thing you do is list all the assets and files you need cached
to the user's browser for offline use, including the ad's assets, by writing ad/style.css , ad/adscript.js , and
ad/bg.jpg . Remember, this does not need to be all of your assets, just enough to provide an acceptable offline
experience. In this example, I've included the CSS, JS, images, fonts, media, and ad assets, but this could very well
be overkill depending on the creative requirements of your web app and advertisements. Also, be careful with what
version even if you change the file on the server. The only way to ensure that the browser updates the cached asset is
to change the .appcache file, which is why you add a date and version in the comments section by writing . # 2012-
12-13:v1 . The next step in the manifest file is that you provide an alternate offline.html file for your index.html
file under the FALLBACK section of the manifest, which will get served when a user is offline and attempting to access
information that isn't cached. The is great to have in the event the user accesses information that they can't view; in
that case, they'll get served a default cached asset instead of something that wasn't cached while they were online.
Publishers may see the real benefit from HTML5's AppCache API because they can effectively create a very rich
offline experience for their customers and visitors while still offering them the content their users are after. Ads will
more or less find their own way for caching assets to a user, but be sure to have conversations with your publisher, ad
server, and agency before heading down any specific path.
to detect the loading and caching of your assets (see Listing 10-6).
var cache = window.applicationCache;
cache.addEventListener('cached', handleCacheEvent, false);
cache.addEventListener('checking', handleCacheEvent, false);
cache.addEventListener('downloading', handleCacheEvent, false);
cache.addEventListener('error', handleCacheError, false);//Good to use if the manifest is moved or