“添加到主屏幕”移动 web 应用程序中的 HTML5 缓存清单似乎不起作用答案

【问题标题】：HTML5 Cache manifest in an "added to homescreen" mobile webapp doesn't seem to work“添加到主屏幕”移动 web 应用程序中的 HTML5 缓存清单似乎不起作用
【发布时间】：2011-04-13 07:26:35
【问题描述】：

我正在开发一个连接到在线数据库的移动 web 应用程序，将该数据库中的数据加载到离线本地 mysqlite 数据库中，然后应该可以离线使用。我让整个数据库工作正常，但该应用仍然无法离线使用，因为它没有正确缓存所有资源。

我的清单如下所示：

CACHE MANIFEST
# Cache manifest version 0.0.5

http://www.mywebsite.com/appfolder/app/detail.html
http://www.mywebsite.com/appfolder/app/index.html
http://www.mywebsite.com/appfolder/app/list.html
http://www.mywebsite.com/appfolder/css/style.css
http://www.mywebsite.com/appfolder/src/iscroll.js
http://www.mywebsite.com/appfolder/js/jquery-1.5.1.min.js
http://www.mywebsite.com/appfolder/thumbs/1872A.jpg
http://www.mywebsite.com/appfolder/thumbs/1913.jpg
http://www.mywebsite.com/appfolder/thumbs/1916.jpg
http://www.mywebsite.com/appfolder/thumbs/1925.jpg
http://www.mywebsite.com/appfolder/carsimages/1872A_1.jpg
http://www.mywebsite.com/appfolder/carsimages/1872A_2.jpg

NETWORK:

# All URLs that start with the following lines
# are whitelisted.

CACHE:

# Additional items to cache.

FALLBACK:

应用程序在在线时运行流畅，但一旦我离线，我会收到以下错误消息：“Myappname 无法打开，因为它没有连接到互联网”（在“添加到主屏幕”中 - 在 iPad 上查看）和 “Safari 无法打开页面，因为它没有连接到互联网”（在同一台 iPad 上的 safari-view 中）

我已经采取的步骤：通过将其添加到我的 .htaccess 文件中，确保清单由正确的内容类型提供服务

AddType text/cache-manifest .manifest

任何想法为什么这不起作用？

【问题讨论】：

有没有人在 v4.3 中看到离线模式缓存和主屏幕 HTML5 webapps 的明确答案？我已经尝试了这个线程中的所有补救措施，但没有运气。是坏了还是有解决方法？
杰夫，试试我的做法：stackoverflow.com/questions/5645798/…
你搞定了吗？我可以问一下，一旦用户单击链接，您是如何阻止您的主屏幕应用程序打开 safari 的？

标签： caching web-applications html mobile-safari manifest

【解决方案1】：

对于 iPad，缓存清单文件必须命名为“cache.manifest”。这解决了我的问题。

【讨论】：

+1 我很惊讶地发现这对我也有用，我已经验证 iPad 正在获取我的清单并对其进行操作（我添加了一些我的应用程序实际上没有引用的文件，它们出现在服务器日志中）。
好吧，我现在在多个项目上都没有设置特定的名称。我会尝试找出这个特定项目出了什么问题。

【解决方案2】：

如果您要连接到在线资源，我希望在 NETWORK 部分中看到该资源的 URL。应用程序访问的每个 URL 都需要显式或隐式地列在清单中。

尝试添加：

NETWORK:
*

表示在线时可能会访问任何 URL。

【讨论】：

那不是说离线什么都不能访问吗？
仅当 CACHE 部分下没有任何内容时。

【解决方案3】：

资源必须位于 CACHE 部分下。见http://www.html5rocks.com/en/tutorials/appcache/beginner/

【讨论】：

【解决方案4】：

我很好奇 Liz Daly 的回答。我正在使用我刚刚（遗憾地）从 iOS 4.2 更新到 iOS 4.3 的 iPad。我有一个运行良好的 HTML5 离线应用程序，它可以从主屏幕运行而无需 Internet 连接，并且能够将状态保存到 localStorage 存储中。

在我将 iPad 更新到 iOS 4.3 后，这个应用程序现在在没有 Internet 连接的情况下无法运行，每次我从主屏幕启动它时都会重新加载页面，而且当我关闭电源时 localStorage 会被清除iPad。

所以，我在 iPad 上的 iOS 4.3 上运行我的离线应用程序时遇到了真正的问题，Apple 没有消息何时或是否会解决此问题（至少将其恢复为相同的功能） iOS 4.2)。

【讨论】：

【解决方案5】：

更新到我之前的帖子。我现在可以在我的 iPad 上运行我的 HTML5 离线应用程序。首先，我相信您需要将 iPad 更新到至少 4.3.2（未经证实，但我现在使用的是 4.3.3）。更重要的是，缓存清单文件必须命名为“cache.manifest”。在我的实验中，如果您使用任何其他名称，则它不会脱机运行。我让我的离线运行在全屏模式下（即将“apple-mobile-web-app-capable”设置为“yes”），它将以航空公司模式从主屏幕运行。

所以 Liz Daly 部分正确。离线模式似乎只能在上述限制下工作。

【讨论】：

调用清单 cache.manifest 对我没有帮助。据我所知，我做的一切都是正确的，包括设置 mime-type。
我有 4.3.2 的 iPad，也有同样的问题。这对我有用：stackoverflow.com/questions/5645798/…

【解决方案6】：

我在 iPad 上遇到了同样的问题。事实证明，它不喜欢在文件夹中缓存清单文件。我有/Content/cache.manifest，但它不起作用（离线时应用程序不会从主屏幕加载）。当我将清单文件移动到应用程序根目录并将清单引用更改为cache.manifest 时，它开始工作。

（它不必被称为cache.manifest - 我让它与CacheManifest.ashx一起工作）

【讨论】：

【解决方案7】：

我了解在 iOS 4.3 中 HTML 5“离线网络应用”功能已损坏：

http://www.theregister.co.uk/2011/03/15/apple_ios_throttles_web_apps_on_home_screen/

更重要的是，这样的“主屏网络应用”不能使用各种网络缓存系统，包括 HTML5 应用缓存，这意味着它们不能被缓存以离线运行。

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

【讨论】：

那篇文章充满了错误信息。离线缓存在所有 iOS 版本的全屏模式下都能正常工作——我的应用程序使用它。