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"?
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.
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.
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.
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.
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
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With