HTML5 仅在不在线时从离线缓存加载页面

标签 html caching html5-appcache offline-caching

我正在尝试使网页离线可用。

我已经添加了 <html lang="en" manifest="cache.manifest">到我的页面。

我创建了 cache.manifest内容如下:

CACHE MANIFEST
css/base.css
http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
http://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.woff
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
css/affixed-sidebar.css
css/bootstrap.css
css/components.css
css/dodfont.css
css/helpers.css
http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
http://www.parsecdn.com/js/parse-1.3.0.min.js
http://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.1/toastr.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js
http://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js
http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js
http://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=js&skin=sunburst
js/components.js
js/so-cat.js
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0
fonts/glyphicons-halflings-regular.woff
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0
fonts/glyphicons-halflings-regular.ttf
http://fonts.googleapis.com/css?family=Raleway:400,200
http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css
fonts/glyphicons-halflings-regular.woff2
fonts/glyphicons-halflings-regular.woff2
fonts/glyphicons-halflings-regular.woff
fonts/glyphicons-halflings-regular.ttf

当我第一次访问 chrome 中的页面时,浏览器将传递页面并缓存页面和所有资源。

我希望当我离开页面并返回时,我将获得页面的实时版本,并且如果服务器不可用,我将只能看到缓存版本。

相反,在第一次访问后的每次访问中,我都会收到页面的缓存版本。我可以确认我看到的是缓存版本,因为如果我更改 html 文件并刷新网页,我看不到更改。如果我清除或禁用缓存并刷新,我会看到预期的更改。

我需要做什么才能确保在服务器可访问的情况下始终为我提供页面及其所有资源的实时版本?

最佳答案

What do I need to do to ensure that, if the server is reachable, I am always served the live version of the page and all of its resources?

不幸的是,这里的简单答案是:你不能。真正的。也就是说,至少在您使用缓存 list 时不会。这是 HTML5 appcache/offline-cache 机制中众所周知的严重设计错误。它基本上被设计破坏了。

这就是为什么基本上不再推荐使用 appcache 的原因。太破了。

这就是为什么 Offline Web applications HTML 标准的一部分现在是这样说的:

This feature is in the process of being removed from the Web platform. (This is a long process that takes many years.) Using any of the offline Web application features at this time is highly discouraged. Use service workers instead.

解决它并让客户端停止使用缓存内容的唯一方法是:从服务器中完全删除您的 cache.manifest 文件。

这样做,他们将返回获取当前内容。

好消息是,有一个更好的离线 Web 应用程序解决方案正在开发中:Service Worker —更具体地说,Service Worker CacheCacheStorage接口(interface)。

关于HTML5 仅在不在线时从离线缓存加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32766064/

相关文章:

JavaScript:多个持久索引变量

javascript - 使用 onClick 事件时函数仅执行一次 [javascript]

java - 在java中返回RedisTemplate对象时初始化默认键值对

caching - 如何更改 Gradle 工件缓存的生存时间?

c++ - 查看缓存缺失 - 简单的 C++ 缓存基准测试

javascript - Cordova 应用程序中的应用程序缓存

iis-7 - 带有IIS7的AppCache MIME类型

html - 调整多张图片大小的最佳方法?

javascript - 使用 Javascript 1 更改背景颜色

html - 尽管 Chrome 正确缓存 Assets ,但应用缓存无法正常工作