如何让我的单一HTML网页在Chrome中脱机使用?

时间:2017-08-21 11:30:06

标签: javascript google-chrome webpage offline-browsing

我正在我的网络服务器上托管单个HTML网页(.html文件中包含的所有设计元素),我想让我的用户在离线时可以使用它。它应该是这样的:当用户在线时,他访问我的网页,Chrome在本地保存.html文件;当用户离线并且他试图访问我的网页时,Chrome正在使用本地.html文件。即使在离线模式下,JavaScript也必须在网页上运行。访问我的页面时,用户绝不会看到您离线错误消息,并且保存的页面副本不得在浏览器缓存中过期至少2周。一切都必须自动为用户工作,无需更改Chrome设置,也无需安装Chrome扩展程序。这可能吗?

包含的JavaScript非常智能,可以使用window.localStorage保存数据,并在用户再次联机时立即与服务器同步。

2 个答案:

答案 0 :(得分:1)

我自己从未这样做,但您可以使用Cache API(service-worker API的一部分)来存储URL可寻址资源(如html文件)。

您可以设置HTTP标头,使其在2周或更长时间后过期。但如果有人清除了他们的缓存(有时候如果删除他们的浏览器历史记录),它就会消失。

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

这是一个指南---> https://davidwalsh.name/cache

答案 1 :(得分:0)

此页面似乎正在执行此操作:https://chris.bolin.co/offline/。它适用于Firefox和Chrome。在Chrome中,它似乎正在使用服务工作者。 Firefox 55也可以使用服务工作者。

服务工作者可以使用缓存API下载页面;但是缓存API并没有在Firefox中使用用户的cookie,因此缓存的内容可能与用户看到的不同。

在Firefox中,可以在文件/脱机工作中启用(强制)离线模式。

在Chrome中,可以为开发人员工具中的当前标签启用(强制)离线模式(Ctrl-Shift- J ):在“网络”标签中,启用“离线”。

在Firefox 55中,离线缓存似乎默认工作(不需要manifest.json)。 Chrome需要服务工作人员使页面脱机使用。

以下是在JavaScript中检测离线模式的方法:

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