离线iOS Web应用:加载我的清单,但不能离线使用


74

我正在编写一个可在iOS上离线使用的网络应用。我已经创建了一个清单,将其用作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而不是独立的应用程序:“无法使Web应用程序在iPod上脱机工作”)

Answers:



7

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

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

Jonathan Stark调试HTML 5脱机应用程序缓存

如果您希望提供对Web应用程序的脱机访问,则HTML5中可用的“脱机应用程序缓存”非常有用。但是,这是一个巨大的PITA,需要调试,尤其是如果您仍在努力解决问题时。

如果您在缓存清单中苦苦挣扎,请在主HTML页面中添加以下JavaScript,并使用Firefox中的Firebug或Safari中的“调试”>“显示错误控制台”在控制台中查看输出。

如有任何疑问,请在评论中添加PLMK。

HTH,
Ĵ

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

1
这是JS的简洁点,但是到目前为止,它并没有帮助我学习任何新知识。日志中的所有下载/检查/空闲均完全符合我的预期。
肯(Ken)

@Ken-很遗憾听到这个消息。它无疑帮助我缩小了错误范围(尽管找出错误的确切原因仍然很痛苦)。它还为我提供了有关缓存是否成功加载/重新加载的良好反馈(在知道这一点之前,我将在每次更改后都进行脱机测试-知道这一点之后,我知道我需要成功获取updateready事件,甚至值得尝试一下)离线)。
Bert F

嗯 我是否需要担心updatereadyswapCache()等?我的印象是,由于我正在制作一个完全脱机运行的应用程序(在初始加载后根本没有服务器交互),所以我可以将文件名放在缓存清单中,就是这样。它比我的情况复杂吗?
肯(Ken)

5

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


3

<meta name="apple-mobile-web-app-capable" content="yes" />在html头部分中使用时,没有Internet连接(也意味着飞行模式)的任何脱机Web应用程序(自iOS 4.2起)都无法运行。我已经看过每一个示例,并且使用Safari渲染网站的示例都可以验证这一点,但是当您插入该meta标签时,它将无法正常工作。尝试没有它的应用程序,您将明白我的意思。


1
@ pattern86有趣的是,我在这里有一个网站(仍在开发中,恐怕无法共享),使用<meta name =“ apple-mobile-web-app-capable” content =“ yes” / >。我可以关闭浏览器和离线Web应用程序,打开飞行模式,并且仍然可以正常加载离线Web应用程序。触发此错误是否需要其他行为?我想确保我们不会在野外碰到它……
罗恩

