はじめに
PC・スマホの両方で、画面遷移時にユーザーの画面操作ログを送信したい。
加えて、確実に送信処理が実行されるようにしたいとします。
PCのみの場合は、unload、beforeunload イベントの場合に送信すればいいですが、モバイルでは、ブラウザーは unload、beforeunload、pagehide イベントを発行しません。
ということで、今回の処理ではこれらイベントは使えません。
そういう場合には、visibilitychange イベントで、document.visibilityState === "hidden" の条件で送信するようにすればいいです。
これは、ユーザーが新しいページに移動したり、タブを切り替えたり、タブを閉じたり、ブラウザーを最小化したり閉じたりしたとき、あるいはモバイルではブラウザーから異なる形のアプリに切り替えたときに発行されます。
navigator.sendBeacon()
確実に送信処理が実行されるようにしたい、そういうときに使えるのが、navigator.sendBeacon()です。
このAPIはブラウザに送信処理を予約して、確実に処理されるようにするためのAPIです。
document.addEventListener("visibilitychange", function logData() {
if (document.visibilityState === "hidden") {
navigator.sendBeacon("/log", analyticsData);
}
});
fetch()
navigator.sendBeacon()は、シンプルなAPIで、ヘッダー情報やその他の設定項目がないため、APIキーやヘッダー情報を付与できません。
それらの情報を指定して、navigator.sendBeacon()と同等の機能を実現するには、fetch()を使います。
fetch('/log', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': apiKey,
},
body: JSON.stringify(analyticsData),
keepalive: true, // これをtrueにすると、sendBeacon()と同等となる
});