はじめに

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()と同等となる
});

参考

https://developer.mozilla.org/ja/docs/Web/API/Navigator/sendBeacon
https://developer.mozilla.org/ja/docs/Web/API/fetch#keepalive