MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Navigator.sendBeacon()

この翻訳は不完全です。英語から この記事を翻訳 してください。

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

navigator.sendBeacon() は HTTP で少量のデータを非同期にサーバに送ることに利用できます。

Syntax

navigator.sendBeacon(url, data);

Parameters

url
The url parameter indicates the resolved URL to which the data is to be transmitted.
data
The data parameter is a ArrayBufferView, Blob, DOMString, or FormData object containing the data to be transmitted.

Return values

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

Description

このメソッドはアナリティクスや診断コードでよくみられるドキュメントをアンロードする前にWebサーバにデータを送信したいというニーズに対応します。
少しでも早くデータを送るとデータを収集する機会を失う可能性がある一方で、ドキュメントのアンロード時に確実にデータが送信されるようにするのは開発者にとってずっと難しいことでした。ユーザーエージェントは通常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()メソッドを使うことで、unloadが遅延したり次のナビゲーションにパフォーマンスの影響を与えたりすることなく、ユーザエージェントが転送できる時に、データは非同期にwebサーバに転送されます。 これはアナリティクス・データの送信に関する全ての問題を解決します。データは確実に、非同期に、そして次のページの読み込みに影響を与えずに送信されます。さらに、そのコードは、実際に他のどんなテクニックよりも簡単に書けます!

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

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

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

Specifications

Specification Status Comment
Beacon
sendBeacon() の定義
勧告改訂案 Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 39.0 (有) 31 (31) 未サポート 26 未サポート
Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未サポート 40.0 (有) 31.0 (31) 2.5 未サポート 未サポート 未サポート 42.0

See also

ドキュメントのタグと貢献者

 このページの貢献者: taise, __ku
 最終更新者: taise,