Cara mengirim permintaan HTTP secara andal saat pengguna meninggalkan halaman

• Terkadang ada kasus ketika kita ingin meninggalkan log saat pengguna berpindah ke halaman lain atau mengirim formulir
• Menaruh fetch di event klik tidak menjamin bahwa permintaan pasti terkirim
• Karena itu, ada yang mencoba melakukan navigasi dengan memasukkan window.location setelah fetch, tetapi ini juga tetap tidak terjamin
  • Karena XHR bersifat asinkron & non-blocking
• Kita memang bisa menangani fetch dengan await pada Promise, tetapi ada kekurangannya
  • Kecepatan pemrosesan menjadi lebih lambat sehingga pengalaman pengguna memburuk
  • Tidak seandal yang dibayangkan. Misalnya, menutup tab browser tidak bisa ditangani
• Browser memiliki beberapa opsi untuk mempertahankan permintaan HTTP
  • Jika menggunakan flag keepalive pada Fetch, permintaan tersebut akan tetap dipertahankan meski halaman dihentikan
  • Ada juga fungsi yang lebih sederhana seperti Navigator.sendBeacon()
  • Browser juga mendukung atribut ping pada tag a (kekurangannya hanya bisa dipakai untuk tautan, dan FF tidak mendukungnya secara bawaan)
• Jadi, sebaiknya pakai yang mana?
  • Jika memungkinkan, gunakan fetch() + keepalive
    • Didukung oleh 80% browser
    • Bisa mengirim header kustom
    • Juga bisa untuk permintaan GET
    • Mendukung browser lama
  • Kondisi ketika sendBeacon() lebih cocok adalah
    • Didukung oleh 96% browser
    • Saat tidak membutuhkan banyak kustomisasi
    • Saat lebih menyukai API yang rapi dan elegan
    • Saat tidak ingin berebut dengan permintaan browser lain yang memiliki prioritas berbeda