如何使我的单 HTML 网页在 Chrome 中离线可用？

Question

我在我的网络服务器上托管一个单 HTML 网页（所有设计元素都包含在 .html 文件本身中），并且我希望用户在离线时可以使用该网页。它应该是这样工作的：当用户在线时，他访问我的网页，Chrome将.html文件保存在本地；当用户离线并尝试访问我的网页时，Chrome 会使用本地 .html 文件。即使在离线模式下，JavaScript 也必须在网页上运行。用户在访问我的页面时绝不能看到“您处于离线状态”错误消息，并且我的页面保存的副本不得在浏览器缓存中过期至少 2 周。一切都必须为用户自动运行，无需更改 Chrome 设置，也无需安装 Chrome 扩展程序。这可能吗？ 包含的 JavaScript 足够智能，可以使用

window.localStorage

保存数据，并在用户再次在线时立即与服务器同步。

Answer 1

您可以设置 HTTP 标头，使其在 2 周或更长时间后过期。但如果有人清除缓存（例如有时删除浏览器历史记录），它就会消失。

https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa

这是指南 --->

https://davidwalsh.name/cache

Answer 2

在 Firefox 中，可以在文件/脱机工作中启用（强制）脱机模式。

在 Chrome 中，可以在开发者工具中为当前选项卡启用（强制）离线模式（Ctrl-Shift-

J

）：在网络选项卡中，启用离线模式。 在 Firefox 55 中，离线缓存似乎默认工作（不需要

manifest.json

）。 Chrome 需要 Service Worker 才能使页面离线可用。

以下是如何在 JavaScript 中检测离线模式：

<script>document.write('navigator.onLine=' + navigator.onLine);</script>