1

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

I have a case where:

  • the program is started, while the network is connected, and loads the url https://localhost/my_site
  • the user pushes a button which triggers a fetch call
  • during that time, the network is disconnected,
  • the service worker detects this state and returns a cached offline page
  • the javascript code checks the response content type, finds that it is text/html (instead of the original response that was supposed to be e.g. application/json)
  • the javascript code renders the offline page (by setting "window.location.href = response.url"). The offline url is https://localhost/static/offline/offline.html
  • at this point, the address bar of the sites shows the offline 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.

How can the user get back to the original url: https://localhost/my_site ?

Thanks,
Avner

EDIT:

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

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);

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

Avner Moshkovitz
  • 1,138
  • 1
  • 18
  • 35

1 Answers1

0

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:

  • detect if the fetch failed because of network disconnect
    I do this by checking if(response.url == "https://localhost/static/offline/offline.html")

  • if yes, replace the content of the existing page by using: 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)

  • stop using window.location.href to load the offlin page. This has the benefits of: prevent reloading of the page which reloads the headers and the resources, which slows down the response, and prevent changing the link in the address bar, so that the user can restore the last page by just refreshing the page, when the network re-connects.
Avner Moshkovitz
  • 1,138
  • 1
  • 18
  • 35