What is Application Cache Error event Manifest fetch failed

So you've been building an offline web app using Application Cache and when you test your functionality while offline you encounter this;

Application Cache Error event: Manifest fetch failed (6) https://domain.tld/manifest.appcache

You're code may look a bit like the following;

window.addEventListener('load', function(e) {
  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      window.applicationCache.update();
      window.applicationCache.swapCache();
    }
  }, false);
  window.applicationCache.addEventListener('noupdate', function(e){
    // start your app here
  }, false);
  window.applicationCache.addEventListener('cached', function(e){
    // start your app here
  }, false);
  
}, false);

And you may be accessing the details of the error using this;

window.applicationCache.addEventListener('error', function(e){
    console.log(arguments);
  }, false);

But you're not able to investigate far as the event object is the only data available, and it is brief..

You may first investigate what ApplicationCacheErrorEvent is and how to diagnose error cases but if you're here it's likely you were as successful as I was.

ApplicationCacheErrorEvent has no public documentation at all

The only information you'll notice change through trial and error might be the event.type and event.reason properties.

The reason encountered when you receive Application Cache Error event: Manifest fetch failed (6) https://domain.tld/manifest.appcache is manifest consistently.
This is good news because we can test and handle this situation easily using;

window.applicationCache.addEventListener('error', function(e){
    if (e.reason === 'manifest') {
     // start your app here
    }
  }, false);

You might be wondering why I would ignore that there was an error and just start my app?
Well why not?
I've run through many scenarios online, offline, lost connection during cache update, ect. Yet consistently when I encounter e.reason === 'manifest' and continue to run my app it runs flawlessly.

TL;DR

My conclusion is that the browser throws Error event: Manifest fetch failed (6) when it attempts to download your manifest.appcache file from the server to check it for freshness and action accordingly thereafter, and that it will attempt to reach the server even when network connectivity is not available.

Keep calm, this is intended normal operation

The fact that javascript execution is not interrupted and all assets defined in the manifest.appcache are available from a previous online state the error is in fact more of a warning or notice rather than an error that needs resolving.

I hope this article helps you and saves you time - please spread the knowledge!

Tweet to @chrisdlangton