Navigator.sendBeacon()

navigator.sendBeacon() メソッドは、 HTTP でウェブサーバーに非同期に少量のデータを送るために使用することができます。

構文

navigator.sendBeacon(url, data);

引数

url
url 引数は、 data が送られる解決済みの URL を示します。
data
data 引数は、送るデータを含む ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData, ReadableStream, URLSearchParams のいずれかのオブジェクトです。

返値

sendBeacon() メソッドはユーザーエージェントが転送キューにデータを入れられた時は true を返します。それ以外の時は false を返します。

解説

このメソッドはアナリティクスや診断コードでよくみられる、文書をアンロードする前にウェブサーバにデータを送信しようとするニーズに対応します。少しでも早くデータを送ると、データを収集する機会を失う可能性があります。しかし、文書のアンロード時に確実にデータが送信されるようにするのは開発者にとってずっと難しいことでした。ユーザーエージェントは通常 unload ハンドラーの中で生成された非同期 XMLHttpRequest を無視するからです。

この問題を解決するために、アナリティクスや診断コードは伝統的に unload または beforeunload イベントハンドラーの中で、同期 XMLHttpRequest を使ってデータを送信してきました。 同期 XMLHttpRequest は、文書をアンロードするプロセスをブロックするため次の操作が遅くなったように見えます。結果として、本当の原因はひとつ前のページにあるにも関わらず、次のページの読み込みが遅いのだとユーザは認識してしまいます。

これらのデータを確実に送信するためにいくつかの回避策が使われています。このような手法のひとつは、データを送信するために unload ハンドラー内で <img> 要素を作成して、その src 属性を設定することでアンロードを遅延させる方法です。ほとんどのユーザーエージェントは、未完了の画像のロードを完了するためにアンロードを遅延させるため、アンロード中にデータを送信することができます。もうひとつの手法は、 unload ハンドラー内で数秒間何もしないループを作成して、アンロードを遅らせ、データをサーバーに送信する方法です。

これらの手法はコーディングパターンとして好ましくないだけでなく、いくつかの手法は信頼性が低く、どの手法も次のページヘの遷移パフォーマンスが低下したと感じさせます。

次の例は unload ハンドラーで同期 XMLHttpRequest を送ってサーバにデータを送信しようとする理論的なアナリティクスのコードです。これはページのアンロードを遅延させます。

window.addEventListener("unload", logData, false);

function logData() {
  var client = new XMLHttpRequest();
  client.open("POST", "/log", false); // third parameter indicates sync xhr
  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
  client.send(analyticsData);
}

そこで sendBeacon() の出番です。 sendBeacon() メソッドを使うことで、アンロードが遅延したり次のナビゲーションにパフォーマンスの影響を与えたりすることなく、ユーザーエージェントが転送できる時に、データは非同期にウェブサーバーに転送されます。これはアナリティクスデータの送信に関する全ての問題を解決します。データは確実に、非同期に、そして次のページの読み込みに影響を与えずに送信されます。さらに、そのコードは、実際に他のどんなテクニックよりも簡単です。

次の例は、 sendBeacon() メソッドを使用してサーバーにデータを送信する、理論的なアナリティクスのコードパターンです。

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log", analyticsData);
}

XHR と同様に、ビーコンによるリクエストは sendBeacon() が呼び出された時点で有効な関連する Cookie が一緒に送信されます。

仕様書

仕様書 状態 備考
Beacon
sendBeacon() の定義
勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
sendBeaconChrome 完全対応 39
補足
完全対応 39
補足
補足 Starting in Chrome 59, this method cannot send a Blob whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283.
Edge 完全対応 14Firefox 完全対応 31IE 未対応 なしOpera 完全対応 26
補足
完全対応 26
補足
補足 Starting in Opera 46, this method cannot send a Blob whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283.
Safari 完全対応 11.1WebView Android 完全対応 40
補足
完全対応 40
補足
補足 Starting in Chrome 59, this method cannot send a Blob whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283.
Chrome Android 完全対応 42
補足
完全対応 42
補足
補足 Starting in Chrome 59, this method cannot send a Blob whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283.
Firefox Android 完全対応 31Opera Android 完全対応 26
補足
完全対応 26
補足
補足 Starting in Opera 46, this method cannot send a Blob whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283.
Safari iOS 完全対応 11.3Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報