HTML and CSS Reference
In-Depth Information
fonts/webfont.otf
fonts/webfont.ttf
fonts/webfont.woff
fonts/webfont.svg
media/audio.mp3
media/video.mp4
media/video.webm
# offline.html will be served if the user is offline and request new "non-cached" assetsFALLBACK:
index.html offline.html
■
You can add comments to the manifest file by beginning a line with
#
. also, if one asset fails to download, the
entire cache fails.
Note
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
<script>
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
