Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get error message on a HTML5 Application Cache Error event?

During the caching of my offline webapp I receive a totally valid error which is displayed in the browser console like this:

Application Cache Error event: Manifest changed during update, scheduling retry

I can add a Listener to be informed that an error has occured.

window.applicationCache.addEventListener('error', function(e){
  //handle error here
}, false);

How can I get the error detail, in this case "Manifest changed during update, scheduling retry"?

like image 520
Federico Elles Avatar asked Nov 20 '12 15:11

Federico Elles


People also ask

How does HTML 5 implement application cache?

Application Cache in HTML5: The current version of HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection. Now we can make an offline web application that will run without an internet connection by just creating a manifest file in our application.

How do I use application cache?

An application's cache is only updated when its manifest file changes. So for example, if you edit an image resource or change a JavaScript function, those changes will not be re-cached. You must modify the manifest file itself to inform the browser to refresh cached files.

Which event is fired when cache download is complete?

Once that happens, an updateready event will be fired, stating that an updated copy of the cache has finished downloading and is ready to be used.

Is application cache deprecated?

AppCache is documented as deprecated and under removal in MDN and in the WHATWG standard, and marked as obsolete in W3C's HTML 5.1. It is incompatible with CORS, making it unfriendly for usage with CDNs.


2 Answers

You must use window.onerror. The callback can have three parameters:

Error message (string)
Url where error was raised (string)
Line number where error was raised (number)

check this for more information: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onerror

like image 188
madmed Avatar answered Nov 09 '22 23:11

madmed


Still a valid issue today. In my example, my error log does not return anything. I am using IE11.

<html xmlns="http://www.w3.org/1999/xhtml" manifest="icozum.appcache">

onChecking events fires but then onError with cache status = 0 which is nocached.

 window.applicationCache.onchecking = function (e) {
       var doc = document.getElementById("cachestatus");
       if (doc != null) {
            doc.innerHTML += "Checking the cache.\n";
       }
 }

Then onError

window.applicationCache.onerror = function (e) {
    var doc = document.getElementById("cachestatus");
    if (doc != null) {
         doc.innerHTML += "Cache error occurred." + applicationCache.status.toString() + "\n";
         console.log(e);
         console.log("test");
     }
 }

The output on the screen is

Checking the cache. Cache error occurred.0

There is no detail info about the error in onError event handler. I got the real error by pressing the F12. Here is the screen shot. Is there any way to capture this much detail in onError event handler.

enter image description here

And finally I figured out the problem. The error is not due to missing file. The app cache file does exist, however in windows , visual studio (2013)/IIS does not recognize the extension .appcache. The following section needs to be added to the web.config file.

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".appcache" mimeType="text/cache-manifest"/>
  </staticContent>
</system.webServer>
like image 29
Kagan Agun Avatar answered Nov 10 '22 01:11

Kagan Agun