断网恢复后如何重新加载原来的url [英] How to reload the original url after recovering from network disconnection

问题描述

我有一个 webapp，它使用一个服务工作者来检测网络何时离线，并提供缓存的离线页面.

I have webapp which uses a service worker that detects, when the network is offline, and serves a cached offline page.

我有一个案例:

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

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

I expect that the user then will refresh the page (e.g. by pressing F5), to reload the original content, once the network is re-connected.
But because the address bar now shows the offline url, refreshing the page will just reload the offline page again and again.

用户如何回到原来的网址:https://localhost/my_site?

谢谢，
阿夫纳

Thanks,
Avner

为什么不直接将 Service Worker 的离线页面作为 localhost/my_site 提供

Why not just serve the offline page from the service worker as localhost/my_site

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

This can happen from various pages. How would you programatically change the response.url?
I tried using the solution based on here.
When the fetch returns, I check the response type.
If it is text/html I load the new page from the response, and then use:

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

设置 url，但它只更改历史记录中的 url，而不更改当前显示的 url...

to set the url, but it only changes the url in the history, not in the currently presented url...

推荐答案

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

The problem was cause by the following situation:
My wep app is a Single Page Application (SPA) where the DOM tree is changes in the front-end via ajax commands.
In my case, the function that waits for the fetch response expects content type application/json.
When the service worker detects a network disconnect, it returns a response of content type: text/html (the offline page).
Since there is no response error, the function tries to extract response.json() but because the type is text and not json, (due to the offline page) the parsing fails and throws an error, and the text/html data (the offline page) is ignored.
Forcing to reload the page with window.location.href = response.url causes the program to load the page, which changes the address bar, which prevents from the user to recover the original page via refresh, when the network re-connects

解决办法是:

The solution is to:

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

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

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

This has the added benefit that if the network disconnect happens while we are on another page, once the network re-connects, refresh will load the last visited page (keep the last state)

这篇关于断网恢复后如何重新加载原来的url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！