- 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
Belum ada komentar.