Fetch APIのkeepaliveを使ってページ離脱後でもレスポンスを処理する

Firefox 133がサポートしたことで、全主要ブラウザでFetch APIのkeepaliveオプションが使えるようになった。

keepaliveオプションを使うことで、ページを閉じたり離脱したりしたあとでもレスポンスを適切に扱える。

fetch(
  'https://example.com/api/data',
  {
    method: 'GET',
    keepalive: true
  }
)

DevToolsで確認してみると、keepalive: trueフラグがない場合はリクエスト途中でページを離脱するとStatus: unknownになるが、keepalive: trueフラグがある場合はStatus: 200になった。（※この挙動が正しいのかは判断できない）

以下のように fetch().then()でチェーンしても後続の処理がされるわけではないようだ。

fetch(
  'https://example.com/api/data',
  {
    method: 'GET',
    keepalive: true
  })
  .then(data => console.log(data))

いまのところ有効な使い方がわからないので、ちゃんと調べたい。