ビーコンデータを送信する(Chrome 39)

Ewa Gasperowicz

返信を待たずにウェブページからウェブサーバーにデータを送信すると便利な場合があります。たとえば、ユーザーがページを離れる前に分析データや診断データを送信したい場合があります。

通常、アプリ終了の前にデータを送信すると、unload イベントのリッスンが必要となります。これは、リクエストより早くリクエストを送るとデータが不完全なものになるためです。たとえば、Exit の直前に発生したクリックを見逃してしまう可能性があります。ただし、アンロード ハンドラで送信されるリクエストを同期する必要があるのは、ほとんどのブラウザがアンロード ハンドラで行われた非同期の XMLHttpRequest を無視するためです。この方法では、新しいページがレンダリングされるまでにリクエストが戻ってくるのを待つ必要があるため、ナビゲーションが遅くなります。

Beacon API は、この問題を解決します。HTTP リクエストをブラウザからウェブサーバーに非同期で送信することで、ページのアンロード イベントで他のコードを遅らせたり、次のページ ナビゲーションのパフォーマンスに影響を与えたりする必要がなくなります。

navigator.sendBeacon() メソッドは、データをブラウザによる送信をできるだけ早くキューに登録しますが、ナビゲーションの速度が低下することはありません。ブラウザが転送対象のデータを正常にキューに登録できる場合は、true を返します。それ以外の場合は、false を返します。

次のアドレスのページからビーコンデータを受信できるサーバー エンドポイントがあるとします。

https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop

pagehide イベント ハンドラに sendBeacon() メソッドを追加すると、ユーザーがページから移動したときにエンドポイントがデータを受け取ります。

Chrome DevTools の [Network] タブで [preserve logs] チェックボックスをオンにしていると、ページから移動したときに、上記のエンドポイントに対する HTTP POST リクエストが送信されます。

または、PutsReq 検査ページにアクセスして、ビーコンデータが受信されたかどうかを確認することもできます。

また、ビーコンデータを送信できる Polymer カスタム要素(<beacon-send>)もあります。ebidel.github.io/beacon-send をご覧ください。