当前位置： 文江博客话题详情

HTML5 离线应用程序总是发送“错误” iPod Touch iOS 4.2.1 上的事件

发布于 2024-10-18 16:00:15 字数 2763 浏览 4 评论 0原文

我在 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 最初无法缓存应用程序吗？

原文

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?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

哆啦不做梦 2024-10-25 16:00:15

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

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

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
);
回复 原文
眼藏柔 2024-10-25 16:00:15

我用它来查看 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');
}

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');
}
回复 原文
~没有更多了~

关于作者

任性一次

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

苦中寻乐

文章 0 评论 0

lueluelue

文章 0 评论 0

嗼ふ静

文章 0 评论 0

王权女流氓

文章 0 评论 0

与花如笺

文章 0 评论 0

残酷

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文