window.location.href works offline but anchor tag does not

Question

I am building a progressive web app (PWA) that is usable offline.

On the page, I use the link to navigate back to the previous page like this.

<a href="/alink">Back<a>

It doesn't work but causes the No Internet .

On the other hand, the window.location.href does navigate to the previous page even when I'm offline.

Why does this happen? What is the difference between a tag and window.location.href ?

Answer 1

The a tag will redirect to the new page by going forward to it.
However the window.location.href will just change the route in the URL. But not actually redirect the page.

If you want to go back, try using the window history. As this is what things like react router use to move around different paths.

https://developer.mozilla.org/en-US/docs/Web/API/Window/history

Hope this helps.

Answer 2

The a tag always redirects you to a new page which is required a network connection. If you want to get back to the previous page with the a tag. You can use this

<a href="javascript:history.back()">Back</a>

It will navigate you back to the cached page that you loaded before going offline.