Mengurangi navigasi yang tertunda
Biasanya halaman atau aplikasi memiliki analisis atau data lainnya yang belum dikirim saat pengguna menutupnya. Untuk mencegah kehilangan data, beberapa situs menggunakan panggilan sinkron
ke XMLHttpRequest() agar halaman atau aplikasi tetap terbuka hingga datanya diteruskan ke
server. Selain ada cara yang lebih baik untuk menyimpan data, teknik ini juga menimbulkan pengalaman pengguna yang buruk dengan menunda penutupan halaman hingga beberapa detik.
Praktik ini perlu diubah, dan browser merespons. Spesifikasi XMLHttpRequest()
sudah dijadwalkan untuk dihentikan dan
dihapus. Chrome 80 melakukan langkah pertama
dengan melarang panggilan sinkron di dalam beberapa pengendali peristiwa,
khususnya beforeunload, unload, pagehide, dan visibilitychange saat
diaktifkan saat penutupan. WebKit juga baru-baru ini mendapatkan commit yang menerapkan
perubahan perilaku yang sama.
Dalam artikel ini, saya akan menjelaskan secara singkat beberapa opsi bagi pengguna yang memerlukan waktu untuk mengupdate situs dan menguraikan alternatif untuk XMLHttpRequest().
Ketidakikutsertaan sementara
Chrome tidak hanya ingin menarik steker di XMLHttpRequest(), itulah sebabnya beberapa
opsi pilihan tidak ikut sementara tersedia. Untuk situs di internet, uji coba origin
tersedia.
Dengan demikian, Anda akan menambahkan token khusus origin ke header halaman yang memungkinkan
panggilan XMLHttpRequest() sinkron. Opsi ini berakhir sesaat sebelum Chrome 89
dirilis, pada 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 dihapus muatannya untuk mengirim semua data sekaligus. Selain menciptakan pengalaman pengguna yang buruk, penghapusan muatan tidak dapat diandalkan di browser modern dan berisiko kehilangan data jika terjadi kesalahan. Secara khusus, peristiwa penghapusan muatan sering kali tidak diaktifkan di browser
seluler
karena ada banyak cara untuk
menutup
tab atau browser pada sistem operasi seluler tanpa mengaktifkan peristiwa unload.
Dengan XMLHttpRequest(), menggunakan payload kecil adalah sebuah pilihan. Sekarang ini merupakan
sebuah persyaratan. Kedua alternatifnya memiliki batas upload sebesar 64 KB per konteks, sebagaimana yang diperlukan oleh spesifikasi.
Ambil 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 akan berlanjut, terlepas dari 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 bahwa fetch() juga menampilkan promise yang di-resolve dengan objek Response. Karena saya mencoba untuk keluar dari cara {i>
unload<i} halaman, saya memilih untuk tidak melakukan apa pun.
SendBeacon()
Pada prinsipnya, SendBeacon()
menggunakan Fetch API, yang memiliki batasan payload 64 KB yang sama. Selain itu, fitur ini juga memastikan permintaan berlanjut setelah penghapusan muatan halaman. Kelebihan utamanya adalah kemudahannya. Dengan alat 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 suatu saat. Vendor browser setuju bahwa tindakan ini harus dihapus, tetapi proses ini
memerlukan waktu lama. Menghentikan penggunaan salah satu kasus penggunaan terburuknya adalah langkah pertama yang dapat meningkatkan pengalaman pengguna bagi semua orang.
Foto oleh Matthew Hamilton di Unsplash