October 1, 2024 javascript

Cara Kirim Request Ketika Halaman Ditutup Menggunakan Javascript

Ketika halaman web ditutup, terkadang kita ingin mengirim request tertentu ke server, misalnya request yang mengirim aktifitas pengunjung, durasi waktu berkunjung, dsb. Biasanya digunakan untuk analisis web.

Jika menggunakan XMLHttpRequest atau fetch, request bisa saja tidak sampai ke server karena ketika halaman ditutup dan request belum sampai maka request akan dikill oleh browser.

Untuk mengatasinya, kita bisa menggunakan navigator.sendBeacon untuk mengirim request-nya.

navigator.sendBeacon dapat mengirim request ke server di background browser meskipun halamannya sudah ditutup dan dijamin sampai ke server.

Contoh

document.addEventListener('visibilitychange', () => {
    navigator.sendBeacon('/leave', data)
})
// atau
window.addEventListener('beforeunload', () => {
    navigator.sendBeacon('/leave', data)
})
// atau
window.addEventListener('unload', () => {
    navigator.sendBeacon('/leave', data)
})

navigator.sendBeacon hanya bisa mengirim request method POST saja.

Untuk mengirim data dalam bentuk json, data perlu dikonversi ke blob dulu.

window.addEventListener('beforeunload', () => {
    const data = {
        date: new Date,
        duration: 10301
    }
    const payload = new Blob([JSON.stringify(data)], { type: 'application/json' })

    navigator.sendBeacon('/leave', payload)
})

Kekurangan navigator.sendBeacon:

  • Hanya bisa mengirim request method POST.
  • Ukuran payload terbatas.
  • Tidak dapat di-handle response dari request yang dikirim.

Referensi: