Mengurangi navigasi yang tertunda
Halaman atau aplikasi biasanya memiliki analisis atau data lain yang belum dikirim saat
pengguna menutupnya. Untuk mencegah kehilangan data, beberapa situs menggunakan panggilan sinkron
ke XMLHttpRequest()
untuk menjaga halaman atau aplikasi tetap terbuka hingga datanya diteruskan ke
server. Tidak hanya ada cara yang lebih baik untuk menyimpan data, tetapi teknik ini juga memberikan
pengalaman pengguna yang buruk dengan menunda penutupan halaman hingga beberapa detik.
Praktik ini perlu diubah, dan browser meresponsnya. Spesifikasi XMLHttpRequest()
sudah disediakan untuk penghentian dan
penghapusan. Chrome 80 mengambil langkah
pertama dengan tidak mengizinkan panggilan sinkron di dalam beberapa pengendali peristiwa,
khususnya beforeunload
, unload
, pagehide
, dan visibilitychange
saat
diaktifkan dalam penutupan. WebKit juga baru-baru ini merilis commit yang menerapkan
perubahan perilaku yang sama.
Dalam artikel ini, saya akan menjelaskan secara singkat opsi bagi pengguna yang memerlukan waktu untuk mengupdate
situs mereka dan menguraikan alternatif untuk XMLHttpRequest()
.
Penonaktifan sementara
Chrome tidak ingin menghentikan XMLHttpRequest()
begitu saja, itulah sebabnya beberapa
opsi pilihan tidak ikut sementara tersedia. Untuk situs di internet, uji coba origin
tersedia.
Dengan ini, Anda menambahkan token khusus origin ke header halaman yang mengaktifkan
panggilan XMLHttpRequest()
sinkron. Opsi ini akan berakhir sesaat sebelum Chrome 89
diluncurkan, sekitar bulan Maret 2021. Pelanggan Chrome Enterprise juga dapat
menggunakan tanda kebijakan AllowSyncXHRInPageDismissal
, yang berakhir pada waktu yang sama.
Alternatif
Terlepas dari cara Anda mengirim data kembali ke server, sebaiknya jangan menunggu hingga halaman di-unload untuk mengirim semua data sekaligus. Selain memberikan pengalaman pengguna
yang buruk, penghapusan tidak dapat diandalkan di browser modern dan berisiko kehilangan data jika
terjadi masalah. Secara khusus, peristiwa penghapusan muatan sering kali tidak diaktifkan di browser
seluler
karena ada banyak cara untuk
menutup tab atau browser di sistem operasi seluler tanpa peristiwa unload
yang diaktifkan.
Dengan XMLHttpRequest()
, menggunakan payload kecil adalah pilihan. Sekarang, hal ini menjadi
persyaratan. Kedua alternatifnya memiliki batas upload 64 KB per
konteks, seperti yang diwajibkan oleh spesifikasi.
Mengambil keepalive
Fetch API menyediakan cara yang andal untuk menangani interaksi server dan antarmuka yang konsisten untuk digunakan di berbagai API platform. Di antara opsi tersebut adalah keepalive
, yang memastikan bahwa permintaan
akan berlanjut, terlepas dari apakah halaman yang membuatnya tetap terbuka atau tidak:
window.addEventListener('unload', {
fetch('/siteAnalytics', {
method: 'POST',
body: getStatistics(),
keepalive: true
});
}
Metode fetch()
memiliki keunggulan kontrol yang lebih besar atas apa yang dikirim ke
server. Yang tidak saya tampilkan dalam contoh adalah fetch()
juga menampilkan promise yang diselesaikan dengan objek Response
. Karena saya mencoba menghindari
pembongkaran halaman, saya memilih untuk tidak melakukan apa pun dengannya.
SendBeacon()
SendBeacon()
sebenarnya menggunakan Fetch API di balik layar, itulah sebabnya API ini memiliki
batasan payload 64 KB yang sama dan juga memastikan bahwa permintaan berlanjut
setelah halaman di-unload. Keunggulan utamanya adalah kesederhanaannya. Dengan ini, Anda dapat mengirimkan data dengan satu baris kode:
window.addEventListener('unload', {
navigator.sendBeacon('/siteAnalytics', getStatistics());
}
Kesimpulan
Dengan peningkatan ketersediaan
fetch()
di seluruh browser, XMLHttpRequest()
diharapkan akan dihapus
dari platform web pada suatu saat. Vendor browser setuju bahwa cookie ini harus dihapus, tetapi hal ini
akan memerlukan waktu. Menghentikan penggunaan salah satu kasus penggunaan terburuknya adalah langkah pertama yang meningkatkan
pengalaman pengguna untuk semua orang.
Foto oleh Matthew Hamilton di Unsplash