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

时间:2015-09-24 16:06:41

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

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

2 个答案:

答案 0 :(得分:4)

  

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

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

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

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

  

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

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

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

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

答案 1 :(得分:0)

嗯..

解决方案1:

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

解决方案2:

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

# version 1.0.0

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

解决方案3:

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

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