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

发布于 2024-12-08 03:56:36 字数 2277 浏览 0 评论 0原文

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

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

在线主页的前几行代码是:

<!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

据称,托管公司已将“text/cache-manifest”内容类型添加到 IIS 中扩展名为 .manifest 的所有文件中。我认为这是有效的,因为当我在 Firefox 中查看文件时 http://www.mydomain.com /online/cache.manifest Firebug 告诉我内容类型是:

Content-Type    cache-manifest

或者应该返回“text/cache-manifest”?也许这就是问题所在?

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

任何人都可以建议可能出了什么问题吗? - 因为我有点困惑?

I'm trying to get HTML5 offline storage working in a basic way. I read the information on DiveIntoHTML5 and it seems to make sense, but it just doesn't seem to be working for me. I wondered if someone could help me to debug this.

Basically I've set up a home page for the application, index.htm. So my application is on the web at http://www.mydomain.com/online/index.htm. Users will visit this page, where they'll ordinaraily do all of their stuff day-to-day. Visiting this URL will create a bunch of cached files so they can then visit http://www.mydomain.com/offline and view a working version of the application when they're offline.

The top few lines of code in the online homepage are:

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

I've generated a plain text file called 'cache.txt' and added the following content to it in Notepad:

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

I've then renamed this file to 'cache.manifest' and uploaded it to the root of the online application (at the same level as my home-page) so that it's accessible at http://www.mydomain.com/online/cache.manifest.

The hosting company have supposedly added the content type of 'text/cache-manifest' to all files with the extension of .manifest in IIS. I think this is working because when I view the file in Firefox at http://www.mydomain.com/online/cache.manifest Firebug tells me the content type is:

Content-Type    cache-manifest

Or should this be returning 'text/cache-manifest'? Perhaps this is the problem?

When I view the offline storage folder on my system (C:\Users\Me\AppData\Local\Mozilla\Firefox\Profiles\b12u6xza.default there's nothing in there related to this domain at all.

Can anyone suggest what might be going wrong - as I'm a little stumped?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

挽心 2024-12-15 03:56:36

首先,规范已更改,您现在应该使用 .appcache 作为清单扩展。

其次,mime 类型应该按照您所说的 text/cache-manifest 进行定义。我与 IIS 并没有真正的关系,但似乎有两种方法可以添加此 MIME 类型,或者通过 IIS 管理 UI 或通过 web.config 文件

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

First of all, the specification have changed, you should now use .appcache as manifest extension.

Second, the mime type should be defined as you say text/cache-manifest. I'm not really related to IIS but seems like there's two ways to add this MIME type , either trough IIS administration UI or via web.config file

Also, I would recommend you testing this with Google Chrome, since its console show all the manifest parsing data and errors, including when the manifest MIME type is not being correctly recognized.

杀手六號 2024-12-15 03:56:36

您必须注意一些问题:

  1. Chrome(我猜最后所有浏览器)仅通过安全请求处理缓存文件。如果您的请求不安全,您的缓存将不会被执行。
  2. 移动浏览器(至少,我可以测试的设备)不关心安全或不安全的请求。 但我更愿意为政治变革做好准备
  3. 我绞尽脑汁试图理解为什么我的文件在 Android 中运行良好,而在 iOS 中却失败,原因是我在隐身模式下运行浏览器。隐身模式下的 iOS 无法缓存页面,并且会出现错误。

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

问候。

There are some issues you have to be care about:

  1. Chrome (And I guess that all the browsers at last) only handles the cache file over secure requests. If your request is not secure, your cache won't be executed.
  2. Mobile browsers (At least, the devices I could test), doesn't care about secure or unsecure requests. But I'd prefer to be ready for the politics change.
  3. I was breaking my head trying to understand why in Android my file worked fine and in iOS it was failing, and the reason was that I was running my browser in incognito mode. iOS in incognito mode can't cache the page, and you get error.

If I find more issues, I'll write it down.

Regards.

半仙 2024-12-15 03:56:36

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

我在 safari 中测试了它并且工作正常。 问题出在 Chrome 浏览器上。我也按照另一个用户的建议尝试了 https,但这也没有解决问题。因此,chrome 中可能有一个扩展禁止它使用缓存文件。在解决问题之前,首先在标准浏览器 Safari、FireFox、IE、Opera 中进行测试。不要在非标准浏览器(例如 Brave)中测试,它在其中不起作用。

来自 google 的官方消息

确认在版本 61 及更高版本中弃用。我跑80了

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

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

意识到 applicationcache 已被弃用,但同时
未批准的替换(服务人员)尚未替换
我们拥有的遗留系统。

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

通过浏览器检查似乎这在 Chrome 61 中很常见
和较新的,但它似乎只是最近才显现出来。

Chrome 问题?或者 Chrome 和底层操作系统的组合?我们有
android/windows 从 61 开始都显示出相同的问题。

注意:HTML5 缓存已被弃用,

所有浏览器都将放弃此功能,我注意到它们在任何最新的浏览器中都不起作用。 MDN Mozilla 强烈建议不要使用它。

I spend a lot of time on this (on my own problem), offline cache was not working. Did everything possible I could do, changed cache file name, added handler via htaccess, uploaded the file from local to live server, still the same problem. Finally got some help from this question myself.

I tested it in safari and it was working fine. The problem was Chrome browser. I also tried https as another user suggested, that also did not fix the problem. So may be there is an extension in chrome that is forbidding it from using the cache file. Before troubleshooting your problem first test it in standard browsers Safari, FireFox, IE, Opera. Do not test in non-standard browsers such as Brave, it did not work in it.

Officially from google

Which confirms deprecation in Ver 61 and onward. I am running 80.

Chrome support for applicationcache and manifest for offline html5 application.

Application Cache / Offline Application / Manifest Cache.

Aware that applicationcache has been deprecated, but whilst
replacement (service workers) not ratified have yet to replace in
legacy systems we have.

However, recent browser update seems to have disabled offline
functionality on HTTPS site. Our manifest files are now ignored and
chrome dinosaur displayed instead.

On checking back through browsers seems this is common from Chrome 61
and newer however it only seems to have manifested recently.

Chrome issue? or combination of Chrome and underlying OS? We have
android/windows both showing same problem from 61 onwards.

Note : HTML5 Cache is being deprecated

All browsers are going to drop this feature, I noticed they are not working in any of the latest browsers. This MDN Mozilla strongly advises against it and not to use it.

乞讨 2024-12-15 03:56:36

尝试在 httpd.conf 中添加这些行..这可能会帮助你

AddType text/cache-manifest .manifest

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

try to add these lines in httpd.conf ..this might help you

AddType text/cache-manifest .manifest

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/cache-manifest "access plus 0 seconds"
</IfModule>
心病无药医 2024-12-15 03:56:36

你最好使用chrome的控制台进行测试!(你在chrome的网络中看不到这些)

我的例子(访问:www.mustrank.com/views/1.php)。

看下面chrome的控制台输出,首先创建清单文件“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

应用程序缓存已缓存事件]

You'd better test using chrome's console !(you can't see these in chrome's network)

My example(visit:www.mustrank.com/views/1.php ).

Look at chrome's console output below,manifest file "website.appcache" is created first,and then sources "1.html" and "main.css" are downloaded

[Creating Application Cache with manifest
www.mustrank.com/views/website.appcache 1.php:1

Application Cache Checking event 1.php:1

Application Cache Downloading event 1.php:1

Application Cache Progress event (0 of 2)
www.mustrank.com/views/1.html 1.php:1

Application Cache Progress event (1 of 2)
www.mustrank.com/css/main.css 1.php:1

Application Cache Progress event (2 of 2) 1.php:1

Application Cache Cached event ]

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文