Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Beacons

navigator.sendBeacon() メソッドは、ウェブサーバーに非同期に少量のデータを HTTP POST リクエストで送ります。

これはウェブサーバーに分析データを送信するために使用するためのものであり、 XMLHttpRequest を使用するような、分析を送信するための古い技術の問題のいくつかを避けています。

ネットワーク通信

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
sendBeacon
39
14
31
11.1
42
11.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Chrome 59 以降、このメソッドでは、CORS のセーフリストに登録されていないタイプの `Blob` を送信できなくなりました。これは、この変更によって生じるセキュリティ上の問題に対する対策が見つかるまでの暫定的な変更です。詳細については、バグ 40087600 を参照してください。
注釈 1件
実装メモ
  • Chrome 59 以降、このメソッドでは、CORS のセーフリストに登録されていないタイプの `Blob` を送信できなくなりました。これは、この変更によって生じるセキュリティ上の問題に対する対策が見つかるまでの暫定的な変更です。詳細については、バグ 40087600 を参照してください。

基本構文

JAVASCRIPT 
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
});

実務での使いどころ

  • Beacons の活用

    navigator.sendBeacon() メソッドは、ウェブサーバーに非同期に少量のデータを HTTP POST リクエストで送ります。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク