編集

Navigation API が Baseline Newly Available に

#Navigation API #History API #View Transitions API #web.dev

Navigation APIが主要ブラウザで Baseline Newly Availableとなった。SPA 向けのナビゲーションを History API より簡潔に扱える。

主な特徴：

  • リンククリック、戻る/進む、navigation.navigate() を単一の navigate イベントで処理
  • event.intercept() で URL 更新・履歴スタック・フォーカス復元をブラウザ任せに可能
  • フォーム送信は event.formData で取得し、同一ドキュメント内でリロードなしに処理可能
  • scroll: 'manual' と event.scroll() でコンテンツ描画後のスクロール復元を制御可能
  • View Transitions API と組み合わせて document.startViewTransition() で画面遷移アニメーションを実装可能

基本的な intercept の例：

javascript
navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url);
  event.intercept({
    async handler() {
      await renderContent(url.pathname);
    }
  });
});

フォーム送信を intercept する例（POST のみ）：

javascript
navigation.addEventListener('navigate', (event) => {
  if (event.formData && event.canIntercept) {
    event.intercept({
      async handler() {
        const data = event.formData;
        await postFormData(data);
        renderSuccessMessage(data.get('username'));
      }
    });
  }
});

出展：Navigation API - a better way to navigate, is now Baseline Newly Available

編集