Skip to content

Commit

Permalink
feat(core polyfills): Add polyfill for navigation API.
Browse files Browse the repository at this point in the history
This polyfill adds support for the "navigate" event on the navigation
object. We path "history.pushState" and "history.replaceState" to send
the "navigate" event on the "window.navigation" object when the URL
changes.

This polyfill is for current Firefox and Safari. Chrome based browsers
already support this.

More information on:
https://developer.mozilla.org/en-US/docs/Web/API/Navigation/navigate_event
  • Loading branch information
thet committed Jan 7, 2025
1 parent 69b69f3 commit 814c274
Showing 1 changed file with 27 additions and 0 deletions.
27 changes: 27 additions & 0 deletions src/core/polyfills.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,30 @@
true
);
})();

// Navigation polyfill for Firefox and Safari, as of 2024-01-04
// NOTE: this is a very basic polyfill, it only supports firing a `navigate`
// event on location change and even that without interception support, etc.
!(function () {
if (window.navigation == undefined) {
// Create a navigation object on the window
// We create a DOM element for the navigation object so that we can
// attach events on it.
window.navigation = document.createElement("div");

// Patch pushState to trigger an `navigate` event on the navigation
// object when the URL changes.
const pushState = window.history.pushState;
window.history.pushState = function () {
pushState.apply(window.history, arguments);
window.navigation.dispatchEvent(new Event("navigate"));
};

// Same with replaceState
const replaceState = window.history.replaceState;
window.history.replaceState = function () {
replaceState.apply(window.history, arguments);
window.navigation.dispatchEvent(new Event("navigate"));
};
}
})();

0 comments on commit 814c274

Please sign in to comment.