ユーザーがページを離れるときに確実にHTTPリクエストを送る方法

• ときどき、ユーザーが別のページに移動したりフォームを送信したりするときに、ログを残したい場合がある
• クリックイベント内で fetch を使っても、必ず送信される保証はない
• そのため、Fetchしてから window.location に代入して移動させてみても、これも同様に保証されない
  • XHR は非同期かつノンブロッキングだから
• fetch を Promise として await すれば対応はできるが、欠点がある
  • 処理が遅くなり、ユーザー体験が悪化する
  • 想定したほど安定的ではない。ブラウザタブを閉じるような操作には対応できない
• ブラウザに HTTP リクエストを保持させるためのオプションはいくつかある
  • Fetch で keepalive フラグを使うと、ページが中断されてもそのリクエストは維持される
  • Navigator.sendBeacon() のような、よりシンプルな関数
  • ブラウザは a タグの ping 属性もサポートしている（リンクにしか使えないのが欠点で、Firefox はデフォルトで未対応）
• では何を使うべきか？
  • 可能なら fetch() + keepalive
    • ブラウザの80% がサポート
    • カスタムヘッダーを送信できる
    • GET リクエストでも利用可能
    • 古いブラウザもサポート
  • sendBeacon() が向いているケース
    • ブラウザの96% がサポート
    • 多くのカスタマイズが不要なとき
    • すっきりして洗練された API を好むとき
    • ブラウザ内の他の優先度付きリクエストと競合させたくないとき