HTML and CSS Reference
it comes at a very small 6KB when minified and even smaller when gzipped. This could be very beneficial for creating
an offline archive of user interactions and eventually iterating over the interactions and firing off the user activities as
the user regains network connection.
■ tracking can get skewed for offline use if a majority of users interact with an ad and never regain network
access to push out the metrics to the reporting server. it should be communicated to all teams that this will never be
100 percent accurate.
When discussing the topic of offline caching and offline metrics, I have to touch on a new and emerging API in
HTML5 called IndexDB. IndexDB is an API for storing significant amounts of data on the client side in a very
structured matter. Using IndexDB generally means you have lots of data to work with and much more than your
typical DOM storage using sessionStorage or localStorage , which could be faced with browser limits on the
amount of data you'll store to the client. While both of these APIs provide a great way of handling large amounts of
data to the client browser, when you are dealing with very large data pools and a need to handle data at scale in a
structured matter, IndexDB will be your go-to choice. Developed by the Mozilla group, using this type of elaborate
web storage, you could possibly allow the user to customize a detailed vehicle within the ad experience and pick up
where they left off the next time they visit the ad on another site.
IndexDB is now the current specification being worked on by the HTML5 working groups. Previously WebSQL
API was the main way of storing large amounts of data offline, but that specification has since ended in development,
according to the W3C. (However, it's still in use in some browsers.) The industry is said to be transitioning to IndexDB
in the foreseeable future. Origin , or the domain of the site that creates the database, scopes each IndexDB database,
and this could be a good solution of handling offline data for your advertisement, but be warned that it may not work
in all browsers just yet. Be sure to keep tabs on http://caniuse.com/#feat=indexeddb to determine support.
Arguably the most popular web development tool is Web Inspector, and it comes built into all of the modern
browsers. If you use Chrome, Opera, Firefox, or IE 10, you can simply right-click your browser window and choose
Inspect Element . This will open Web Inspector in your browser and give you an array of tools to use for actions such as
inspecting elements in your DOM, viewing loaded scripts, analyzing network traffic, finding out about offline storage,
and executing commands in real time. If you're using Safari, you will need to go into the browser preferences first and
enable the Develop menu in your menu bar. Once this is enabled, you will be able to right-click and inspect elements
like the others. Figure 10-2 shows what to look for in Apple's Safari browser.