2

我在 iOS 中遇到了 HTML5 离线应用程序的问题。我的应用程序在 Firefox、Chrome 和 Android 2.2 中离线运行良好，但在运行 iOS 4.2.1 的 iPod Touch 上无法正常运行。

这是我的清单（一个 JSP），称为“1.cache.manifest.jsp”。我使用“no-cache.jsp”JSP 来询问清单是否未缓存。我还将“index.jsp”添加到清单中，尽管这不是必需的，因为它是引用清单的资源。

<%@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

这是我的 index.jsp 页面。它侦听 applicationCache 事件并转储事件类型。我使用“no-cache.jsp”JSP 来询问不缓存 HTML。

<%@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>

“cache-this.js.jsp”是一些在加载时向页面添加一些文本的 javascript：

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

这是那些工作的用户代理的输出，第一次访问该站点时：

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)

随后的输出是：

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

当离线时（在 Firefox 中），我得到以下信息。请注意“错误”事件，但该应用程序确实可以脱机工作（即使在我清除 HTTP 缓存之后）。

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

在我的 iPod Touch 上，除了“缓存”事件被“错误”事件替换之外，我得到了相同的输出（作为第一次访问）。

任何想法为什么iOS最初无法缓存应用程序？

4

2 回答 2

1

当你收到错误时，你能看到你的状态是什么吗？这是我使用的类似功能，它返回一些额外的变量，可以帮助您最终排除故障：

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
);
于 2011-02-22T08:37:42.970 回答
1

我用它来查看 Ipad、iPhone 或 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');
}
于 2011-06-21T17:50:46.403 回答