HTML and CSS Reference
In-Depth Information
# offline.html will be served if the user is offline and request new "non-cached" assetsFALLBACK:
index.html offline.html
# 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
you cache in the ad. Once an asset such as a JavaScript file is cached, the browser will continue to use the cached
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.
Now that you have your cache file set up and assigned in your HTML document, let's use some of the JavaScript
to detect the loading and caching of your assets (see Listing 10-6).
Listing 10-6. HTML5 AppCache JavaScript Example
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
Search WWH ::

Custom Search