Calling `history.pushState` to a different URL triggers a full page navigation

[KonnorRogers]

Prerequisites

• I have written a descriptive issue title
• I have searched existing issues to ensure it has not already been reported

Version (i.e. v2.x.x)

1.0.1-alpha.212

Node.js version (i.e. 18.x, or N/A)

N/A

Operating system

None

Operating system version (i.e. 20.04, 11.3, 10, or N/A)

No response

Description

When calling window.history.pushState({}, "", "http://localhost/new-url") it forces a page navigation.

This feels unexpected as it only happens in FF / Safari. In Chrome, this does not happen, assuming because the polyfill never applies because the polyfill is natively supported.

Steps to Reproduce

import "https://cdn.jsdelivr.net/npm/@virtualstate/navigation@1.0.1-alpha.212/esnext/polyfill.js/+esm"


history.pushState({}, "", "http://localhost:9000/new-url")

And the browser will try to do a new page navigation.

Expected Behavior

the browser should only update the URL in the history. It should not attempt to navigate.

Is there a way to opt-out of this behavior? As it is, I found it interesting in Chrome URLs automatically updated, but with the polyfill I have to call pushState() after calling my navigation handler, unlike in Chrome.

[fabiancook]

In the native implementation history and navigation are completely separate. For the polyfill, history is made use of to back the navigation entries. It was assumed one or the other was used if using the polyfill.

If you're wanting to make use of the history api to manage the URL yourself, but make use of the Navigation API as separated layer, you can construct a new navigation instance and use this as a standalone variable which would completely opt out of the history API backing, but wouldn't persist.

import { Navigation } from "@virtualstate/navigation";

export const navigation = new Navigation();

Alternatively applyPolyfill with history: false can be used, but this too wouldn't be persisted:

import { applyPolyfill } from "@virtualstate/navigation";

applyPolyfill({ history: false });

[fabiancook]

Having a think about this, I wonder if we could maintain the entries in session or local storage instead of history, and then make use of history as only a hint, not the complete backing API here.

Let me know if one of the above doesn't work for your context, improving this front would be a big win for the project.