断网恢复后如何重新加载原始url

Question

我有一个 webapp，它使用一个 service worker 来检测网络何时离线，并提供一个缓存的离线页面。

我有一个案例：

• 程序启动，同时网络连接，加载urlhttps://localhost/my_site
• 用户按下按钮触发获取调用
• 在此期间，网络断开，
• Service Worker 检测到此状态并返回缓存的离线页面
• javascript 代码检查响应内容类型，发现它是 text/html（而不是应该是例如 application/json 的原始响应）
• javascript 代码呈现离线页面（通过设置“window.location.href = response.url”）。离线网址为https://localhost/static/offline/offline.html
• 此时站点地址栏显示离线url。

我希望用户在重新连接网络后刷新页面（例如按 F5）以重新加载原始内容。
但是因为地址栏现在显示的是离线url，刷新页面只会一次又一次地重新加载离线页面。

用户怎样才能回到原来的url：https://localhost/my_site？

谢谢，
阿夫纳

---

编辑：

为什么不将服务工作者的离线页面作为 localhost/my_site 提供服务

这可能发生在不同的页面上。您将如何以编程方式更改 response.url？
我尝试使用基于here的解决方案。
当 fetch 返回时，我会检查响应类型。
如果是 text/html 我从响应中加载新页面，然后 使用：

window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", queryUrl1);

设置url，但它只改变历史中的url，而不是当前呈现的url...

Answer 1

问题是由以下情况引起的：
我的 wep 应用程序是一个单页应用程序 (SPA)，其中 DOM 树是通过 ajax 命令在前端更改的。
在我的例子中，等待获取响应的函数需要内容类型 application/json。
当 Service Worker 检测到网络断开时，它会返回内容类型的响应：text/html（离线页面）。
由于没有响应错误，该函数尝试提取 response.json() 但因为类型是文本而不是 json，（由于离线页面） 解析失败并抛出错误，text/html 数据（离线页面）被忽略。
使用window.location.href = response.url 强制重新加载页面会导致程序加载页面，这会更改地址栏，从而在网络重新连接时阻止用户通过刷新恢复原始页面

解决办法是：

• 检测是否由于网络断开导致提取失败
  我通过检查 if(response.url == "https://localhost/static/offline/offline.html")
  

• 如果是，请使用以下命令替换现有页面的内容： document.getElementsByTagName("html")[0].innerHTML = dataAsText;
  

  这有一个额外的好处，如果我们在另一个页面上发生网络断开连接，一旦网络重新连接，刷新将加载上次访问的页面（保持上次状态）
  

• 停止使用 window.location.href 加载离线页面。这有以下好处： 防止重新加载页面，重新加载标题和资源，从而减慢响应速度，并防止更改地址栏中的链接，以便用户在网络重新连接时只需刷新页面即可恢复上一页.