Gecikmeli gezinmeleri azaltma
Bir sayfanın veya uygulamanın, kullanıcı tarafından kapatıldığında gönderilmemiş analizleri veya başka verileri olması yaygındır. Bazı siteler, veri kaybını önlemek için sayfa veya uygulamanın verileri sunucuya aktarılana kadar açık kalması amacıyla XMLHttpRequest()
için senkronize bir çağrı kullanır. Verileri kaydetmenin daha iyi yolları vardır. Ayrıca bu teknik, sayfanın kapanmasını birkaç saniye geciktirerek kötü bir kullanıcı deneyimi oluşturur.
Bu uygulamanın değişmesi gerekiyor ve tarayıcılar buna yanıt veriyor. XMLHttpRequest()
spesifikasyonu zaten desteği sonlandırılmak ve kaldırılmak üzere planlanmış. Chrome 80, özellikle de kapatma sırasında tetiklenen beforeunload
, unload
, pagehide
ve visibilitychange
gibi çeşitli etkinlik işleyicileri içinde eşzamanlı çağrılara izin vermemek suretiyle ilk adımı atıyor. WebKit de yakın zamanda aynı davranış değişikliğini uygulayan bir taahhüt yayınladı.
Bu makalede, sitelerini güncellemek için zamana ihtiyacı olan kullanıcılara yönelik seçenekleri kısaca açıklayacak ve XMLHttpRequest()
'e yönelik alternatifleri özetleyeceğim.
Geçici kapsam dışında kalma
Chrome, XMLHttpRequest()
'ü tamamen devre dışı bırakmak istemez. Bu nedenle, geçici olarak devre dışı bırakmak için birkaç seçenek sunulur. İnternetteki siteler için kaynak deneme sürümü kullanılabilir.
Böylece, sayfa üstbilgilerinize senkronize XMLHttpRequest()
çağrılarını etkinleştiren, kaynağa özgü bir jeton eklersiniz. Bu seçenek, Chrome 89'un kullanıma sunulmasından kısa bir süre önce, Mart 2021'de sonlandırılacaktır. Enterprise Chrome müşterileri, aynı zamanda sona erecek olan AllowSyncXHRInPageDismissal
politika işaretini de kullanabilir.
Alternatifler
Verileri sunucuya nasıl gönderdiğinizden bağımsız olarak, tüm verileri tek seferde göndermek için sayfanın boşalmasını beklemekten kaçının. 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şanırsa veri kaybı riski oluşturur. Özellikle, mobil işletim sistemlerinde unload
etkinliği tetiklenmeden sekme veya tarayıcı kapatma için birçok yöntem olduğundan unload etkinlikleri genellikle mobil tarayıcılarda tetiklenmez.
XMLHttpRequest()
ile küçük yükler kullanmak bir seçenekti. Artık zorunludur. Her iki alternatifin de, spesifikasyon gereği bağlam başına 64 KB'lık bir yükleme sınırı vardır.
Keepalive'i getirme
Fetch API, sunucu etkileşimleriyle başa çıkmanın güçlü bir yolunu ve farklı platform API'lerinde kullanılacak tutarlı bir arayüz sunar. Seçenekler arasında, isteği gönderen sayfa açık kalsın veya kalmasın isteğin devam etmesini sağlayan keepalive
da vardır:
window.addEventListener('unload', {
fetch('/siteAnalytics', {
method: 'POST',
body: getStatistics(),
keepalive: true
});
}
fetch()
yönteminin avantajı, sunucuya gönderilenler üzerinde daha fazla kontrole sahip olmanızdır. Örnekte gösterilmeyen bir nokta da fetch()
'ün Response
nesnesi ile çözülen bir promise de döndürmesidir. Sayfanın boşaltılmasını engellemeye çalıştığım için bu konuda herhangi bir işlem yapmamayı tercih ettim.
SendBeacon()
SendBeacon()
aslında arka planda Getirme API'sini kullanır. Bu nedenle, aynı 64 KB yük sınırına sahiptir ve bir sayfanın yüklenmesi sona erdikten sonra isteğin devam etmesini sağlar. En önemli avantajı basit olmasıdır. Verilerinizi tek bir kod satırı ile göndermenize olanak tanır:
window.addEventListener('unload', {
navigator.sendBeacon('/siteAnalytics', getStatistics());
}
Sonuç
fetch()
'un tarayıcılarda kullanıma sunulması ile birlikte XMLHttpRequest()
, web platformundan kaldırılacaktır. Tarayıcı tedarikçileri, bu özelliğin kaldırılması gerektiği konusunda hemfikir olsa da bu işlemin zaman alacağını belirtiyor. En kötü kullanım alanlarından birini kullanımdan kaldırmak, herkes için kullanıcı deneyimini iyileştiren ilk adımdır.
Fotoğraf: Unsplash'taki Matthew Hamilton