Beacon API adalah antarmuka berbasis JavaScript untuk:
mengirim sejumlah kecil data ke server dari browser, tanpa menunggu tanggapan. Dalam artikel ini, kami akan mempertimbangkan dalam kasus apa Beacon API akan berguna, bagaimana ia berbeda dari menggunakan XMLHTTPRequest (Ajax) untuk tujuan yang sama dan bagaimana menggunakannya.
Mengapa kita membutuhkan API lain?
Beacon API digunakan untuk mengirim data kecil ke server tanpa menunggu tanggapan . Bagian terakhir dari pernyataan itu adalah yang paling menarik. API Beacon dirancang khusus untuk mengirim data dan melupakannya. Tidak perlu mengharapkan jawaban, karena itu tidak akan pernah terjadi.
Metafora dengan kartu pos, ini adalah kartu yang orang kirim / kirim satu sama lain. Sebagai aturan, mereka menulis teks kecil pada mereka ("Di mana Anda? Dan saya lol di laut.", "Di sini saya memiliki cuaca yang baik, tidak seperti di kantor Anda"), mereka melemparkan mereka melalui pos dan lupa. Tidak ada yang mengharapkan jawaban seperti "Aku sudah pergi untukmu," "Luar biasa di kantorku."
Ada banyak kasus di mana pendekatan "kirim dan lupakan" akan sesuai.
Pelacakan Statistik dan Informasi Analitik
Ini adalah hal pertama yang terlintas dalam pikiran. Solusi besar seperti Google Analytics dapat memberikan ikhtisar yang baik tentang hal-hal dasar. Tetapi jika kita menginginkan sesuatu yang lebih khusus? Kita perlu menulis beberapa kode untuk melacak apa yang terjadi pada halaman (bagaimana pengguna berinteraksi dengan komponen, seberapa jauh mereka menggulir, halaman mana yang ditampilkan sebelum penjualan pertama), kemudian mengirimkan data ini ke server ketika pengguna meninggalkan halaman. Beacon cocok untuk tugas seperti itu, karena kami hanya mengirim data dan kami tidak memerlukan respons dari server.
Debug dan Logging
Aplikasi lain adalah mencatat informasi dari kode JavaScript. Bayangkan sebuah situasi ketika Anda memiliki aplikasi besar dengan UI / UX yang kaya. Semua tes berwarna hijau, dan kesalahan muncul secara berkala pada pro yang Anda ketahui, tetapi Anda tidak dapat melakukannya karena kurangnya informasi. Dalam hal ini, Anda dapat menggunakan Beacon untuk diagnostik.
Bahkan, tugas apa pun dengan logging dapat diselesaikan menggunakan Beacon. Ini bisa berupa pembuatan titik penyimpanan dalam game, mengumpulkan informasi tentang penggunaan fungsionalitas baru, merekam hasil tes, dan sebagainya. Jika ini adalah sesuatu yang terjadi di browser dan Anda ingin server mengetahuinya, Beacon adalah yang Anda butuhkan.
Bukankah kita pernah melakukan ini sebelumnya?
Saya tahu apa yang Anda pikirkan. Tidak ada yang baru? Kami telah berkomunikasi dengan utara melalui XMLHTTPRequest selama lebih dari 10 tahun. Kami baru-baru ini mulai menggunakan API Ambil, yang sebenarnya melakukan hal yang sama, hanya dengan antarmuka Janji baru. Jadi mengapa kita perlu API Beacon lain?
Fitur kuncinya adalah kita tidak memerlukan respons dari server. Browser dapat mengantri permintaan dan mengirim data tanpa memblokir eksekusi kode apa pun. Karena peramban memanfaatkan ini, tidak masalah bagi kami apakah kode itu masih berjalan atau tidak, peramban hanya akan mengirim permintaan ke latar belakang secara diam-diam.
C Beacon API tidak perlu menunggu momen terbaik untuk jaringan CPU. Menambahkan permintaan ke antrian menggunakan suar praktis tidak ada artinya.
Untuk memahami mengapa ini penting, lihat saja bagaimana dan di mana logika seperti itu biasanya digunakan. Misalnya, untuk mengukur berapa lama pengguna berada di halaman, kita perlu mengirim permintaan ke server sedekat mungkin ke akhir sesi.
Ini biasanya dilakukan pada unload atau beforeunload . Kode tersebut dapat memblokir eksekusi, dan jika halaman tertunda, pemuatan halaman berikutnya juga tertunda. Ini mengarah ke bukan UX terbaik.
Apakah Anda mengerti betapa lambatnya permintaan HTTP? Dan hal terakhir yang Anda inginkan adalah mendorong permintaan HTTP di antara transisi.
Mencoba Beacon API
Contoh penggunaan dasar sangat sederhana:
let result = navigator.sendBeacon(url, data);
result nilai boolean. Jika browser telah menambahkan permintaan ke antrian - true , jika tidak false .
Menggunakan navigator.sendBeacon ()
navigator.sendBeacon menerima dua parameter. Yang pertama adalah URL yang permintaannya akan dikirim, yang kedua adalah data yang harus dikirim. Permintaan memiliki bentuk HTTP POST .
data - parameter ini dapat menerima beberapa format data, yang semuanya digunakan oleh API Ambil. Itu bisa berupa Blob, BufferSource, FormData atau URLSearchParams, dll.
Saya suka menggunakan FormData untuk data nilai kunci sederhana, ini bukan kelas yang kompleks dan mudah digunakan.
// URL let url = '/api/my-endpoint'; // FormData let data = new FormData(); data.append('hello', 'world'); let result = navigator.sendBeacon(url, data); if (result) { console.log(' !'); } else { console.log('.'); }
Dukungan browser
Dukungan untuk API ini cukup solid. Satu-satunya browser yang tidak mendukung adalah Internet Explorer (saya tidak mengharapkan ini) dan Opera Mini. Tapi di Edge semuanya bekerja. Dalam kebanyakan kasus, ada dukungan, tetapi lebih baik untuk memeriksa berjaga-jaga:
if (navigator.sendBeacon) { // Beacon } else { // XHR? }
Contoh: waktu logging dihabiskan di halaman
Untuk melihat semua ini dalam praktiknya, mari kita buat sistem sederhana untuk menghitung waktu pengguna berada di halaman. Ketika halaman dimuat, kami melihat waktu dan ketika ia pergi, kami mengirim permintaan dari awal melihat dan yang sekarang ke server.
Karena kami hanya tertarik pada waktu yang dihabiskan di halaman, dan bukan saat ini, kami dapat menggunakan performance.now() untuk mendapatkan stempel waktu saat memuat halaman:
let startTime = performance.now();
Mari kita bungkus sepotong logika kecil dalam fungsi yang mudah digunakan:
let logVisit = function() { // Test that we have support if (!navigator.sendBeacon) return true; // URL to send the data to, eg let url = '/api/log-visit'; // Data to send let data = new FormData(); data.append('start', startTime); data.append('end', performance.now()); data.append('url', document.URL); // Let's go! navigator.sendBeacon(url, data); };
Akhirnya, kita perlu memanggil fungsi ini ketika pengguna meninggalkan halaman. Pikiran pertama adalah menggunakan unload , tetapi Safari di Mac tampaknya memblokir permintaan untuk alasan keamanan. Karena itu, lebih baik menggunakan beforeunload :
window.addEventListener('beforeunload', logVisit);
Ketika halaman diturunkan (atau sebelum), fungsi logVisit() akan dipanggil dan, jika browser mendukung Beacon API, itu akan mengirimkan permintaan ke server.
Beberapa poin
Karena sebagian besar masalah yang API Beacon akan digunakan berputar di sekitar pelacakan aktivitas, penting untuk mencatat bagian sosial dan hukum dari seluruh dapur ini.
GDPR
Ingat saja tentang itu.
DNT: JANGAN TRACK
Selain itu, browser memiliki opsi yang memungkinkan pengguna untuk menunjukkan bahwa mereka tidak ingin aktivitas mereka dilacak. Do Not Track mengirim tajuk HTTP yang terlihat seperti ini:
DNT: 1
Jika Anda melacak data yang dapat menunjukkan pengguna dan header permintaan memiliki DNT: 1 , maka lebih baik mendengarkan pengguna dan tidak menyimpan data apa pun. Misalnya, menggunakan PHP, ini dapat diverifikasi sebagai berikut:
if (!empty($_SERVER['HTTP_DNT'])) {
Kesimpulannya
Beacon API memang cara yang sangat mudah untuk mengirim data ke server, terutama dalam konteks pencatatan. Dukungan peramban berada pada tingkat yang cukup baik dan memungkinkan Anda untuk dengan mudah mencatat informasi apa pun tanpa konsekuensi negatif apa pun untuk kinerja dan responsif UI Anda. Sifat non-blocking dari permintaan ini memainkan peran yang sangat baik dalam hal ini, itu jauh lebih cepat daripada alternatif XHR dan Fetch.
