Html 离线 iOS 网络应用：加载我的清单，但不能离线工作

Offline iOS web app: loads my manifest, but doesn't work offline

提问by Ken

I'm writing a web app to be used offline on iOS. I've created a manifest, am serving it up as text/cache-manifest, and it usually works fine, when running inside Safari.

我正在编写一个要在 iOS 上离线使用的网络应用程序。我创建了一个清单，将其作为 提供text/cache-manifest，并且在 Safari 中运行时它通常可以正常工作。

If I add it as an app to my home screen, then turn on Airplane mode, it can't open the app at all -- I get an error and it offers to close the app. (I thought this was the entire purpose of an offline app!)

如果我将它作为应用程序添加到我的主屏幕，然后打开飞行模式，它根本无法打开该应用程序 - 我收到一个错误，并提供关闭该应用程序。（我认为这是离线应用程序的全部目的！）

• When I load the app a first time when online, I can see in my logs that it's requesting every page listed in the manifest.

• If I turn off Airplane mode, and load the app, I can see the first file it's requesting is my main.html file (which is both listed in the manifest, and has the manifest=...attribute). It then requests the manifest, and all my other files, getting 200's for all (and 304's for anything requested a second time during this load).

• When I load the page in Chrome, and click around, the logs show the only thing it's trying to reach on the server is "/favicon.ico" (which is a 404, and which I don't think iOS Safari tries to load, anyway). All of the files listed in the manifest are valid and served without error.

• The Chrome inspector lists, under "APPLICATION CACHE", all the cached files I've listed which I expect. The entire set of files is about 50 KB, way under any limit on offline resources that I've found.

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

• 如果我关闭飞行模式并加载应用程序，我可以看到它请求的第一个文件是我的 main.html 文件（它都列在清单中，并具有manifest=...属性）。然后它请求清单，以及我所有的其他文件，获得 200 的所有文件（并且在此加载期间第二次请求的任何内容都获得 304 文件）。

• 当我在 Chrome 中加载页面并单击时，日志显示它试图在服务器上访问的唯一内容是“/favicon.ico”（这是一个 404，我认为 iOS Safari 不会尝试加载， 反正）。清单中列出的所有文件都是有效的，并且不会出错。

• Chrome 检查器在“应用程序缓存”下列出了我列出的所有我期望的缓存文件。整个文件集大约为 50 KB，远低于我发现的离线资源的任何限制。

Is this supposed to work, i.e., am I supposed to be able to create an offline iOS app using only HTML/CSS/JS? And where do I go about figuring out why it's failing to work offline?

这是否应该有效，即我是否应该能够仅使用 HTML/CSS/JS 创建离线 iOS 应用程序？我该去哪里弄清楚为什么它无法离线工作？

(Related but doesn't sound quite the same to me, since it's about Safari and not a standalone app: "Can't get a web app to work offline on iPod")

（相关但对我来说听起来不太一样，因为它是关于 Safari 而不是一个独立的应用程序：“无法让网络应用程序在 iPod 上离线工作”）

回答by Elvis Pfutzenreuter

I confirm that name 'cache.manifest' solved the offline caching problem in IOS 4.3. Other name simply did not work.

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

回答by Bert F

I found debugging HTML5 offline apps to be a pain. I found the code from this article helped me figure out what was wrong with my app:

我发现调试 HTML5 离线应用程序很痛苦。我发现这篇文章中的代码帮助我弄清楚我的应用程序出了什么问题：

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

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

Debugging HTML 5 Offline Application Cache by Jonathan Stark

If you are looking to provide offline access to your web app, the Offline Application Cache available in HTML5 is killer. However, it's a giant PITA to debug, especially if you're still trying to get your head around it.

If you are struggling with the cache manifest, add the following JavaScript to your main HTML page and view the output in the console using Firebug in Firefox or Debug > Show Error Console in Safari.

If you have any questions, PLMK in the comments.

HTH,
j

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

如果您希望提供对 Web 应用程序的离线访问，HTML5 中可用的离线应用程序缓存是杀手锏。然而，这是一个巨大的 PITA 调试，特别是如果你仍然试图解决它。

如果您在缓存清单方面遇到困难，请将以下 JavaScript 添加到您的主 HTML 页面，并使用 Firefox 中的 Firebug 或 Safari 中的调试 > 显示错误控制台查看控制台中的输出。

如果您有任何问题，请在评论中提出 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);

回答by Joseph

Sometimes an application cache group gets into a bad state in MobileSafari — it downloads every item in the cache and then fires a generic cache error event at the end. An application cache group, as per the spec, is based on the absolute URL of the manifest. I've found that when this error occurs, changing the path to the manifest (eg, cache2.manifest, etc) gives you a fresh cache group and circumvents the problem. I can vouch that all of our web apps work offline in full-screen with 4.2 and 4.3.

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

回答by martypicco

I have found that clearing the Safari cache after enabling Airplane mode to be an effective way of testing whether the app is really functioning offline.

我发现在启用飞行模式后清除 Safari 缓存是测试应用程序是否真正离线运行的有效方法。

I have sometimes been fooled into thinking that the application cache was working when it wasn't.

我有时被愚弄，认为应用程序缓存在工作时却没有工作。

回答by jsejcksn

No offline web app (as of iOS 4.2) can run without an internet connection (which means Airplane mode, too) when using <meta name="apple-mobile-web-app-capable" content="yes" />in the html head section. I have verified this with every example I've seen and the ones that use Safari to render the site work fine, but when you throw in that meta tag, it won't work. Try your app without it and you'll see what I mean.

