レスポンスの待機を必要とせずに、ウェブページからウェブサーバーにデータを送信する必要がある場合があります。たとえば、ユーザーがページを離れる前にアナリティクス データや診断データを送信したい場合があります。
通常、終了前にデータを送信するには、unload イベントをリッスンする必要がありました。これは、リクエストをそれより前に送信すると、データが不完全になる可能性があるためです（たとえば、終了直前に発生したクリックが検出されない可能性があります）。ただし、ほとんどのブラウザでは、通常、アンロード ハンドラで行われた非同期 XMLHttpRequest は無視されるため、アンロード ハンドラで送信されるリクエストは同期である必要がありました。この方法では、新しいページをレンダリングする前にリクエストが返されるのを待つ必要があるため、ナビゲーションが遅くなります。
Beacon API は、ページのアンロード イベントで他のコードを遅らせることなく、または次のページ ナビゲーションのパフォーマンスに影響を与えることなく、小さなデータ ペイロードを含む HTTP リクエストをブラウザからウェブサーバーに非同期で送信できるようにすることで、この問題を解決します。
navigator.sendBeacon() メソッドは、ブラウザによって送信されるデータをできるだけ早くキューに登録しますが、ナビゲーションを遅くすることはありません。ブラウザが転送するデータを正常にキューに追加できた場合は、true を返します。それ以外の場合は false を返します。
次のようなアドレスのページからビーコン データを受信できるサーバー エンドポイントがあるとします。
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
pagehide イベント ハンドラに sendBeacon() メソッドを追加すると、ユーザーがページから離れたときにエンドポイントがデータを受信します。
Chrome DevTools の [Network] タブで [ログを保持] チェックボックスをオンにして検査すると、ページから移動したときに上記のエンドポイントに送信される HTTP POST リクエストが表示されます。
または、PutsReq 検査ページにアクセスして、ビーコンデータが受信されたかどうかを確認することもできます。
ビーコンデータを送信できる Polymer カスタム要素（<beacon-send>）もあります。ebidel.github.io/beacon-send でご確認ください。