Aktivitas Pencatatan Dengan Web Beacon API

Beacon API adalah Web API berbasis JavaScript untuk mengirimkan sejumlah kecil data dari browser ke server web tanpa menunggu tanggapan. Dalam artikel ini, kita akan melihat kegunaannya, apa yang membuatnya berbeda dari teknik yang sudah dikenal seperti XMLHTTPRequest ('Ajax'), dan bagaimana Anda bisa mulai menggunakannya.

Jika Anda sudah tahu mengapa Anda ingin menggunakan Beacon, silakan langsung menuju ke bagian Memulai.

Untuk Apa Beacon API?

API Beacon digunakan untuk mengirimkan sejumlah kecil data ke server tanpa menunggu tanggapan . Bagian terakhir itu sangat penting dan merupakan kunci mengapa Beacon sangat berguna — kode kami bahkan tidak pernah melihat respons, bahkan jika server mengirimkannya. Beacon khusus untuk mengirim data dan kemudian melupakannya. Kami tidak mengharapkan tanggapan dan kami tidak mendapat tanggapan.

Anggap saja seperti kartu pos yang dikirim ke rumah saat berlibur. Anda menaruh sejumlah kecil data di dalamnya (sedikit "Seandainya Anda ada di sini" dan "Cuacanya menyenangkan"), masukkan ke dalam kotak surat, dan Anda tidak mengharapkan tanggapan. Tidak ada yang mengirim kartu pos kembali yang mengatakan "Ya, saya benar-benar berharap saya ada di sana, terima kasih banyak!"

Untuk situs web dan aplikasi modern, ada sejumlah kasus penggunaan yang termasuk dalam pola kirim-dan-lupakan ini.

Statistik Pelacakan Dan Data Analytics

Kasus penggunaan pertama yang terlintas dalam pikiran kebanyakan orang adalah analitik. Solusi besar seperti Google Analytics mungkin memberikan gambaran yang baik tentang hal-hal seperti kunjungan halaman, tetapi bagaimana jika kita menginginkan sesuatu yang lebih disesuaikan? Kami dapat menulis beberapa JavaScript untuk melacak apa yang terjadi di halaman (mungkin bagaimana pengguna berinteraksi dengan komponen, seberapa jauh mereka telah menggulir, atau artikel mana yang telah ditampilkan sebelum mereka mengikuti CTA) tetapi kami kemudian perlu mengirim data itu ke server ketika pengguna meninggalkan halaman. Beacon sangat cocok untuk ini, karena kami hanya mencatat data dan tidak memerlukan tanggapan.

Tidak ada alasan kami juga tidak dapat mencakup jenis tugas biasa yang sering ditangani oleh Google Analytics, melaporkan pengguna itu sendiri dan kemampuan perangkat dan browser mereka. Jika pengguna memiliki sesi masuk, Anda bahkan dapat mengikat statistik tersebut kembali ke individu yang dikenal. Data apa pun yang Anda kumpulkan, Anda dapat mengirimkannya kembali ke server dengan Beacon.

Men-debug dan Masuk

Aplikasi lain yang berguna untuk perilaku ini adalah mencatat informasi dari kode JavaScript Anda. Bayangkan Anda memiliki komponen interaktif kompleks di halaman Anda yang berfungsi sempurna untuk semua pengujian Anda, tetapi terkadang gagal dalam produksi. Anda tahu itu gagal, tetapi Anda tidak dapat melihat kesalahan untuk mulai men-debug-nya. Jika Anda dapat mendeteksi kegagalan dalam kode itu sendiri, Anda kemudian dapat mengumpulkan diagnostik dan menggunakan Beacon untuk mengirim semuanya kembali untuk logging.

Faktanya, tugas logging apa pun dapat dilakukan dengan berguna menggunakan Beacon, baik itu membuat save-point dalam game, mengumpulkan informasi tentang penggunaan fitur, atau merekam hasil dari pengujian multivarian. Jika itu adalah sesuatu yang terjadi di browser yang Anda ingin server ketahui, maka Beacon kemungkinan adalah pesaingnya.

Bukankah Kita Sudah Melakukan Ini?

Aku tahu apa yang kamu pikirkan. Tak satu pun dari ini baru, bukan? Kami telah dapat berkomunikasi dari browser ke server menggunakan XMLHTTPRequest selama lebih dari satu dekade. Baru-baru ini kami juga memiliki Fetch API yang melakukan hal yang sama dengan antarmuka berbasis janji yang lebih modern. Mengingat itu, mengapa kita membutuhkan API Beacon sama sekali?

Kuncinya di sini adalah karena kami tidak mendapatkan respons, browser dapat mengantrekan permintaan dan mengirimkannya tanpa memblokir eksekusi kode lainnya. Sejauh menyangkut browser, tidak masalah apakah kode kita masih berjalan atau tidak, atau di mana eksekusi skrip harus dilakukan, karena tidak ada yang bisa dikembalikan, itu hanya dapat melatarbelakangi pengiriman permintaan HTTP sampai nyaman untuk Kirimkan.

Itu mungkin berarti menunggu sampai beban CPU lebih rendah, atau sampai jaringan bebas, atau bahkan langsung mengirimnya jika bisa. Yang penting adalah browser mengantri suar dan segera mengembalikan kontrol. Itu tidak menahan hal-hal saat beacon mengirim.

Untuk memahami mengapa ini menjadi masalah besar, kita perlu melihat bagaimana dan kapan permintaan semacam ini dikeluarkan dari kode kita. Ambil contoh skrip logging analitik kami. Kode kami mungkin mengatur waktu berapa lama pengguna menghabiskan pada halaman, sehingga menjadi penting bahwa data dikirim kembali ke server pada saat-saat terakhir. Saat pengguna meninggalkan halaman, kami ingin menghentikan pengaturan waktu dan mengirim data kembali ke rumah.

Biasanya, Anda akan menggunakan acara unload atau beforeunload untuk menjalankan logging. Ini diaktifkan ketika pengguna melakukan sesuatu seperti mengikuti tautan di halaman untuk menavigasi keluar. Masalahnya di sini adalah bahwa kode yang berjalan di salah satu acara unload dapat memblokir eksekusi dan menunda pembongkaran halaman. Jika pembongkaran halaman tertunda, maka pemuatan halaman berikutnya juga tertunda, sehingga pengalaman terasa sangat lamban.

Ingatlah betapa lambatnya permintaan HTTP. Jika Anda memikirkan kinerja, biasanya salah satu faktor utama yang Anda coba kurangi adalah permintaan HTTP tambahan karena keluar ke jaringan dan mendapatkan respons bisa sangat lambat. Hal terakhir yang ingin Anda lakukan adalah menempatkan kelambatan antara aktivasi tautan dan awal permintaan untuk halaman berikutnya.

Beacon menyiasatinya dengan mengantrekan permintaan tanpa memblokir, mengembalikan kontrol segera kembali ke skrip Anda. Browser kemudian menangani pengiriman permintaan itu di latar belakang tanpa memblokir. Ini membuat segalanya lebih cepat, yang membuat pengguna lebih bahagia dan memungkinkan kita semua mempertahankan pekerjaan kita.

Mulai

Jadi kita mengerti apa itu Beacon, dan mengapa kita bisa menggunakannya, jadi mari kita mulai dengan beberapa kode. Dasar-dasarnya tidak bisa lebih sederhana:

 let result = navigator.sendBeacon(url, data);

Hasilnya adalah boolean, true jika browser menerima dan mengantri permintaan, dan false jika ada masalah dalam melakukannya.

Menggunakan navigator.sendBeacon()

navigator.sendBeacon mengambil dua parameter. Yang pertama adalah URL untuk membuat permintaan. Permintaan dilakukan sebagai HTTP POST, mengirimkan data apa pun yang disediakan di parameter kedua.

Parameter data bisa dalam salah satu dari beberapa format, semuanya jika diambil langsung dari Fetch API. Ini bisa berupa Blob , BufferSource , FormData atau URLSearchParams — pada dasarnya semua tipe tubuh yang digunakan saat membuat permintaan dengan Fetch.

Saya suka menggunakan FormData untuk data nilai kunci dasar karena tidak rumit dan mudah dibaca kembali.

 // URL to send the data to let url = '/api/my-endpoint'; // Create a new FormData and add a key/value pair let data = new FormData(); data.append('hello', 'world'); let result = navigator.sendBeacon(url, data); if (result) { console.log('Successfully queued!'); } else { console.log('Failure.'); }

Dukungan Peramban

Dukungan di browser untuk Beacon sangat baik, dengan satu-satunya pengecualian adalah Internet Explorer (berfungsi di Edge) dan Opera Mini. Untuk sebagian besar penggunaan, itu akan baik-baik saja, tetapi perlu menguji dukungan sebelum mencoba menggunakan navigator.sendBeacon .

Itu mudah dilakukan:

 if (navigator.sendBeacon) { // Beacon code } else { // No Beacon. Maybe fall back to XHR? }

Jika Beacon tidak tersedia dan permintaan Anda penting, Anda dapat kembali ke metode pemblokiran seperti XHR. Bergantung pada audiens dan tujuan Anda, Anda mungkin sama-sama memilih untuk tidak repot.

Contoh: Mencatat Waktu Di Halaman

Untuk melihat praktik ini, mari buat sistem dasar untuk menghitung berapa lama pengguna bertahan di halaman. Saat halaman dimuat, kami akan mencatat waktu, dan saat pengguna meninggalkan halaman, kami akan mengirimkan waktu mulai dan waktu saat ini ke server.

Karena kami hanya peduli dengan waktu yang dihabiskan (bukan waktu sebenarnya), kami dapat menggunakan performance.now() untuk mendapatkan stempel waktu dasar saat halaman dimuat:

 let startTime = performance.now();

Jika kita menyelesaikan logging kita menjadi suatu fungsi, kita dapat memanggilnya ketika halaman dibongkar.

 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); };

Terakhir, kita perlu memanggil fungsi ini ketika pengguna meninggalkan halaman. Naluri pertama saya adalah menggunakan acara unload , tetapi Safari di Mac tampaknya memblokir permintaan dengan peringatan keamanan, jadi beforeunload berfungsi dengan baik untuk kami di sini.

 window.addEventListener('beforeunload', logVisit);

Saat halaman dibongkar (atau, tepat sebelum itu terjadi) fungsi logVisit() kami akan dipanggil dan asalkan browser mendukung API Beacon, suar kami akan dikirim.

(Perhatikan bahwa jika tidak ada dukungan Beacon, kami mengembalikan true dan berpura-pura semuanya bekerja dengan baik. Mengembalikan false akan membatalkan acara dan menghentikan pembongkaran halaman. Itu akan sangat disayangkan.)

Pertimbangan Saat Melacak

Karena begitu banyak potensi penggunaan Beacon berkisar pada pelacakan aktivitas, saya pikir akan lalai untuk tidak menyebutkan tanggung jawab sosial dan hukum yang kami miliki sebagai pengembang saat mencatat dan melacak aktivitas yang dapat dikaitkan kembali dengan pengguna.

GDPR

Kami mungkin menganggap undang-undang GDPR Eropa baru-baru ini terkait dengan email, tetapi tentu saja, undang-undang tersebut berkaitan dengan penyimpanan semua jenis data pribadi. Jika Anda mengetahui siapa pengguna Anda dan dapat mengidentifikasi sesi mereka, maka Anda harus memeriksa aktivitas apa yang Anda catat dan bagaimana kaitannya dengan kebijakan yang Anda nyatakan.

Seringkali kita tidak perlu melacak data sebanyak yang naluri kita seperti yang dikatakan pengembang. Akan lebih baik jika Anda dengan sengaja tidak menyimpan informasi yang akan mengidentifikasi pengguna, dan kemudian Anda mengurangi kemungkinan terjadinya kesalahan.

DNT: Jangan Lacak

Selain persyaratan hukum, sebagian besar browser memiliki pengaturan yang memungkinkan pengguna mengekspresikan keinginan untuk tidak dilacak. Jangan Lacak mengirimkan header HTTP dengan permintaan yang terlihat seperti ini:

 DNT: 1

Jika Anda mencatat data yang dapat melacak pengguna tertentu dan pengguna mengirimkan header DNT positif, maka akan lebih baik untuk mengikuti keinginan pengguna dan menganonimkan data tersebut atau tidak melacaknya sama sekali.

Di PHP, misalnya, Anda dapat dengan mudah menguji tajuk ini seperti:

 if (!empty($_SERVER['HTTP_DNT'])) { // User does not wish to be tracked ... }

Kesimpulannya

Beacon API adalah cara yang sangat berguna untuk mengirim data dari halaman kembali ke server, terutama dalam konteks logging. Dukungan browser sangat luas, dan memungkinkan Anda untuk mencatat data dengan mulus tanpa berdampak negatif pada pengalaman penelusuran pengguna dan kinerja situs Anda. Sifat permintaan yang tidak memblokir berarti kinerjanya jauh lebih cepat daripada alternatif seperti XHR dan Ambil.

Jika Anda ingin membaca lebih lanjut tentang Beacon API, situs-situs berikut ini layak untuk dilihat.

• “Spesifikasi W3C Beacon,” Rekomendasi Kandidat W3C
• “Dokumentasi MDN Beacon,” dokumen web MDN, Mozilla
• “Informasi dukungan browser,” caniuse.com