Bir kullanıcı bir sayfayı veya uygulamayı kapattığında, gönderilmemiş analizlerin veya diğer verilerin olması yaygın bir durumdur. Veri kaybını önlemek için bazı siteler, verileri sunucuya aktarılana kadar sayfayı veya uygulamayı açık tutmak üzere XMLHttpRequest() senkronize bir çağrı kullanır. Verileri kaydetmenin daha iyi yollarının yanı sıra bu teknik, sayfanın kapatılmasını birkaç saniye geciktirerek kötü bir kullanıcı deneyimine neden olur.
Bu uygulamanın değişmesi gerekiyor ve tarayıcılar da buna yanıt veriyor. XMLHttpRequest() spesifikasyonu kullanımdan kaldırılacak ve silinecek. Chrome 80, kapatma sırasında tetiklenen beforeunload, unload, pagehide ve visibilitychange gibi çeşitli etkinlik işleyicilerinde senkron çağrıları devre dışı bırakarak ilk adımı atıyor. WebKit de kısa süre önce aynı davranış değişikliğini uygulayan bir commit'i kullanıma sundu.
Sitelerini güncellemek için zamana ihtiyacı olan kullanıcılar için seçenekleri kısaca açıklayacağım ve XMLHttpRequest()'ya alternatifleri özetleyeceğim.
Geçici olarak devre dışı bırakma
Chrome, geliştiricilere XMLHttpRequest() bağımlılığını kaldırmaları için zaman tanımak istiyor. Bu nedenle, geçici olarak devre dışı bırakma seçenekleri sunduk.
Bir kaynak denemesine katılın. Bu işlemle, sayfa üstbilgilerinize kaynağa özgü bir jeton ekleyerek senkron XMLHttpRequest() çağrıları etkinleştirirsiniz. Bu seçenek, Chrome 89'un kullanıma sunulmasından kısa bir süre önce, Mart 2021'de sona erecektir. Enterprise Chrome müşterileri de aynı anda sona eren AllowSyncXHRInPageDismissal politika işaretini kullanabilir.
Alternatifler
Verileri sunucuya nasıl geri gönderdiğinizden bağımsız olarak, tüm verileri tek seferde göndermek için sayfanın yüklenmesinin kaldırılmasını beklemekten kaçınmanız önerilir. Unload, kötü bir kullanıcı deneyimi oluşturmanın yanı sıra modern tarayıcılarda güvenilir değildir ve bir sorun yaşanması durumunda veri kaybı riski taşır. Özellikle, mobil işletim sistemlerinde unload etkinliği tetiklenmeden bir sekmeyi veya tarayıcıyı kapatmanın birçok yolu olduğundan, mobil tarayıcılarda unload etkinlikleri genellikle tetiklenmez.
XMLHttpRequest() ile küçük yükler kullanmak isteğe bağlıydı. Artık bu bir zorunluluktur. Her iki alternatif de spesifikasyonun gerektirdiği gibi bağlam başına 64 KB yükleme sınırına sahiptir.
Keepalive getirme
Fetch API, sunucu etkileşimleriyle başa çıkmak için güçlü bir yöntem ve farklı platform API'lerinde kullanılmak üzere tutarlı bir arayüz sağlar. Seçeneklerinden biri olan keepalive, isteği gönderen sayfa açık kalsa da kalmasa da isteğin devam etmesini sağlar:
window.addEventListener('unload', {
fetch('/siteAnalytics', {
method: 'POST',
body: getStatistics(),
keepalive: true
});
}
fetch() yöntemi, sunucuya gönderilenler üzerinde daha fazla kontrol sahibi olmanızı sağlar. Örnekte göstermediğim nokta, fetch() işlevinin Response nesnesiyle çözümlenen bir söz döndürmesidir. Sayfanın yüklemesinin kaldırılmasını engellememek için bu öğeyle ilgili herhangi bir işlem yapmamayı tercih ettim.
SendBeacon()
SendBeacon(), arka planda Fetch API'yi kullandığı için aynı 64 KB yük sınırlamasına sahiptir ve sayfa kaldırıldıktan sonra isteğin devam etmesini sağlar. En büyük avantajı basitliğidir. Bu yöntemle verilerinizi tek bir kod satırıyla gönderebilirsiniz:
window.addEventListener('unload', {
navigator.sendBeacon('/siteAnalytics', getStatistics());
}
Sonuç
Tarayıcılarda fetch()
kullanımının artmasıyla birlikte XMLHttpRequest() umarız web platformundan kaldırılır. Tarayıcı sağlayıcıları bu özelliğin kaldırılması gerektiği konusunda hemfikir olsa da bu işlem zaman alacaktır. En kötü kullanım alanlarından birinin desteğini sonlandırmak, herkes için kullanıcı deneyimini iyileştiren ilk adımdır.