HTML and CSS Reference
In-Depth Information
Chapter 10
Offline Storage, Tracking, Debugging,
and Optimization
This chapter is focused on the increasingly important offline support for ads on mobile and tablet devices,
on mandatory tracking, and on the tedious and often very time-consuming process of debugging in a browser and
on a device. Offline support is becoming a requirement for many web apps, and advertising is quickly following suit.
In this chapter, I'll review how to handle offline events, detect when a user comes back online, and even discuss APIs
that will detect when a user has a poor network connection. I'll cover how to cache assets to client browsers and
devices using HTML5's AppCache API. I'll also discuss tracking users' interactions within advertising via tracking
pixels and JavaScript, and I'll use the methods to handle tracking calls and store calls in a client-side database
using HTML5's APIs. In addition, I'll discuss the differences and browser support between the IndexDB API and
the WebSQL API. I'll also discuss APIs such as Lawnchair JS and how to handle cross-browser storing and caching
as well as how to fire off tracking calls when a user is offline. Lastly, I'll cover the detailed realm of debugging and
optimization on desktop browsers and mobile devices. It's a lot, so let's get started.
Offline Support
For as long as I can remember, I've always recognized the Web in terms of of network access. Starting in the old days,
we had dial-up modems, then DSL, then cable lines, and then the present-day fiber optics. However, in today's world,
we also have to focus on wireless cell networks such as 2G, 3G, and even 4G LTE connections and how more and
more devices are mobile such as smartphones, e-readers, and tablets. With these devices able to go into areas typical
computers can't, like planes, trains, and automobiles, network connections can come and go quickly and suddenly.
Luckily, developers can use a useful new feature of browsers that detects whether a user has network access or not.
Listing 10-1 outlines how to detect for this in compliant browsers.
Listing 10-1.
Detecting Offline Example
<!DOCTYPE HTML>
<html>
<head>
<script>
function networkIndicator() {
document.getElementById('status').textContent = navigator.onLine ? 'online' : 'offline';
}
</script>
</head>
<body onload="networkIndicator()" ononline=" networkIndicator ()" onoffline=" networkIndicator ()">
