Bleeding-Edge HTML5 - HTML5 Advertising - page 317

API allows developers to detect whether the device is charging, detect at what level it's at, and detect the device
discharging time. Listing 12-12 shows how to work with this API.
Listing 12-12. Battery API Example
<script>
var theBattery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
theBattery.addEventListener("chargingchange", function(event) {
console.warn("Charging change: ", theBattery.charging);
}, false);
theBattery.addEventListener("chargingtimechange", function(event) {
console.warn("Charge time change: ", theBattery.chargingTime);
}, false);
theBattery.addEventListener("dischargingtimechange", function(event) {
console.warn("Discharging time change: ", theBattery.dischargingTime);
}, false);
theBattery.addEventListener("levelchange", function(event) {
console.warn("Level change: ", theBattery.level);
}, false);
</script>
As you can see, you grab a reference to the user's battery by using both prefixed and unprefixed versions of
the navigator.battery object. Next, based on the states of the user's battery, you'll attach event listeners and log
information regarding the states. Again, with this information, you can cater your ad content more specifically to your
end users. For more information, visit the working group's specification at http://W3.org/TR/battery-status .
Network API
The Network API allows for developers to alter their content for varying network connections. Now you can optimize
on network connection status (which can be unknown , ethernet , wifi , 2g , 3g , 4g , and none ) through the
navigator.connection.type . Take a look at working with the Network API in Listing 12-13.
Listing 12-13. Network API Example
<script type="text/javascript">
while (navigator.onLine) {
var network = navigator.connection.type;
if (network === "ethernet" || network === "wifi" || network === "4g") {
//full ad experience
} else if (network === "3g" || network === "2g") {
//reduced ad experience
} else {
//no ad experince due to unkown network or none.
}
}
</script>
As you can see, you can tailor your ad experience based on the user's connection speed. Pair this with the Battery
API and you can really take your user's experience to a new level. In this example, you detect a strong connection and
serve up the full ad experience; if it's a weaker cell service, you reduce it slightly. If it's unknown or none , you remove