Offline Storage, Tracking, Debugging, and Optimization - HTML5 Advertising - page 231

<p>The network is: <span id="status"></span></p>
</body>
</html>

From the previous code, you can see I'm creating a function called networkIndicator , which will update
the text inside the status element to online or offline. Then on the onload method of the body element, I call the
networkIndicator function on the handlers ononline and onoffline . This simple detection can determine whether
there is a network connection. In addition, the previous code, when the user's network access changes to connected
or disconnected, it will also dispatch the following events that you can handle via JavaScript:

<script>
window.addEventListener("offline", function(e) {
alert("offline");
});

window.addEventListener("online", function(e) {
alert("online");
});
</script>

Checking the browser's navigator.onLine property and providing alternate experiences when a network
connection is not present is a must-have in any HTML5 web application, and as more advertising moves into the world
of web standards, you'll need to take this into account for publisher's that require it. Personally, it makes the most sense
to factor offline support into branding campaigns where gaming, video, or some form of heavy user interaction is at
the forefront of the campaign's success. Having offline support for direct-response ads may not make the most sense
because if users can't connect to any network, they won't be able to click/tap to the destination and landing pages.
However, having elements of a game cached to a device or even a smaller teaser video for offline use allows a user to
interact and spend valuable time within an ad experience. All of this can be tracked when a connection is regained for
the brand or advertiser to analyze after the campaign. Basically, if a user has network access, you can serve them up the
full experience; for example, it could be a feature-rich game or a long-form video ad. In addition, you can cache vital or
even alternate assets to a user's browser so they can still interact with the ad at some level when they're offline.

■ publishers may request that nothing be cached for offline use or that certain k-weight limitations be in place
for offline content. Consult with your publisher or application developer before developing the ad.

Note

Offline support within advertising is anything but a standard practice. In fact, the whole industry is working
toward a solid standard because there are holes in using navigator.onLine when checking for a reliable connection
status. For example, what's to happen if your ISP is down but your wireless router is up and running? The browser
may say the user is online but they're in fact not. A better way to test is to make small checks by requesting a small
asset from your server via an XMLHttpRequest (Ajax request) so it's transparent to the end user and they won't incur
any bandwidth bottlenecks nor refresh the page. Using the code shown in Listing 10-2, you can confidently recognize
whether the user is connected or not.

Listing 10-2. Detecting Offline Using Ajax Example
<script>
function testConnection (fileToPing) {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();