Gecikmeli navigasyonu azaltma
Kullanıcı sayfayı kapattığında, bir sayfada veya uygulamada gönderilmemiş analizler veya başka veriler olması yaygın bir durumdur. Bazı siteler, veri kaybını önlemek amacıyla verileri sunucuya aktarılana kadar sayfayı veya uygulamayı açık tutmak için eşzamanlı bir XMLHttpRequest()
çağrısı kullanır. Verileri kaydetmenin daha iyi yolları olmasının yanı sıra bu teknik, sayfanın kapatılmasını birkaç saniye kadar geciktirerek kötü bir kullanıcı deneyimine neden olur.
Bu uygulamanın değişmesi gerekiyor ve tarayıcılar gerekeni yapıyor. XMLHttpRequest()
spesifikasyonu için kullanımdan kaldırılma ve kaldırılma işlemi zaten planlanmıştır. Chrome 80 ilk adımı, çeşitli etkinlik işleyicilerin içindeki eşzamanlı çağrılara, özellikle de kapatma işleminde
tetiklenen beforeunload
, unload
, pagehide
ve visibilitychange
olarak izin vermeyerek ilk adımı atar. WebKit, kısa süre önce aynı davranış değişikliğini uygulayan bir taahhüt de aldı.
Bu makalede, sitelerini güncellemek için zamana ihtiyacı olan kullanıcıların yararlanabileceği seçenekleri ve XMLHttpRequest()
alternatiflerinin ana hatlarını kısaca açıklayacağım.
Geçici olarak devre dışı bırakma işlemleri
Chrome sadece XMLHttpRequest()
bağlantısını çekmek istemez. Bu nedenle, birkaç geçici devre dışı bırakma seçeneği sunulur. İnternetteki siteler için bir kaynak denemesi kullanılabilir.
Bununla birlikte, sayfa üst bilgilerinize eşzamanlı XMLHttpRequest()
çağrılarını etkinleştiren kaynağa özel bir jeton eklersiniz. Bu seçenek, Mart 2021'de Chrome 89'un kullanıma sunulmasından kısa bir süre önce sona erer. Enterprise Chrome müşterileri, aynı anda sona eren AllowSyncXHRInPageDismissal
politika işaretini de kullanabilir.
Alternatifler
Verileri sunucuya nasıl geri gönderdiğinizden bağımsız olarak, tüm verilerin bir defada gönderilmesi için sayfanın yüklenmesi bitene kadar beklemekten kaçınmak en iyisidir. Kaldırma işlemi, kötü bir kullanıcı deneyimi oluşturmak dışında, modern tarayıcılarda güvenilir değildir ve bir şeyler ters gittiğinde veri kaybı yaşanmasına neden olur. Daha açık belirtmek gerekirse, unload etkinlikleri genellikle mobil tarayıcılarda tetiklenmez. Çünkü mobil işletim sistemlerinde unload
etkinliğinin tetiklenmediği bir sekme veya tarayıcıyı kapatmanın birçok yolu vardır.
XMLHttpRequest()
ile, küçük yük kullanımı tercih edildi. Bu artık bir
gereklilik haline geldi. Her iki alternatifi de spesifikasyon uyarınca içerik başına 64 KB yükleme sınırı vardır.
Keepalive'ı getir
Getirme API'si, sunucu etkileşimleriyle ilgilenmek için güçlü bir yöntem ve farklı platform API'lerinde kullanılmak üzere tutarlı bir arayüz sunar. Seçenekleri arasında keepalive
bulunur. Bu, isteğin, onu yapan sayfanın açık kalıp kalmadığına bakılmaksızın devam etmesini sağlar:
window.addEventListener('unload', {
fetch('/siteAnalytics', {
method: 'POST',
body: getStatistics(),
keepalive: true
});
}
fetch()
yöntemi, sunucuya gönderilen veriler üzerinde daha fazla denetim avantajına sahiptir. Örnekte şunu göstermiyorum: fetch()
, Response
nesnesiyle çözümlenen bir vaat de döndürür. Sayfanın yüklenmesinden çıkmaya çalıştığım
için bununla ilgili hiçbir şey yapmamayı seçtim.
SendBeacon()
SendBeacon()
aslında Fetch API'yi arka planda kullandığından 64 KB yük sınırının aynı olması ve isteğin sayfa kaldırıldıktan sonra da devam etmesini sağlamasıdır. Başlıca avantajı basit olmasıdır. Verilerinizi tek bir kod satırıyla göndermenizi sağlar:
window.addEventListener('unload', {
navigator.sendBeacon('/siteAnalytics', getStatistics());
}
Sonuç
Tarayıcılarda fetch()
sürümünün artan kullanılabilirliği ile birlikte, XMLHttpRequest()
ürününün bir noktada web platformundan kaldırılmasını umuyoruz. Tarayıcı tedarikçileri bunun kaldırılması gerektiğini kabul eder, ancak bu zaman alacaktır. En kötü kullanım alanlarından birini kullanımdan kaldırmak, herkes için kullanıcı deneyimini iyileştirecek ilk adımdır.
Fotoğrafçı: Matthew Hamilton (Unsplash'ta)