Terkadang, akan lebih mudah untuk mengirim beberapa data dari halaman web ke server web tanpa perlu menunggu balasan. Misalnya, kita mungkin ingin mengirimkan data analisis atau diagnostik sebelum pengguna keluar dari halaman.
Biasanya, pengiriman data sebelum keluar melibatkan pemrosesan peristiwa unload,
karena mengirimkan permintaan kapan saja sebelumnya akan menghasilkan data yang tidak lengkap
- misalnya, kita mungkin melewatkan klik yang terjadi tepat sebelum keluar.
Namun, permintaan yang dikirim dalam pengendali penghapusan muatan harus
sinkron, karena sebagian besar browser biasanya mengabaikan XMLHttpRequest asinkron yang dibuat dalam pengendali penghapusan muatan.
Pendekatan ini memperlambat navigasi, karena pengguna perlu
menunggu permintaan kembali sebelum halaman baru dapat dirender.
Beacon API mengatasi masalah ini dengan memungkinkan Anda mengirim permintaan HTTP secara asinkron dengan payload data kecil dari browser ke server web, tanpa menunda kode lain dalam peristiwa penghapusan muatan halaman atau memengaruhi performa navigasi halaman berikutnya.
Metode navigator.sendBeacon() mengantrekan data yang akan
dikirim oleh browser sesegera mungkin,
tetapi tidak memperlambat navigasi.
Metode ini menampilkan true jika browser berhasil mengantrekan
data untuk ditransfer. Jika tidak, false akan ditampilkan.
Misalkan kita memiliki endpoint server yang tersedia untuk menerima data beacon dari halaman kita di alamat ini:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Jika kita menambahkan metode sendBeacon() di pengendali peristiwa pagehide,
endpoint akan menerima data saat pengguna keluar dari halaman:
Jika Anda memeriksa tab jaringan di Chrome DevTools dengan mencentang kotak preserve logs, Anda akan melihat permintaan POST HTTP ke endpoint di atas yang dikirim saat Anda keluar dari halaman.
Atau, Anda dapat membuka halaman inspeksi PutsReq untuk melihat apakah data beacon diterima.
Ada juga elemen kustom Polymer yang memungkinkan Anda mengirim data beacon - <beacon-send>. Lihat di ebidel.github.io/beacon-send.