HTML and CSS Reference
In-Depth Information
Using the HTML5 application cache, publishers can offer speedier and more responsive web apps,
which is a better user experience for the end user all around. Also, if you're a Chrome user, I suggest using
chrome://appcache-internals
, which can help in detecting what domains are storing assets in your browser.
App Cache Example
Since I just covered why you should take advantage of offline asset caching, I'll show how to put the theory into
practice. While the HTML5 AppCache API is typically used for caching specific assets in web applications, you can
use similar caching mechanisms for caching your ad content offline. Sure, this will certainly mean that if you're on
the publisher end, this will increase your workload since you'll need to update the cache manifest every time news
ads are updated. This is increasingly important when your publisher's content is meant to be viewed offline such as
magazines, newspapers, and other content that's completely cached to the user's device. Check out the following
code snippet to understand how to use AppCache. In the HTML markup, it's very simple to add a reference to the
.appcache
file by writing the following:
<!DOCTYPE HTML>
<html manifest="cache.appcache">
...
</html>
In the previous example, you add an attribute to the HTML node in the HTML file called
manifest
, and you set
that equal to
cache.appcache
,
which is your manifest file located in the same directory as your HTML file.
Next, let's take a look at building the manifest file. You can use the following sample manifest structure to build
your offline ad, but note that the assets will need to change for your own specific use case depending on publisher and
ad content. The first thing to do before building the manifest cache file is to set your server to accept the MIME type of
.appcache
. I do this by simply writing
AddType text/cache-manifest .appcache
to my
.htaccess
file on my server's
root directory. Keep in mind that some servers may not have this file, or it may be hidden at first, so be sure to view
hidden files to find it. Otherwise, just create one.
■
Note
Once you have your server configured to accept the file type of
appcache
, you can build a manifest text file with
your caching assets and save it as
yourfile.appcache
. Let's review the manifest now (see Listing 10-5).
Listing 10-5.
Building an HTML5 AppCache File
CACHE MANIFEST
# 2012-12-13:v1 - Keep the version to purge the cache when updates are needed
# Explicitly cached entries
CACHE:
index.html
css/style.css
ad/adstyle.css
js/script.js
ad/adscript.js
ad/bg.jpg
images/button.png
images/bg.jpg
