HTML 5 离线存储缓存清单不起作用答案

【问题标题】：HTML 5 offline storage cache manifest not workingHTML 5 离线存储缓存清单不起作用
【发布时间】：2011-11-30 13:50:38
【问题描述】：

我正在尝试让 HTML5 离线存储以基本方式工作。我阅读了DiveIntoHTML5 上的信息，这似乎是有道理的，但它似乎对我不起作用。我想知道是否有人可以帮助我调试这个。

基本上我已经为应用程序 index.htm 设置了一个主页。所以我的申请在网上http://www.mydomain.com/online/index.htm。用户将访问此页面，他们通常会在其中完成所有日常工作。访问此 URL 将创建一堆缓存文件，以便他们随后可以访问 http://www.mydomain.com/offline 并在离线时查看应用程序的工作版本。

在线首页的前几行代码是：

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
   ...etc

我生成了一个名为“cache.txt”的纯文本文件，并在记事本中添加了以下内容：

CACHE MANIFEST
http://www.mydomain.com/offline/scripts/jquery-1.6.3.min.js
http://www.mydomain.com/offline/scripts/jquery-ui-1.8.16.custom.min.js
http://www.mydomain.com/offline/scripts/modernizr.min.js
http://www.mydomain.com/offline/scripts/json2.min.js
http://www.mydomain.com/offline/scripts/jquery.deserialize.js
http://www.mydomain.com/offline/scripts/jquery.cookie.js
http://www.mydomain.com/offline/scripts/main.js
http://www.mydomain.com/offline/css/main.css
http://www.mydomain.com/offline/css/structure-details.css
http://www.mydomain.com/offline/css/ui-lightness/jquery-ui-1.8.16.custom.css
http://www.mydomain.com/img/header.gif
http://www.mydomain.com/offline/img/bg.png
http://www.mydomain.com/offline/img/header_riser.gif
http://www.mydomain.com/offline/img/logo.png
http://www.mydomain.com/offline/img/offline.png
http://www.mydomain.com/offline/index.htm

然后我将此文件重命名为“cache.manifest”并将其上传到在线应用程序的根目录（与我的主页处于同一级别），以便可以通过http://www.mydomain.com/online/cache.manifest 访问它。

据说托管公司已将“文本/缓存清单”的内容类型添加到 IIS 中所有扩展名为 .manifest 的文件中。我认为这是可行的，因为当我在 Firefox 中查看 http://www.mydomain.com/online/cache.manifest 的文件时，Firebug 告诉我内容类型是：

Content-Type    cache-manifest

或者这应该返回“文本/缓存清单”吗？也许这就是问题所在？

当我查看系统上的脱机存储文件夹 (C:\Users\Me\AppData\Local\Mozilla\Firefox\Profiles\b12u6xza.default 时，其中根本没有与此域相关的任何内容。

谁能指出可能出了什么问题 - 因为我有点难过？

【问题讨论】：

标签： html manifest offline-caching

【解决方案1】：

我花了很多时间在这个（我自己的问题上），离线缓存不起作用。尽我所能，更改缓存文件名，通过 htaccess 添加处理程序，将文件从本地上传到实时服务器，仍然是同样的问题。终于自己从这个问题中得到了一些帮助。

我在 Safari 中对其进行了测试，它运行良好。 问题出在 Chrome 浏览器上。我还按照另一个用户的建议尝试了 https，但也没有解决问题。因此，chrome 中可能有一个扩展名禁止它使用缓存文件。在解决您的问题之前，首先在标准浏览器 Safari、FireFox、IE、Opera 中对其进行测试。请勿在 Brave 等非标准浏览器中进行测试，它在其中不起作用。

来自谷歌的官方

这证实了deprecation in Ver 61 and onward。我跑 80 了。

Chrome 支持应用程序缓存和离线 html5 应用程序清单。

应用程序缓存/离线应用程序/清单缓存。

知道 applicationcache 已被弃用，但同时未批准的替换（服务人员）尚未替换我们拥有的旧系统。

但是，最近的浏览器更新似乎已禁用离线功能 HTTPS 站点上的功能。我们的清单文件现在被忽略了改为显示铬恐龙。

在通过浏览器查看时，这似乎在 Chrome 61 中很常见和更新的，但它似乎只是最近才出现。

Chrome 问题？还是 Chrome 和底层操作系统的组合？我们有 android/windows 从 61 开始都出现同样的问题。

注意：HTML5 缓存已被弃用

所有浏览器都将放弃此功能，我注意到它们不适用于任何最新的浏览器。这个MDN Mozilla 强烈建议不要使用它。

【讨论】：

【解决方案2】：

有一些问题你需要注意：

Chrome（我猜最后是所有浏览器）仅通过安全请求处理缓存文件。如果您的请求不安全，您的缓存将不会被执行。
移动浏览器（至少，我可以测试的设备）不关心安全或不安全请求。 但我更愿意为政治变革做好准备。
我想明白为什么我的文件在 Android 中运行良好而在 iOS 中却失败了，原因是 我在隐身模式下运行我的浏览器。处于隐身模式的 iOS 无法缓存页面，您会收到错误消息。

如果我发现更多问题，我会写下来。

问候。

【讨论】：

您的回答结束了我的搜索。如果请求不安全，您的缓存将不会被执行！我正在努力理解为什么 Manifest 不能在 apache 上工作。
没有，我测试过了，和安全连接没有关系。这应该在本地也可以正常工作，没有任何 https

【解决方案3】：

你最好使用chrome的控制台测试！（你在chrome的网络中看不到这些）

我的例子（访问：www.mustrank.com/views/1.php）。

看下面chrome的控制台输出，首先创建manifest文件“website.appcache”，然后下载源“1.html”和“main.css”

[使用清单创建应用程序缓存 www.mustrank.com/views/website.appcache 1.php:1

应用缓存检查事件1.php:1

应用缓存下载事件1.php:1

应用程序缓存进度事件（0 个，共 2 个） www.mustrank.com/views/1.html 1.php:1

应用程序缓存进度事件（第 1 个，共 2 个） www.mustrank.com/css/main.css 1.php:1

应用程序缓存进度事件 (2 of 2) 1.php:1

应用缓存缓存事件]

【讨论】：

【解决方案4】：

首先，规范已经改变，你现在应该使用.appcache 作为清单扩展。

其次，mime 类型应该按照你所说的text/cache-manifest 来定义。我与 IIS 并没有真正的关系，但似乎有两种方法可以添加这种 MIME 类型，通过IIS administration UI 或通过web.config 文件

另外，我建议您使用 Google Chrome 进行测试，因为它的控制台会显示所有清单解析数据和错误，包括未正确识别清单 MIME 类型时。

【讨论】：

规范说文件可以有任何扩展名

【解决方案5】：

尝试在 httpd.conf 中添加这些行 ..这可能会对您有所帮助

AddType text/cache-manifest .manifest

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/cache-manifest "access plus 0 seconds"
</IfModule>

【讨论】：

这是用于 Apache 还是 IIS？我的环境是 Windows/IIS。