Meningkatkan penutupan halaman di XMLHttpRequest sinkron

Joe Medley
Joe Medley
GitHub

Halaman atau aplikasi biasanya memiliki data Analytics atau data lain yang belum dikirimkan pada saat pengguna menutupnya. Untuk mencegah kehilangan data, beberapa situs menggunakan panggilan sinkron untuk XMLHttpRequest() agar halaman atau aplikasi tetap terbuka hingga datanya diteruskan ke server. Tidak hanya ada cara yang lebih baik untuk menyimpan data, tetapi teknik ini juga menciptakan pengalaman pengguna yang buruk dengan menunda penutupan halaman hingga beberapa detik.

Praktik ini perlu diubah, dan browser meresponsnya. Spesifikasi XMLHttpRequest() sudah dijadwalkan untuk dihentikan dan dihapus. Chrome 80 mengambil langkah pertama dengan melarang panggilan sinkron di dalam beberapa pengendali peristiwa, khususnya beforeunload, unload, pagehide, dan visibilitychange saat dipicu dalam penutupan. WebKit juga baru-baru ini melakukan commit yang menerapkan perubahan perilaku yang sama.

Saya akan menjelaskan secara singkat opsi bagi mereka yang memerlukan waktu untuk memperbarui situsnya dan menguraikan alternatif untuk XMLHttpRequest().

Penonaktifan sementara

Chrome ingin memberikan waktu bagi developer untuk menghilangkan ketergantungan pada XMLHttpRequest(), jadi kami menawarkan opsi penonaktifan sementara.

Bergabung ke uji coba origin. Dengan demikian, Anda menambahkan token khusus asal ke header halaman yang memungkinkan 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 hindari menunggu hingga halaman dibongkar untuk mengirim semua data sekaligus. Selain menciptakan pengalaman pengguna yang buruk, pelepasan tidak dapat diandalkan di browser modern dan berisiko kehilangan data jika terjadi kesalahan. Secara khusus, peristiwa pelepasan muatan sering kali tidak dipicu di browser seluler karena ada banyak cara untuk menutup tab atau browser di sistem operasi seluler tanpa memicu peristiwa unload. Dengan XMLHttpRequest(), penggunaan payload kecil adalah pilihan. Sekarang ini menjadi persyaratan. Kedua alternatifnya memiliki batas upload 64 KB per konteks, sebagaimana 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 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 berupa kontrol yang lebih besar atas apa yang dikirim ke server. Yang tidak saya tunjukkan dalam contoh adalah bahwa fetch() juga menampilkan promise yang diselesaikan dengan objek Response. Karena saya mencoba keluar dari proses pembongkaran halaman, saya memilih untuk tidak melakukan apa pun.

SendBeacon()

SendBeacon() sebenarnya menggunakan Fetch API di balik layar, itulah sebabnya ia memiliki batasan payload 64 KB yang sama dan juga memastikan bahwa permintaan berlanjut setelah halaman dibatalkan. Keunggulan utamanya adalah kesederhanaannya. Hal ini memungkinkan Anda 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. Vendor browser setuju bahwa fitur ini harus dihapus, tetapi akan membutuhkan waktu. Menghentikan salah satu kasus penggunaan terburuknya adalah langkah pertama yang meningkatkan pengalaman pengguna bagi semua orang.