如何防止Chrome在离线状态下加载缓存的网页？

Question

bounty过期在2小时内。该问题的答案有资格获得+ 50声望赏金。Ali想要引起更多关注对此问题。

重现该问题的步骤：

1. 用户访问网页，请参见下面的代码。
2. 用户关闭Chrome。
3. 设备完全脱机（手动关闭所有网络）。>>
4. 用户在完全脱机时重新打开浏览器。
5. Chrome会自动访问最后访问的页面，即使单击几次刷新，网页也会保存为Online? true的副本。

唯一告诉用户他/他正在查看某种陈旧，完全无法使用的网页副本的是地址栏中的内容：

非技术用户很容易会错过这一点，并想知道为什么页面无法使用...这是糟糕的用户体验。

浏览器和设备：Acer Iconia Tab 10 A3-40 tablet

上的Android 6上的Chrome 81。

该网页通过HTTPS（安全连接）提供。

代码：

const setMsg = (flag) => {
  const p = document.getElementById('msg')
  p.innerHTML = '<b>Online?</b>  ' + flag
}

setMsg(navigator.onLine)

window.addEventListener("online", () => {
  setMsg(true)
})
window.addEventListener("offline", () => {
  setMsg(false)
})
<p id='msg'> </p>

据我所知：

• Chrome不会not在步骤5中重新运行any JavaScript，即使在刷新后也是如此。
• Chrome不会not
也不尊重Cache-Control: private, no-store；经过仔细检查。

到目前为止，我唯一可以防止这种情况发生的方法是注册服务人员。当我注册了服务人员时，将重新运行JavaScript，并且我可以正确并清楚地通知用户她/他处于离线状态。

Without

服务工作者，如何防止Chrome在离线时加载陈旧，无法使用的网页？

通常带有恐龙的“没有互联网”页面是合适的，这就是我对Cache-Control: no-store的期望。

重现问题的步骤：用户访问网页，请参见下面的代码。用户关闭Chrome。设备完全脱机（手动关闭所有网络）。用户重新打开...

Answer 1

非常不雅致的解决方法是使用CSS动画，使“离线”元素在设定的时间后一次全部显示。使用JavaScript，您可以不断重置动画，从而阻止动画显示，除非/直到JavaScript不再运行以重置动画为止。

Answer 2

告诉我，如果我误解了您的要求。