なぜkeepaliveが重要なのか
Webサイトを運営していると、「ユーザーがページを閉じる直前に、ログや分析データを送信したい」という場面によく遭遇します。しかし、通常のHTTPリクエストは、ページが遷移したりタブが閉じられたりした瞬間にブラウザによって「キャンセル」されてしまうことがよくあります。
この問題を解決するのが Request.prototype.keepalive です。これを使うと、ページが閉じられようとしている最中でも、ブラウザがバックグラウンドでリクエストを完了させるまで待機してくれるようになります。データ漏れを防ぎ、精度の高い計測を行いたい場合に必須の技術です。
基礎知識：リクエストとブラウザの仕組み
Webブラウザは、ページを閉じる際、パフォーマンスを優先して実行中の通信を中断します。しかし、Google Analyticsのような計測ツールや、サーバーへの状態保存を行うリクエストが途中で切れると、データが正しく届きません。
keepaliveプロパティは、Fetch APIのオプションの一つです。これを「true」に設定することで、ブラウザに対して「このリクエストはページ離脱後もバックグラウンドで処理し続けてほしい」という指示を送ることができます。
実装方法：keepaliveを有効にする
実装は非常にシンプルです。fetch関数の第2引数（オプションオブジェクト）の中に「keepalive: true」を追加するだけです。これにより、ブラウザのライフサイクルに依存せず、リクエストが確実に送信されるようになります。
サンプルプログラム
以下のコードは、ボタンクリック時またはページ離脱時に、確実にサーバーへログを送信する例です。そのままコピーして、必要に応じて送信先のURLを書き換えて試してみてください。
応用・注意点
現場で使う際に知っておくべき注意点が2つあります。
1. ペイロードサイズの制限:
keepaliveを使用する場合、送信できるデータのサイズに制限（通常64KB程度）があります。大きなデータを送ろうとするとエラーになる可能性があるため、あくまでログや短い文字列などの軽量なデータを送る用途に限定しましょう。
2. navigator.sendBeaconとの違い:
似た機能に「navigator.sendBeacon」がありますが、こちらはPOSTメソッド専用で、ヘッダーのカスタマイズができません。fetch APIのkeepaliveは、ヘッダーの指定やメソッドの選択が柔軟に行えるため、現在のWeb開発ではこちらが推奨されています。
まずは小さなログ送信から導入し、確実にデータを届ける仕組みを整えていきましょう！