「sendBeacon」とは
プログレッシブウェブアプリなど、クライアントからリクエストを送信する場合に使用する2つのオプション、XMLHttpRequestまたは新しい「フェッチ」をおそらくご存知でしょう。しかし、分析データのような非常に小さなデータチャンクを送信するために特別に設計された3番目のオプションがあることをご存知ですか？これは「sendBeacon」と呼ばれる関数であり、最近のブラウザでは「navigator」オブジェクトから利用できます。
「sendBeacon」の使い方
小さなデータチャンクにこの専用のリクエスト関数を使用するのは本当に簡単です。ナビゲーターの「ナビゲーター」機能と「sendBeacon」機能の両方が使用可能である限り、送信するURLとペイロードを提供するだけです。
以下の種類のデータを送信できます。
- ArrayBuffer
- ArrayBufferView
- ブロブ
- DOMString
- FormData
- URLSearchParams
「sendBeacon」を呼び出すたびに、指定されたエンドポイントにPOSTリクエストが送信されます。
async function track(payload: TrackPayload){
// We're using 'optional property access'
// for a simple and clean implementation.
//
// You could of course also use nested if(){ ... }.
await navigator?.sendBeacon?.('/track', payload);
}
// The following example is taken directly
// from the MDN page, linked in the addendum
// at the end of this page.
//
// It demonstrates the usage with the
// 'visibilitychange'-event when the user
// could close your web app.
document.addEventListener('visibilitychange', function logData() {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/log', analyticsData);
}
});
何が違うの
「sendBeacon」の主な利点は、リクエストが実際にエージェントによってキューに入れられることです。つまり、現在クライアントがロードされているブラウザによってキューに入れられます。ネットワーク接続が利用可能である限り、データが送信されます。利用可能なデータがない場合、またはユーザーが（リクエストが送信される前に）Webアプリを閉じた場合でも、ブラウザーは、最終的にはリクエストが送信されることを保証します。
他の一般的なリクエスト関数は、ユーザーがウェブアプリを閉じたとき（たとえば、タブを閉じたとき）にリクエストが送信されることを保証しません。 「sendBeacon」も完全に非同期であり、ユーザーのページ履歴の分析データを送信しながら、ウェブアプリの別のページに移動するときに遅延が発生することはありません。
Webアプリを段階的に強化する
分析データのカスタムエンドポイントがある場合は、この新しいAPIをぜひお試しください。ユーザーがAPIをサポートしていないブラウザでウェブアプリを呼び出す可能性があることに注意してください（これはほとんどありませんが）。そのため、使用する前にサポートを簡単に確認するだけで、アプリを段階的に拡張できます。
