HTML5 Offline app always sending "error" event on iPod Touch iOS 4.2.1

Question

I have an issue in iOS with a HTML5 Offline app. My app works fine offline in Firefox, Chrome and Android 2.2, but not on my iPod Touch running iOS 4.2.1.

Here is my manifest (a JSP), called "1.cache.manifest.jsp". I use a "no-cache.jsp" JSP to ask that the manifest is not cached. I also add "index.jsp" to the manifest, though this is strictly not necessary as it is the resource that references the manifest.

<%@page contentType="text/cache-manifest; charset=UTF-8" pageEncoding="UTF-8"
%><jsp:include page="no-cache.jsp" flush="true"
/><%
String cacheManifestVersion = "20110220 1224";
//System.out.println("Cache manifest version=" + cacheManifestVersion);
%>CACHE MANIFEST
index.jsp
cache-this.js.jsp

Here is my index.jsp page. It listens to the applicationCache events and dumps out the event type. I use a "no-cache.jsp" JSP to ask that the HTML is not cached.

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
%><jsp:include page="no-cache.jsp" flush="true"
/><!DOCTYPE html>
<html manifest="1.cache.manifest.jsp">
<head>
<script>
var appCacheEvents = ["checking", "error", "noupdate", "downloading", "progress", "updateready", "cached", "obsolete"];

for (var i = 0; i < appCacheEvents.length; i++) {
    applicationCache.addEventListener(appCacheEvents[i], function (evt) {
        var el = document.getElementById("applicationCache-events");
        el.innerHTML += "applicationCache " + evt.type + " event.<br/>";
    }, false);
}
</script>
<script src="./cache-this.js.jsp"></script>
</head>
<body>
<div id="applicationCache-events"></div>
<div id="cache-this-output"></div>
</body>
</html>

The "cache-this.js.jsp" is some javascript that adds some text to the page when loaded:

<%@page contentType="application/javascript; charset=UTF-8" pageEncoding="UTF-8"
%><jsp:include page="no-cache.jsp" flush="true"
/>// cache this
window.addEventListener("load", function (evt) {
    var msg = "Script loaded " + new Date();
    document.getElementById("cache-this-output").innerHTML = msg;
}, false);

This is the output on those user agents that work, the FIRST time the site is accessed:

applicationCache checking event.
applicationCache downloading event.
applicationCache progress event.
applicationCache progress event.
applicationCache cached event.
Script loaded Sun Feb 20 2011 13:22:33 GMT+0000 (GMT Standard Time)

Subsequently the output is:

applicationCache checking event.
applicationCache noupdate event.
Script loaded Sun Feb 20 2011 13:23:47 GMT+0000 (GMT Standard Time)

And when offline (in Firefox) I get the following. Note the "error" event, but the app DOES work offline (even after I clear the HTTP cache).

applicationCache checking event.
applicationCache error event.
Script loaded Sun Feb 20 2011 13:26:54 GMT+0000 (GMT Standard Time)

On my iPod Touch I get the same output (as first access) EXCEPT the "cached" event is replaced by an "error" event.

Any ideas why iOS is failing to cache the app initially?

Not entirely related, but I'm hoping this will help someone. I had similar symptoms, but with https, and only as a homescreen web app - the cache items would download once, any subsequent checks to the cache manifest file would throw an error message after adding the suggested event handlers. After several days of troubleshooting it turns out the entire problem was I was using an untrusted ssl cert for testing. When I replaced it with a valid ssl cert the issue went away. — , Jun 28 '11 at 20:12

score 1 · Accepted Answer · answered Feb 22 '11 at 08:37

Can you see what your status is returning when you're getting your errors? Here's a similar functionality I use, that returns a few additional variables that might help you troubleshoot on your end:

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
);

I am having the same issue. In fact, logging messages like this isn't even available in iOS. So I don't know how you plan to use this debugging method on the iPhone and iPad. It seems that the cache manifest feature is completely non-functional in iOS. Otherwise, how do you explain that my app works fine offline on my desktop, but doesn't work on the iPad?? — IgorGanapolsky, Apr 04 '11 at 15:35
That's incorrect. It is entirely functional in iOS, just not in your device as you use it like anyone else (this is done on purpose). You can log/debug very easily with the simulator/xcode. In terms of why your app does or does work right, is on you. But this was created for HTML5 and is fully supported by the web-kit/iOS. — TNC, Apr 04 '11 at 17:06
In that case, I am stomped as to why mobile safari doesn't even request the cache.manifest. I am looking at my server logs, and the desktop browser makes a request for cache.manifest, but the mobile safari on iPad and iOS Simulator doesn't! — IgorGanapolsky, Apr 04 '11 at 18:15

score 1 · Answer 2 · edited Jun 21 '11 at 18:19

I use this to see the error results on the Ipad, iPhone ot iPod Touch

var bubbleTimeout;
var verboseMessage = true;

function initCache() {

if ( webappCache != null ) {
    // create event listeners for all associated events
    webappCache.addEventListener('cached', showSave, false);
    webappCache.addEventListener('downloading', showWaiting, false);
    webappCache.addEventListener('error', errorHandler, false);
    webappCache.addEventListener('updateready', updateReady, false);
    webappCache.addEventListener('noupdate', updateReady, false);
    webappCache.addEventListener('progress', showWaiting, false);
    webappCache.addEventListener('checking', showWaiting, false);
    }
}

function errorHandler(e) {

  if ( verboseMessage ) {
    newBubble("phase :"+e.eventPhase+" \n"+
      "currentTarget: "+e.currentTarget+"\n"+
      "target: "+e.target+"\n"+
      "type: "+e.type+"\n"+
      "cancelable: "+e.cancelable+"\n"+
      "bubbles: "+e.bubbles+"\n"+
      "cancelBubble: "+e.cancelBubble+"\n"+
      "message: "+e.message+"\n"
     );
} else {
    // newBubble("Connection Error, prolly bad manifest", false);
   }
}

function newBubble( textMsg, showButton ) {

if ( bubbleTimeout ) {
    clearTimeout(bubbleTimeout);
}

if ( showButton ) textMsg += "<br /><button type='button' onclick='hideBubble()'>OK</button>";

if ( !document.getElementById("bubble") ) {

    var divTag = document.createElement("div");
    divTag.id = "bubble";
    divTag.className ="bubble";
    document.getElementById("theFrame").appendChild(divTag);
    divTag.innerHTML = textMsg;
    divTag.style.visibility = "visible";

} else {

    document.getElementById("bubble").innerHTML = textMsg;
    document.getElementById("bubble").style.visibility = "visible";
}

bubbleTimeout = setTimeout("hideBubble()",15000);   
}

function hideBubble() {

$('#bubble').css('visibility','hidden');
}

HTML5 Offline app always sending "error" event on iPod Touch iOS 4.2.1

2 Answers2