diff --git a/package.json b/package.json index 4d06d63..5a7cb64 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@gera2ld/plaid": "~2.5.5", "@gera2ld/plaid-common-ts": "~2.5.1", "@gera2ld/plaid-rollup": "~2.5.0", + "@types/dom-navigation": "^1.0.6", "del-cli": "^4.0.1", "husky": "^8.0.1", "typedoc": "^0.23.10" diff --git a/src/index.ts b/src/index.ts index cb8371d..9ac7748 100644 --- a/src/index.ts +++ b/src/index.ts @@ -34,12 +34,33 @@ function hookHistory() { }); } +function hookNavigation() { + if (historyHijacked) return; + + // The Navigation API is experimental and support for it is still limited. + // See the browsers that support it below: + // https://developer.mozilla.org/en-US/docs/Web/API/Navigation + if ( + typeof window !== "undefined" && + window.navigation && + window.navigation.addEventListener + ) { + historyHijacked = true; + window.navigation.addEventListener("navigate", handleNavigate); + return true; + } + return false; +} + function handleNavigate() { navigateCallbacks.forEach((callback) => callback()); } export function onNavigate(callback: () => void) { - hookHistory(); + // Prefer the modern Navigation API when it is available + if (!historyHijacked && !hookNavigation()) { + hookHistory(); + } navigateCallbacks.add(callback); return () => { navigateCallbacks.delete(callback);