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 が一緒に送信されます。

仕様書

ブラウザーの互換性

関連情報

• navigator