<meta name="apple-mobile-web-app-capable" content="yes" />在 html head 部分中使用时，没有离线 Web 应用程序（从 iOS 4.2 开始）可以在没有互联网连接（这也意味着飞行模式）的情况下运行。我已经用我见过的每个示例以及使用 Safari 渲染站点的示例都验证了这一点，但是当您插入该元标记时，它将无法正常工作。尝试没有它的应用程序，你会明白我的意思。

回答by CK Lee

I had struggled with this iOS 4.3 "no offline cache" problem since I updated my iPad to 4.3.1 from 4.2. I saw in another post in this site that it was working again in 4.3.2. So I updated by iPad again, now to iOS 4.3.3. But still couldn't get the offline caching to work until I renamed my manifest file to "cache.manifest". Then the caching started working again and I could run my HTML5 offline app from the Home Screen. I did not need to put the favicon.ico in to the cache manifest. And I also had full screen going (setting the "apple-mobile-web-app-capable" to "yes").

自从我将 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”）。

回答by Hellojeffy

I found this solution that seemed to work for me, since I also ran into this problem during my development. This fix has worked fine for me so far and also for other people that I've asked to test it with, and I'm able to get it running offline (in airplane mode) and off the home screen after caching and whatnot. I've written a post about it on my site:

我发现这个解决方案似乎对我有用，因为我在开发过程中也遇到了这个问题。到目前为止，此修复程序对我以及我要求对其进行测试的其他人都运行良好，并且我能够使其脱机运行（在飞行模式下）并在缓存等之后离开主屏幕。我在我的网站上写了一篇关于它的帖子：

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

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

1. Delete your current web app icon on the home screen.
2. Go to settings and clear your Safari browser cache.
3. Double tap your home button to open the multitasking bar. Find the Safari one, hold your finger down on it, and exit it.

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

Please let me know if this works for you also! Good luck!

请让我知道这是否也适用于您！祝你好运！

回答by Graeme Leighfield

I've written an app and it works fine through the mobile browser, but when adding the desktop... Doesnt work. I guess apple have given up on IOS4 and all efforts are now on OS5. Shame :(

我编写了一个应用程序，它通过移动浏览器运行良好，但是在添加桌面时...不起作用。我猜苹果已经放弃了 IOS4，现在所有的努力都在 OS5 上。耻辱:(

回答by Mr Speaker

I have one potential workaround for this - it seems a bit crazy, but here goes... I work with the cache.manifest and full screen apps a lot (here's a test if you need: http://www.mrspeaker.net/2010/07/12/argy-bargy/- add to home screen then turn on flight mode and it launches - at least, as of iOS 4.2.1)

我有一个潜在的解决方法 - 看起来有点疯狂，但这里是......我经常使用 cache.manifest 和全屏应用程序（如果你需要，这里有一个测试：http://www.mrspeaker.net /2010/07/12/argy-bargy/- 添加到主屏幕，然后打开飞行模式并启动 - 至少，从 iOS 4.2.1 开始）

One weird thing I found is that sometimes it seems that some kind of "meta" information in files can mess them up from being cached - Have you ever noticed that in bash that if you do a "ls" some files (depending on your colour settings) are highlighted for no apparent reason? Files can have meta data that the operating system (I think) adds automagically - and there are ways to remove it... I can't remember why but here's some more details: Strip metadata from files in Snow Leopard

我发现的一件奇怪的事情是，有时文件中的某种“元”信息似乎会使它们因缓存而混乱 - 您是否注意到在 bash 中，如果您执行“ls”某些文件（取决于您的颜色）设置）没有明显原因突出显示？文件可以包含操作系统（我认为）自动添加的元数据 - 并且有办法将其删除......我不记得为什么，但这里有更多细节：从 Snow Leopard 中的文件中剥离元数据

After tearing my hair out one day - and refusing to give up because I knew it SHOULD have worked... Chrome was saying it loaded all the files, but ended with a generic error. In the end I recreated the project structure with blank files and copy/pasted the contents over. It worked - started caching as it was supposed to!

在有一天把我的头发撕掉后 - 并拒绝放弃，因为我知道它应该有效...... Chrome 说它加载了所有文件，但以一个通用错误结束。最后，我用空白文件重新创建了项目结构并复制/粘贴了内容。它起作用了 - 开始按预期进行缓存！

When I looked at the files I noticed there was some meta info. I tried scrubbing this info and the original project worked again. I'm not sure this was the reason it worked again - perhaps it was just a coincidence.

当我查看文件时，我注意到有一些元信息。我尝试清除此信息，原始项目再次运行。我不确定这就是它再次起作用的原因——也许这只是一个巧合。

Because it worked, I didn't think too much about it. The same problem happened again some months later and the copy/paste trick worked again. I was busy, so I didn't investigate further - but vowed I would get to the bottom of it the next time it happened.... but I haven't had to yet.

因为它奏效了，我没有想太多。几个月后同样的问题再次发生，复制/粘贴技巧再次起作用。我很忙，所以我没有进一步调查 - 但发誓下次发生时我会追查到底......但我还没有必要。

Phew. Anyway, glad I got to write that down somewhere...

呼。不管怎样，很高兴我能把它写在某个地方......

[UPDATE: months and months later - I've not been able to reproduce this, so I don't think it's the metadata]

[更新：几个月又几个月后 - 我无法重现这一点，所以我认为这不是元数据]

回答by JakeCigar

I have several working offline and on/offline web apps.

我有几个离线和在线/离线网络应用程序。

When I turn off airport mode, I get a request for the manifest and some other files.

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

I don't get requests for images, JavaScript, CSS or cached AJAX files.

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

If you see requests for your resources, IOS doesn'thave them cached.

如果您看到对资源的​​请求，则 IOS不会缓存它们。

Safari in general is more picky with manifests.

一般来说，Safari 对清单更加挑剔。

I suggest you try Safari on your computer.

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