Mengirim data beacon di Chrome 39

Ewa Gasperowicz

Terkadang, mengirim beberapa data dari halaman web ke server web dapat dilakukan dengan mudah tanpa perlu menunggu balasan. Misalnya, kita mungkin ingin mengirimkan data analisis atau diagnostik sebelum pengguna keluar dari halaman.

Biasanya, mengirim data sebelum pintu keluar melibatkan pemrosesan peristiwa unload, karena mengirim permintaan kapan saja sebelumnya akan menghasilkan data yang tidak lengkap - misalnya, kita mungkin melewatkan klik yang terjadi tepat sebelum pintu keluar. Satu hal yang perlu diwaspadai adalah 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 akan memperlambat navigasi, karena pengguna harus menunggu permintaan kembali sebelum halaman baru dapat dirender.

Beacon API mengatasi masalah ini dengan memungkinkan Anda mengirim permintaan HTTP secara asinkron menggunakan payload data kecil dari browser ke server web, tanpa menunda kode lain di peristiwa penghapusan muatan halaman atau memengaruhi performa navigasi halaman berikutnya.

Metode navigator.sendBeacon() mengantrekan data untuk dikirim oleh browser sesegera mungkin, tetapi tidak memperlambat navigasi. Metode ini menampilkan true jika browser berhasil mengantrekan data untuk ditransfer. Jika tidak, metode ini akan menampilkan false.

Katakanlah kita memiliki endpoint server yang tersedia untuk menerima data beacon dari halaman 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 HTTP POST ke endpoint di atas yang dikirim saat keluar dari halaman.

Atau, Anda dapat membuka halaman pemeriksaan PutsReq untuk melihat apakah data beacon telah diterima.

Ada juga elemen kustom Polymer yang memungkinkan Anda mengirim data beacon - <beacon-send>. Lihat di ebidel.github.io/beacon-send.