Last Updated: February 25, 2016
·
696
· robinvdvleuten

Debugging offline application cache with JS

Debugging the offline cache of an application can easily be done with the following Javascript snippet;

var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';

var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);

function logEvent(e) {
  var online, status, type, message;
  online = (navigator.onLine) ? 'yes' : 'no';
  status = cacheStatusValues[cache.status];
  type = e.type;
  message = 'online: ' + online;
  message+= ', event: ' + type;
  message+= ', status: ' + status;
  if (type == 'error' && navigator.onLine) {
      message+= ' (prolly a syntax error in manifest)';
  }
  console.log(message);
}

window.applicationCache.addEventListener(
  'updateready',
  function(){
      window.applicationCache.swapCache();
      console.log('swap cache has been called');
  },
  false
);

setInterval(function(){cache.update()}, 10000);

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside