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

StackOverflow https://stackoverflow.com/questions/8986578

質問

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?

役に立ちましたか？

解決

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 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');
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top