1
奇怪的是,PieGuy也为我工作。我正在使用4.2(8C134),即4.2GM。我将尝试更新至4.2.1,然后看看会发生什么事情:(
罗文

@Rowan我指的是将脱机Web应用程序添加到主屏幕。如果您在Safari中将它们添加为书签并在其中使用它们,它仍然可以正常工作。尚未在iOS 4.3中测试过。
jsejcksn 2011年

@ pattern86是的,我还指的是主屏幕Web应用程序。我有机会用4.2.1和4.3测试我的网站-在两种情况下,它都工作正常。因此,这里似乎还有其他作用(清单对许多事物都非常敏感),但清单作为一个整体似乎确实能够按预期起作用。
罗恩

@Rowan我很高兴您能正常工作!这个周末我会尝试的。
jsejcksn 2011年

3

我发现启用Airplane模式后清除Safari缓存是测试应用程序是否真正脱机的有效方法。

有时,我有时会以为应用程序缓存在不工作时就在起作用。


2

自从我将iPad从4.2更新到4.3.1以来,我一直在努力解决这个iOS 4.3“没有离线缓存”的问题。我在该站点的另一篇文章中看到它在4.3.2中又可以工作了。因此,我再次通过iPad更新,现在为iOS 4.3.3。但是,直到我将清单文件重命名为“ cache.manifest”后,离线缓存仍然无法正常工作。然后缓存再次开始工作,我可以从主屏幕运行HTML5离线应用程序。我不需要将favicon.ico放入缓存清单中。而且我也有全屏显示(将“ apple-mobile-web-app-capable”设置为“ yes”)。


1

我有几个脱机和联机/脱机网络应用程序。

当我关闭机场模式时,我收到清单和其他一些文件的请求。

我没有收到图像,JavaScript,CSS或缓存的AJAX文件的请求。

如果看到对资源的​​请求,则IOS不会将其缓存。

Safari通常对清单更挑剔。

我建议您在计算机上尝试使用Safari。


不,如上所述(Safari与Chrome相同,此处为AFAICT),它从不尝试/favicon.ico从桌面浏览器请求任何资源(除外)。唯一的方法是从iOS Safari进入飞行模式(或处于脱机状态,可能是脱机)。

我想看一下页面。我在家里的Mac上运行chrome / safari / firefox,在iPhone和iPad上运行iOS。
JakeCigar 2011年

1

我今天在iOS 4.3上遇到了同样的问题。通过添加favicon.ico文件并将其添加到清单中,我能够解决此问题。



1

经过数天的时间,使用Web服务器的HTTP身份验证使脱机Web应用程序在iPhone / iPod Touch上运行后,我发现了以下有用的块:

  1. 点击“添加到主屏幕”时,请确保Safari在Web应用程序的URL根目录下。我使用jQuery Mobile,有时会添加带有“ /#pageId”的链接。造成麻烦。

  2. 串行运行Ajax调用。仅当您的Web应用程序使用HTTP身份验证时,这才可能很重要,但是我的应用程序在页面加载时并行触发了整个Ajax调用,这导致该应用程序挂在“ apple-touch-startup-image”上。

  3. 离线时Ajax调用“成功”(至少使用Prototype.js)。测试Ajax响应中的实际数据,而不仅仅是HTTP状态。我用它来测试是否显示缓存的(SQL)或实时数据。

  4. 在清单中使用“ NETWORK:\ n * \ n”。据我所知,这是对“ CACHE:”部分中未明确说明的所有内容的综合说明。使用Chrome浏览器以确保您的清单正确无误。查看Chrome控制台是否有错误。

  5. 没有直接关系,但是让我有点困惑,openDatabase.transaction()调用是异步的!含义,的JS代码交易后的线(execute()error()success())将执行BEFOREsuccess()功能。

祝好运!


1

我发现这个解决方案似乎对我有用,因为在开发过程中我也遇到了这个问题。到目前为止,此修补程序对我和对我要求进行测试的其他人都有效,并且可以使它脱机(在飞行模式下)运行,并在缓存后退出主屏幕。我在我的网站上写了一篇关于它的文章:

http://www.offlinewebapp.com/solved-apple-mobile-web-app-capable-manifest-error/

  1. 在主屏幕上删除当前的Web应用程序图标。
  2. 转到设置并清除Safari浏览器缓存。
  3. 双击您的主页按钮以打开多任务栏。找到一个Safari,用手指按住它,然后退出。

请让我知道这是否也适合您!祝好运!


1

我已经编写了一个应用程序,它可以通过移动浏览器正常运行,但是在添加桌面时...不起作用。我想苹果已经放弃了IOS4,现在所有的努力都在OS5上了。丢人的:(


1

我对此有一个潜在的解决方法-似乎有点疯狂,但是这里...我大量使用cache.manifest和全屏应用程序(如果需要,进行测试:http ://www.mrspeaker.net / 2010/07/12 / argy-bargy / -添加至主屏幕,然后打开飞行模式并启动-至少从iOS 4.2.1开始)

我发现的一件奇怪的事情是,有时文件中的某种“元”信息似乎会使它们从高速缓存中弄乱了-您是否曾在bash中注意到,如果对文件进行“ ls”处理(取决于您的颜色)设置)没有明显原因突出显示?文件可以包含操作系统(我认为)会自动添加的元数据-并且有一些方法可以删除它...我不记得为什么了,但是这里有一些详细信息:从Snow Leopard中的文件中元数据

在一天梳完头发后-因为我知道它应该起作用而拒绝放弃... Chrome表示已加载所有文件,但以一般错误结束。最后,我用空白文件重新创建了项目结构,并复制/粘贴了内容。它可以正常工作-按预期开始缓存!

当我查看文件时,我发现有一些元信息。我尝试清理此信息,原始项目再次工作。我不确定这是它再次起作用的原因-也许这只是一个巧合。

因为它有效,所以我对此没有考虑太多。几个月后,同样的问题再次发生,复制/粘贴技巧再次起作用。我很忙,所以我没有做进一步的调查-但发誓下次发生时我将深入研究……。但是我还没有做。

ew 无论如何,很高兴我能把它写下来……

[更新:几个月后的几个月-我无法重现此内容,因此我认为它不是元数据]

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.