Meningkatkan penutupan halaman di XMLHttpRequest() sinkron

Mengurangi navigasi yang tertunda

Joe Medley
Joe Medley

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