无法让网络应用程序在 iPod 上脱机工作答案

【问题标题】：Can't get a web app to work offline on iPod无法让网络应用程序在 iPod 上脱机工作
【发布时间】：2010-11-20 01:26:59
【问题描述】：

我编写了一个基本的密码管理器类型的 Web 应用程序，可以在移动设备上离线运行（在第 4 代 iPod Touch 上进行测试）。我已将应用程序添加到主屏幕，当 iPod 在线并可以访问服务器时，一切正常。一旦我将 iPod 离线，当我打开应用程序时，会出现以下对话框：

无法打开 PwdThing

PwdThing 无法打开，因为它没有连接到 Internet

应用的单个静态 HTML 文件 (passwordthing.html) 指向清单文件：

<html manifest="cache.manifest">
...

cache.manifest 文件包括应用程序使用的所有文件（包括jQuery Mobile 文件）：

CACHE MANIFEST
passwordthing.html
passwordthing.js
...

并且cache.manifest文件设置为text/cache-manifest在.htaccess文件中的作用：

AddType text/cache-manifest .manifest

所有源文件都在Github 上（this commit 是撰写本文时的版本），我也设置了一个public server 来安装它。

为什么我的应用无法离线工作？

【问题讨论】：

您应该将 chrome 指向您的应用程序，看看您是否遇到任何缓存错误。
@hvgotcodes 我刚刚发现缓存错误（错误的文件名），如果您可以根据您的评论添加新答案，我会接受它:-)
完成——您可能仍然希望在每次发布时始终更改清单名称。否则，文件可能会更改，但名称保持不变，并且不会更新。

标签： jquery html web-applications

【解决方案1】：

我唯一能想到的是您没有更改文件，并且移动 safari 已经缓存了清单的旧版本。向您的清单添加评论。您可能还想尝试更改清单文件本身的名称；我必须这样做才能让我的 iPad 缓存 - 每次我更新我的应用程序时，我都会更改清单的名称以包含日期。

请注意，iOS4.2 有更好的清单支持。当它结束时，您可能会看到情况有所改善。

编辑——或者，事实证明，它只是一个错误的文件名。 ;) （请参阅有关问题的 cmets）。

【讨论】：

谢谢，尝试更改清单文件名，但没有区别 :-(
@ben 您是否尝试在 chrome 中加载您的应用并查看控制台？

【解决方案2】：

[[在下面复制my answer from here，因为它可能适用于：]]

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

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

调试 HTML 5 离线应用缓存乔纳森·斯塔克

如果您希望提供对 Web 应用程序的离线访问，HTML5 中可用的离线应用程序缓存是杀手锏。但是，它是一个需要调试的巨型 PITA，尤其是当您仍在努力解决它时。

如果您在处理缓存清单时遇到困难，请将以下 JavaScript 添加到您的主 HTML 页面，并使用 Firefox 中的 Firebug 或 Safari 中的 Debug > Show Error Console 在控制台中查看输出。

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

【讨论】：

【解决方案3】：

另外，请确保 cache.manifest 具有与您在 HTML 文件中匹配的正确 BOM（在我的情况下为 UTF-8）。如果您只有一个非 BOM ASCII 文件，并且 Content Type 设置为 UTF-8，则缓存将失败

某人。

克里斯汀·布尔森

【讨论】：