Die Navigation API in modernen Browsern

Die Navigation API ist ein neuerer und leistungsfähigerer Ersatz für die History API. Sie behandelt Navigationen als eigenständige Objekte, die Sie abfangen, abbrechen und abwarten können – näher an der tatsächlichen Handhabung des Routings in SPAs im Jahr 2024.

window.navigation stellt die Eintragsliste, den aktuellen Eintrag und das navigate-Ereignis bereit. navigation.entries() gibt jeden Eintrag im aktuellen Verlauf zurück; navigation.currentEntry ist der aktive Eintrag. Verglichen mit der History API bietet dies mehr Informationen als deren undurchsichtige length-Eigenschaft und der nicht weiter aufgeschlüsselte Zustand.

Hören Sie auf navigation.addEventListener("navigate", handler), um jede Navigation innerhalb des Dokuments abzufangen – Link-Klicks, Formularübermittlungen, Zurück- und Vorwärtsnavigation sowie programmatische Navigationen. Ein einziger Hook ersetzt das uneinheitliche Zusammenspiel aus abgefangenen Klicks, popstate und Formular-Submit-Listenern.

Der Aufruf von e.intercept({ handler }) übernimmt die Navigation. Der Handler gibt ein Promise zurück; solange dieses noch aussteht, befindet sich die Navigation „in Bearbeitung“ und die URL ist bereits aktualisiert. Dadurch wird das bisherige Race zwischen URL-Änderung und Rendern der Ansicht aufgelöst.

Nicht alle Navigationen können abgefangen werden (Navigationen zu anderen Ursprüngen, Downloads). Prüfen Sie e.canIntercept, bevor Sie intercept aufrufen. Diese defensive Abfrage in einer Zeile unterscheidet SPA-Navigationen von tatsächlichen Wechseln zu anderen Ursprüngen.

navigation.navigate(url, options) löst programmatisch eine Navigation aus, vergleichbar mit einem Klick. Das zurückgegebene Objekt enthält die Promises committed und finished, sodass Sie entweder auf die URL-Änderung oder den vollständigen Abschluss des Handlers warten können.

Jeder Navigationseintrag besitzt einen stabilen key (auch über Neuladevorgänge hinweg) und eine id (pro Sitzung). Verwenden Sie den Schlüssel für dauerhaften Zustand (gespeicherte Scrollpositionen, Formularentwürfe) und die ID für vorübergehenden Zustand. Der einzige Zustand der History API war ein undurchsichtiges Objekt.

navigation.back() und navigation.forward() sind praktische Wrapper um traverseTo. Sie geben dasselbe Promise-Paar { committed, finished } zurück, sodass Sie die Zurück-Navigation abwarten können, bevor Sie nachfolgende Aufgaben ausführen.

Wenn der Benutzer auf einen zweiten Link klickt, während der erste noch gerendert wird, kann die laufende Navigation abgebrochen werden. Der Handler erhält über e.signal ein AbortSignal. Übergeben Sie es an fetch-Aufrufe, damit veraltete Arbeit abgebrochen wird, sobald die neue Navigation beginnt.

Die History API funktioniert, ist aber umständlich: Zustandsänderungen und das Rendern der Ansicht sind entkoppelt, die Klickverarbeitung muss manuell erfolgen, die Koordination mehrerer Listener ist fehleranfällig und die Wiederherstellung der Scrollposition ist unvollständig. Die Navigation API wurde von Anfang an für SPA-Anforderungen entwickelt und löst jedes dieser Probleme.

Chrome und Edge unterstützen die Navigation API. Safari und Firefox sind (Anfang 2026) noch nicht so weit. Veröffentlichen Sie Code mit Feature-Erkennung ("navigation" in window) und verwenden Sie History + popstate als Fallback, wenn die API nicht verfügbar ist. Frameworks wie SvelteKit und TanStack Router kapseln diese Erkennung bereits.

Für neue Projekte, die sich primär an Chromium-Nutzer richten, können Sie sie jetzt einsetzen und den History-Fallback in Kauf nehmen. Für öffentliche Websites mit einem breiten Publikum sollten Sie auf die Unterstützung durch Safari und Firefox warten oder eine Router-Bibliothek verwenden, die beide Varianten abstrahiert. Die einfachere API ist das Warten wert.

Was ist der wichtigste Vorteil des navigate-Ereignisses der Navigation API gegenüber der Kombination aus popstate und manuellem Abfangen von Klicks bei der History API?

Die Navigation API vereinheitlicht die SPA-Navigation unter einem einzigen navigate-Ereignis mit Intercept-/Abbruchsemantik, stabilen Schlüsseln pro Eintrag und dem asynchronen Warten auf Handler. Sie ersetzt das Flickwerk aus History, popstate und dem Abfangen von Klicks. Heute wird sie von Chromium-Browsern unterstützt. Verwenden Sie die Feature-Erkennung und greifen Sie für browserübergreifenden Code auf History zurück, bis Safari und Firefox nachziehen.