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

我正在尝试使网页脱机可用

我已将

添加到我的页面

我已使用以下内容创建了

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

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

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

不幸的是，这里的简单答案是：你不能。来真的也就是说，如果您使用的是缓存清单，至少不会。这是HTML5 appcache/离线缓存机制中众所周知的严重设计缺陷。它基本上被设计破坏了

这就是为什么不再推荐使用appcache的原因。只是太坏了

这就是为什么HTML标准的一节现在说：

此功能正在从Web平台中删除。 （这是一个耗时多年的漫长过程。）使用 目前非常不鼓励使用脱机Web应用程序功能。 改用服务人员

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

缓存.manifest

文件

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

好消息是，有一个更好的离线Web应用程序解决方案正在开发中：-更具体地说，是服务人员和接口。

嗯

解决方案1：

现在，您可以使用ServiceWorkers，但只能在HTTPS上工作

解决方案2：

您可以向清单文件添加哈希行和版本号，如

# version 1.0.0

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

解决方案3：

您可以使用manifest，如果在线，浏览器将获取在线数据，如果不在线，您可以编写一些js代码来获取一些保存的数据。。可能来自indexedDB或localStorage

---

要了解更多信息，请盲目阅读，我认为浏览器总是更喜欢缓存。也许在您的情况下，应该使用另一种存储方式…@kaido，是否有其他方式脱机显示页面？将文件直接存储在本地计算机上不是一个可行的解决方案。嗯，我考虑过indexDB，但你是对的，它可能不适合这么多数据。也许对随机url变量（

url+？+Math.random（）

）的javascript调用是一种始终更新它的方法，但不知道如果无法访问服务器，它将如何运行