v146 · Web APIs · Post-Commit Demo

Post-Commit Demo

Navigate between the virtual pages below and watch the log. The navigate intercept handler runs after commit — you'll see the URL change in the display first, then the post-commit log entry appears. The ordering is guaranteed: precommit work → URL commits → post-commit handler → finish.

Checking Navigation API support…

navigation phases

navigate event URL not yet committed. event.destination.url available. Good for: start loading spinner, abort in-flight requests.
URL commits Address bar updates. navigation.currentEntry changes. History stack updated. User can see new URL.
handler() body event.intercept({ handler: async () => { /* here */ } }) runs after commit. Good for: fetch new page content, update app state, stop spinner.
navigatesuccess Fires after all handlers resolve. Final cleanup point.

demo

Virtual SPA pages

Current: —
Navigate between pages to see the phase ordering…

code

navigation.addEventListener('navigate', event => {
  if (!event.canIntercept) return;

  const dest = event.destination.url;

  event.intercept({
    async handler() {
      // Runs AFTER URL has committed (Chrome 146+)
      // At this point: navigation.currentEntry.url === dest

      console.log('post-commit');
      console.log('new URL:', location.href);   // already updated

      // Simulate fetching page data
      await new Promise(r => setTimeout(r, 300));
      renderPage(dest);
    }
  });

  // Code here still runs precommit
  // (event handler body = precommit; handler: async fn = post-commit)
  startSpinner(); // precommit
});

see also