Eşzamanlı XMLHttpRequest() işlevinde sayfa kapatmayı iyileştirme

Gecikmeli navigasyonu azaltma

Ali Polat

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)