HTML5 仅在不在线时从离线缓存加载页面
HTML5 Load page from offline cache only when not online
我正在尝试使网页脱机可用。
我已将 <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?
不幸的是，这里的简单答案是：你不能。真的。也就是说，至少在您使用缓存清单时不会。这是 HTML5 appcache/offline-cache 机制中众所周知的严重设计错误。它基本上被设计破坏了。
这就是为什么基本上不再推荐使用 appcache 的原因。就是太破了。
这就是为什么 HTML 标准的 Offline Web applications 部分现在这样说：
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—more specifically, the Service Worker Cache and CacheStorage 接口。
嗯..
解决方案 1：
现在您可以使用 ServiceWorkers，但只能通过 HTTPS 工作。
解决方案 2：
您可以向清单文件中添加散列行和版本号，例如
# version 1.0.0
并在每次要更新缓存中的文件时更改它
解决方案 3：
你可以使用 manifest，如果在线，浏览器将获取在线数据，如果不在线，你可以编写一些 js 代码来获取一些保存的数据..可能来自 indexedDB 或 localStorage
有关详细信息，请阅读 This Article
我正在尝试使网页脱机可用。
我已将 <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?
不幸的是，这里的简单答案是：你不能。真的。也就是说，至少在您使用缓存清单时不会。这是 HTML5 appcache/offline-cache 机制中众所周知的严重设计错误。它基本上被设计破坏了。
这就是为什么基本上不再推荐使用 appcache 的原因。就是太破了。
这就是为什么 HTML 标准的 Offline Web applications 部分现在这样说：
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—more specifically, the Service Worker Cache and CacheStorage 接口。
嗯..
解决方案 1：
现在您可以使用 ServiceWorkers，但只能通过 HTTPS 工作。
解决方案 2：
您可以向清单文件中添加散列行和版本号，例如
# version 1.0.0
并在每次要更新缓存中的文件时更改它
解决方案 3：
你可以使用 manifest，如果在线，浏览器将获取在线数据，如果不在线，你可以编写一些 js 代码来获取一些保存的数据..可能来自 indexedDB 或 localStorage
有关详细信息，请阅读 This Article