离线iOS网络应用程序:加载我的清单,但不能脱机工作

Question

我正在编写一个在iOS上脱机使用的Web应用程序.我已经创建了一个清单,我正在服务它text/cache-manifest,它通常在Safari中运行时工作正常.

如果我将其作为应用程序添加到我的主屏幕,然后打开飞行模式,它根本无法打开应用程序 - 我收到错误,它提供关闭应用程序.(我认为这是离线应用程序的全部目的!)

• 当我第一次在线加载应用程序时,我可以在我的日志中看到它正在请求清单中列出的每个页面.

• 如果我关闭飞行模式,并加载应用程序,我可以看到它请求的第一个文件是我的main.html文件(它都列在清单中,并具有manifest=...属性).然后它会请求清单和我的所有其他文件,为所有文件获取200个(对于在此加载期间第二次请求的任何内容,304).

• 当我在Chrome中加载页面并点击时,日志显示它在服务器上尝试访问的唯一内容是"/favicon.ico"(这是404,我认为iOS Safari不会尝试加载,无论如何).清单中列出的所有文件都是有效的,并且没有错误地提供.

• Chrome检查员在"APPLICATION CACHE"下列出了我所列出的所有缓存文件.整个文件集大约是50 KB,在我找到的离线资源的任何限制下都是如此.

这是否应该有效,即我是否应该只使用HTML/CSS/JS创建一个离线iOS应用程序？我在哪里弄清楚为什么它无法脱机工作？

(相关但对我来说听起来并不完全相同,因为它是关于Safari而不是一个独立的应用程序:" 无法让一个网络应用程序在iPod上脱机工作 ")

Answer 1

我确认名称'cache.manifest'解决了IOS 4.3中的离线缓存问题.其他名称根本不起作用.

Answer 2

我发现调试HTML5离线应用程序很痛苦.我发现本文中的代码帮助我弄清楚我的应用程序出了什么问题:

http://jonathanstark.com/blog/2009/09/27/debugging-html-5-offline-application-cache/

由Jonathan Stark调试HTML 5离线应用程序缓存

如果您希望提供对Web应用程序的脱机访问,则HTML5中提供的脱机应用程序缓存是杀手锏.然而,它是一个巨大的PITA进行调试,特别是如果你仍然想要了解它.

如果您正在努力使用缓存清单,请将以下JavaScript添加到主HTML页面,并使用Firefox中的Firebug或Safari中的Debug> Show Error Console在控制台中查看输出.

如果您有任何疑问,请在评论中注明PLMK.

HTH,
j

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

setInterval(function(){cache.update()}, 10000);

Answer 3

有时,应用程序缓存组在MobileSafari中进入错误状态 - 它会下载缓存中的每个项目,然后在最后触发通用缓存错误事件.根据规范,应用程序缓存组基于清单的绝对URL.我发现当发生此错误时,更改清单的路径(例如,cache2.manifest等)会为您提供一个新的缓存组并避免出现问题.我可以保证我们所有的网络应用程序都可以在4.2和4.3全屏下脱机工作.