离线iOS web应用:加载我的manifest，但不能离线

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上离线使用的web应用。我已经创建了一个清单，并将它作为文本/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).

如果我关闭飞机模式，并加载应用程序，我可以看到它请求的第一个文件是我的主文件。html文件(在清单中列出，并且清单=…)属性)。然后它请求manifest和我的所有其他文件，获得所有的200(在此负载期间，任何请求的304)。
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.

当我在Chrome中加载页面并单击时，日志显示它在服务器上试图访问的唯一内容是“/favicon”。(这是一个404页面，我不认为iOS Safari会尝试加载它)。清单中列出的所有文件都是有效的，并且服务无误。
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.

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

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的，而不是一个独立的应用:“不能让一个web应用在iPod上离线工作”)

13 个解决方案

#1

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

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

#2

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/

Debugging HTML 5 Offline Application Cache by Jonathan Stark

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

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.

如果您希望为web应用程序提供脱机访问，那么HTML5中可用的脱机应用程序缓存是致命的。但是，这是一个需要调试的巨大的PITA，特别是如果您还在试图了解它的话。

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.

如果您正在与缓存清单做斗争，请将以下JavaScript添加到主HTML页面，并使用Firefox中的Firebug或Safari中的Debug >查看控制台中的输出。

If you have any questions, PLMK in the comments.

如果你有任何问题，请在评论中提问。

HTH,
j

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

#3

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。我发现当这个错误发生时，会改变到manifest的路径(例如，cache2)。清单等)给你一个新的缓存组和规避问题。我可以保证我们所有的web应用程序都可以在4.2和4.3的全屏下运行。

#4

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.

当使用在html head部分时，任何离线web应用程序(从ios4.2开始)都不能在没有互联网连接(也就是飞机模式)的情况下运行。我已经通过我看到的每一个例子和使用Safari的例子来验证这一点，使网站工作正常，但是当你加入那个元标签时，它就不起作用了。试试没有它的应用，你就会明白我的意思了。

#5

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.

我有时会误以为应用程序缓存在不工作的时候还在工作。

#6

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之后，我就一直纠结于这个ios4.3“没有离线缓存”的问题。我在这个网站的另一篇文章中看到它在4.3.2中再次工作。我又用iPad更新了，现在是iOS 4。3。但是，直到我将我的清单文件重命名为“cache.manifest”时，仍然无法获得离线缓存。然后缓存又开始工作了，我可以在主屏幕上运行HTML5离线应用。我不需要放图标。将ico输入到缓存清单中。而且我也有全屏显示(将“苹果移动网络应用程序”设置为“yes”)。

#7

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

我有几个离线和离线的web应用。

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't have them cached.

如果看到对资源的请求，IOS没有缓存它们。

Safari in general is more picky with manifests.

Safari通常对清单更挑剔。

I suggest you try Safari on your computer.

我建议你在电脑上试试Safari。

#8

I have run into the same problem today on iOS 4.3. I was able to fix the problem by adding a favicon.ico file and also adding it to the manifest.

我今天在iOS 4.3上遇到了同样的问题。我可以通过添加图标来解决这个问题。ico文件并将其添加到清单中。

#9

I've written an offline app that still seems to work in 4.2 and 4.2.1; the post is a little dusty, but the code still runs:

我写过一个离线应用程序，在4.2和4.2.1中仍然有效;这篇文章有点脏，但代码仍然在运行:

http://kentbrewster.com/backchannel/

Remy Sharp has a newer post with code that also works, here:

Remy Sharp有一个更新的贴子，上面的代码也可以使用。

http://remysharp.com/2011/01/31/simple-offline-application/

His app:

他的应用程序:

http://rem.im/boggle/

#10

After days of messing with getting offline web apps to work on an iPhone/iPod Touch using the Webserver's HTTP authentication, I discovered these useful nuggets:

经过几天的折腾，让离线web应用程序使用Webserver的HTTP身份验证在iPhone/iPod Touch上工作，我发现了这些有用的东西:

Make sure Safari is at the URL root of the web app when tapping "Add to Home Screen". I used jQuery Mobile and was sometimes adding the link with"/#pageId". Caused trouble.

当点击“添加到主屏幕”时，确保Safari位于web应用程序的URL根目录。我使用了jQuery Mobile，有时还添加了带有“/#pageId”的链接。造成麻烦。
Run your Ajax calls in serial. This might only be important if your web app is using HTTP authentication, but my app was firing a whole slew of Ajax calls on page load in parallel and it caused the app to hang on the "apple-touch-startup-image".

连续运行Ajax调用。如果你的web应用程序正在使用HTTP身份验证，这可能很重要，但我的应用程序在页面负载上同时启动了大量Ajax调用，并导致该应用程序挂在“苹果-触摸-startup-image”上。
Ajax calls are "successful" when offline (at least using Prototype.js). Test for an actual piece of data in the Ajax response, not just on the HTTP status. I used this to test for displaying cached (SQL) or live data.

离线时Ajax调用是“成功的”(至少使用Prototype.js)。测试Ajax响应中的实际数据片段，而不仅仅是HTTP状态。我用它来测试显示缓存(SQL)或实时数据。
In the manifest use "NETWORK:\n*\n". From what I could muster, this is a catch-all statement for anything not explicit in the "CACHE:" section. Use Chrome to make sure your manifest is correct. Look at Chrome's console for errors.

在显式使用“网络:\n*\n”中。从我所能收集到的信息来看，这是“缓存:”一节中不明确的所有语句。使用Chrome确保您的清单是正确的。看看Chrome的控制台是否有错误。
Not directly related, but tripped me up for a bit, openDatabase.transaction() calls are ASYNCHRONOUS! Meaning, the line of JS code after transaction (execute(), error(), success()) will execute BEFORE the success() function.

事务()调用是异步的!意思是，事务(执行()、error()、success())之后的JS代码行将在success()函数之前执行。

Good luck!

好运！

#11

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/

Delete your current web app icon on the home screen.
在主屏幕上删除当前的web应用程序图标。
Go to settings and clear your Safari browser cache.
转到settings并清除Safari浏览器缓存。
Double tap your home button to open the multitasking bar. Find the Safari one, hold your finger down on it, and exit it.
双击home键打开多任务栏。找到Safari 1，把你的手指按住它，然后退出。

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

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

#12

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上。遗憾:(

#13

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)

我有一个可能的解决方法——这看起来有点疯狂，但是……我使用缓存。清单和全屏应用程序很多(如果你需要的话，这是一个测试: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]

[更新:几个月和几个月后——我还没能复制这个，所以我不认为这是元数据]

#1