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, teknik ini juga menciptakan pengalaman pengguna yang buruk dengan menunda penutupan halaman hingga beberapa detik.
Praktik ini perlu diubah, dan browser merespons. Spesifikasi XMLHttpRequest()
sudah disediakan untuk penghentian dan
penghapusan. Chrome 80 mengambil langkah pertama dengan melarang panggilan sinkron di dalam beberapa pengendali peristiwa, khususnya beforeunload
, unload
, pagehide
, dan visibilitychange
saat panggilan sinkron 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 tersedia untuk sementara. 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 berakhir sesaat sebelum Chrome 89
dirilis, sekitar 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 penghapusan muatan halaman 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 pengaktifan peristiwa unload
.
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 opsinya adalah keepalive
, yang memastikan bahwa permintaan
melanjutkan terlepas dari apakah halaman yang membuatnya tetap terbuka atau tidak:
window.addEventListener('unload', {
fetch('/siteAnalytics', {
method: 'POST',
body: getStatistics(),
keepalive: true
});
}
Metode fetch()
memiliki keuntungan berupa 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. Alat ini memungkinkan Anda mengirimkan data dengan satu baris kode:
window.addEventListener('unload', {
navigator.sendBeacon('/siteAnalytics', getStatistics());
}
Kesimpulan
Dengan peningkatan ketersediaan
fetch()
di berbagai browser, XMLHttpRequest()
diharapkan akan dihapus
dari platform web pada suatu saat. Vendor browser setuju bahwa cookie tersebut 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