Question

我正试图让网页脱机。

我已将<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文件并刷新网页，我看不到更改。如果我清除或禁用缓存并刷新，我会看到预期的更改。

我需要做些什么来确保如果服务器可以访问，我将始终为该页面的实时版本及其所有资源提供服务？

Answer 1

我需要做些什么才能确保，如果服务器可以访问，我就是总是提供页面的实时版本及其所有资源吗？

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

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

这就是为什么HTML标准的Offline Web applications部分现在这样说的原因：

此功能正在从Web平台中删除。（这是一个需要很多年的漫长过程。）使用任何一个目前，离线Web应用程序功能非常不受欢迎。改为使用服务工作者。

解决此问题并使客户端使用缓存内容退出的唯一方法是：从服务器中完全删除cache.manifest文件。

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

好消息是，在工作中有一个更好的离线Web应用程序解决方案：Service Worker - 更具体地说，是服务工作者Cache和CacheStorage接口。

Answer 2

嗯..

解决方案1：

现在您可以使用ServiceWorkers，但只能使用HTTPS。

解决方案2：

您可以在清单文件中添加散列线和版本号，例如

# version 1.0.0

并在每次要更新缓存中的文件时更改它

解决方案3：

你可以使用清单，如果在线浏览器将获得在线数据，如果没有，你可以写一些js代码来获取一些保存的数据..也许来自indexedDB或localStorage

了解更多信息，请阅读This Article

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

2 个答案: