Pengenalan kepada API Beacon

Takeaways Key

API Beacon menyediakan penyelesaian kepada pemaju web untuk menghantar sejumlah kecil data, seperti analisis atau diagnostik, kembali ke pelayan secara asynchronously sementara halaman semasa memunggah, menyelesaikan masalah kelewatan yang berpotensi atau kehilangan maklumat berharga.
API Beacon terdiri daripada satu kaedah, Sendbeacon, yang dilampirkan pada objek Navigator. Ia mengambil dua parameter, URL untuk menghantar data kepada dan data yang akan dikemukakan. Data dikemukakan melalui permintaan pos HTTP dan boleh dihantar sebagai arraybufferview, gumpalan, domstring, atau objek FormData.
API Beacon disokong oleh pelayar desktop utama seperti Chrome, Firefox, dan Opera, tetapi tidak dalam versi terkini IE dan Safari. Bagi penyemak imbas tanpa sokongan, pemaju boleh menggunakan pengesanan ciri dan sandaran kepada kaedah yang lebih lama untuk menghantar data pada halaman WAB.

API Beacon memudahkan pemaju web untuk menghantar sejumlah kecil data, seperti analisis atau data diagnostik, kembali ke pelayan secara asynchronously manakala halaman semasa memunggah. Dalam artikel ini, kami akan melihat beberapa masalah yang diselesaikan oleh API Beacon, dan menunjukkan kepada anda cara menggunakan API.

tanpa API Beacon, menghantar data kembali ke pelayan anda apabila pengguna menavigasi dari halaman boleh menjadi lebih rumit daripada yang kelihatannya. Anda tidak mahu melambatkan halaman seterusnya dari pemuatan, kerana ini akan merosakkan pengalaman pengguna laman web anda. Namun, anda tidak mahu melepaskan maklumat berharga yang dapat membantu meningkatkan laman web anda: Menghantar data terlalu awal mungkin bermakna anda kehilangan maklumat berharga yang anda

boleh telah ditangkap jika anda menunggu pecahan lebih lama.

Penyelesaian

tipikal yang menghantar data analisis ke pelayan kerana dokumen memunggah mungkin kelihatan seperti ini:

<span>window.addEventListener('unload', function(event) {
</span>  <span>var xhr = new XMLHttpRequest(),
</span>    data <span>= captureAnalyticsData(event);
</span>
  xhr<span>.open('post', '/log', false);
</span>  xhr<span>.send(data);
</span><span>});
</span>
<span>function captureAnalyticsData(event) {
</span>  <span>return 'sample data';
</span><span>}</span>

Pengendali acara memunggah, yang mengemukakan data melalui permintaan AJAX. Apabila kebakaran acara memunggah halaman, data ditangkap melalui fungsi CaptureanalyticsData, dan dihantar ke pelayan melalui permintaan AJAX. Perhatikan parameter ketiga untuk xhr.open adalah palsu, menunjukkan permintaan Ajax ialah

Synchronous . Penyemak imbas biasanya mengabaikan permintaan tak segerak yang dibuat semasa pengendali bongkar, jadi apa -apa permintaan AJAX seperti itu mempunyai menjadi segerak. Memandangkan ia segerak, penyemak imbas perlu menunggu permintaan untuk melengkapkan sebelum ia boleh memunggah dokumen dan memaparkan halaman seterusnya. Tambahan tambahan ini boleh membawa kepada persepsi prestasi yang buruk.

Teknik lain yang digunakan dan bukannya permintaan Ajax segerak termasuk menetapkan SRC objek imej dalam pengendali bongkar. Penyemak imbas akan menunggu imej dimuatkan sebelum memunggah dokumen, di mana data masa boleh dikemukakan ke pelayan. Walau bagaimanapun, ini masih mempunyai masalah yang sama: pemunggahan dokumen semasa akan ditangguhkan sementara permintaan, kali ini untuk imej, selesai, yang boleh membawa kepada persepsi prestasi yang buruk.

API Beacon dicipta untuk membantu menyelesaikan isu -isu ini. Ia mentakrifkan antara muka yang membolehkan pemaju menghantar sedikit data ke pelayan web asynchronously . Ia terdiri daripada hanya satu kaedah, SendBeacon, yang dilampirkan pada objek Navigator. SendBeacon mengambil dua parameter, URL yang anda ingin serahkan data dan data yang akan dikemukakan:

<span>window.addEventListener('unload', function(event) {
</span>  <span>var xhr = new XMLHttpRequest(),
</span>    data <span>= captureAnalyticsData(event);
</span>
  xhr<span>.open('post', '/log', false);
</span>  xhr<span>.send(data);
</span><span>});
</span>
<span>function captureAnalyticsData(event) {
</span>  <span>return 'sample data';
</span><span>}</span>

Data dikemukakan melalui permintaan pos HTTP, dan boleh dihantar sebagai arraybufferview, gumpalan, domstring, atau objek FormData. Penyemak imbas itu menghilangkan permintaan itu, dan menghantarnya "pada peluang yang paling awal, tetapi boleh mengutamakan penghantaran data yang lebih rendah berbanding dengan trafik rangkaian yang lain." (Seperti spesifikasi W3C). SendBeacon mengembalikan benar jika data berjaya diserahkan kepada pelayan, atau palsu sebaliknya.

Sokongan untuk Navigator.Sendbeacon adalah baik di seluruh pelayar desktop utama. Anda akan mendapati ia disokong dalam versi semasa Chrome, Firefox, dan Opera, tetapi tidak dalam versi terkini IE dan Safari. Memandangkan anda tidak dapat menjamin ketersediaannya, anda bertaruh terbaik adalah menggunakan pengesanan ciri dan sandaran kepada salah satu kaedah lama menghantar data pada halaman bongkar:

<span>window.addEventListener('unload', function(event) {
</span>  <span>var data = captureAnalyticsData(event);
</span>  <span>navigator.sendBeacon('/log', data);
</span><span>});</span>

Saya telah membuat aplikasi sampel kecil yang boleh anda gunakan untuk melihat API Beacon dalam tindakan. Anda perlu memasang Node.js untuk menjalankan pelayan. Untuk menjalankan sampel:

1. Muat turun dan unzip fail zip ke dalam folder pilihan anda misalnya. Beaconapi
2. Buka terminal anda dan ubah direktori ke dalam folder yang anda buat dalam langkah 1 mis. CD/PATH/TO/BEACONAPI
3. Masih di terminal, taipkan NPM Pasang dan tekan
4. sekarang taipkan debug = beaconapi_demo ./bin/www dan tekan
5. Buka penyemak imbas yang menyokong API Beacon dan tunjuk ke http: // localhost: 3000

anda harus melihat halaman yang kelihatan seperti ini:

Dalam contoh ini, kami menggunakan Chrome. Buka alat dev, beralih ke tab Rangkaian, dan tandakan kotak semak Preserve Log. Tapis hasilnya supaya anda melihat permintaan lain. Sekarang, apabila anda mengklik butang Wongm, anda harus melihat permintaan ke /log log masuk ke alat dev.

Kesimpulan

Artikel ini telah memperkenalkan API Beacon. Ia adalah API yang sangat kecil, tetapi mengisi niche tertentu. Semoga anda dapat menggunakannya dengan baik.

Soalan Lazim (Soalan Lazim) Mengenai Beacon Api

Apakah fungsi utama API Beacon? API ini amat berguna untuk menghantar data analisis, yang boleh dihantar tanpa menjejaskan pengalaman pelayaran pengguna. API Beacon memastikan bahawa data dihantar walaupun pengguna menavigasi dari halaman atau menutup penyemak imbas. API digunakan untuk menghantar data dari klien ke pelayan, mereka berbeza dalam kes penggunaan dan tingkah laku mereka. Ajax biasanya digunakan untuk mengambil data dari pelayan dan mengemas kini laman web tanpa memuatkannya. Sebaliknya, API Beacon digunakan untuk menghantar data ke pelayan, terutamanya data analisis, tanpa menyekat pengalaman pelayaran pengguna. Tidak seperti Ajax, API Beacon memastikan bahawa data dihantar walaupun pengguna menavigasi dari halaman atau menutup penyemak imbas. Untuk menggunakan API Beacon dalam aplikasi web anda, anda boleh menggunakan kaedah Navigator.SendBeacon (). Kaedah ini mengambil dua argumen: URL untuk menghantar data ke, dan data untuk dihantar. Data boleh menjadi objek FormData, gumpalan, arraybufferview, atau objek UrlSearchParams. Berikut adalah contoh:

var data = formData baru (); data.append ('nama', 'John Doe');

navigator.sendbeacon ('/api/endpoint', data ); Pertama, ia membolehkan anda menghantar data ke pelayan dengan cara yang tidak menyekat, yang bermaksud ia tidak menjejaskan pengalaman pelayaran pengguna. Kedua, ia memastikan data dihantar walaupun pengguna menavigasi dari halaman atau menutup penyemak imbas. Ini menjadikannya sesuai untuk menghantar data analisis, yang boleh dihantar pada akhir sesi pengguna tanpa mengambil risiko kehilangan data. Batasan API Beacon adalah bahawa ia tidak memberikan sebarang maklum balas mengenai sama ada data itu berjaya diterima oleh pelayan. Ini bermakna anda tidak boleh menggunakannya untuk data kritikal yang memerlukan pengesahan resit. Di samping itu, API Beacon tidak disokong dalam semua pelayar, jadi anda mungkin perlu memberikan sandaran untuk penyemak imbas yang tidak menyokongnya. Beacon API tidak memberikan sebarang maklum balas mengenai sama ada data berjaya diterima oleh pelayan. Jika data tidak dapat dihantar, sebagai contoh, disebabkan isu rangkaian, API tidak akan cuba lagi menghantar data. Inilah sebabnya mengapa ia disyorkan untuk menggunakan API Beacon untuk data tidak kritikal yang tidak memerlukan pengesahan resit.

Bolehkah saya menggunakan API Beacon untuk menghantar data ke domain yang berbeza? Walau bagaimanapun, pelayan mesti menyokong CORS (perkongsian sumber silang asal) dan mesti dikonfigurasikan untuk menerima permintaan silang asal dari domain anda. Beacon API disokong dalam pelayar yang paling moden, termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, ia tidak disokong di Internet Explorer. Anda boleh menyemak sokongan penyemak imbas semasa di laman web seperti yang boleh saya gunakan. seperti data analisis. Walaupun tidak ada had keras pada jumlah data yang boleh anda hantar, menghantar sejumlah besar data boleh memberi kesan kepada prestasi rangkaian pengguna. Oleh itu, disarankan untuk menggunakan API Beacon untuk menghantar sedikit data tidak kritikal. dibatalkan. API Beacon tidak menyediakan cara untuk membatalkan atau membatalkan permintaan Beacon. Inilah sebab lain mengapa ia disyorkan untuk menggunakan API Beacon untuk data tidak kritikal yang tidak memerlukan pengesahan resit.

Atas ialah kandungan terperinci Pengenalan kepada API Beacon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!