Bir sayfanın veya uygulamanın, kullanıcı tarafından kapatıldığı sırada gönderilmemiş analizlere veya diğer verilere sahip olması yaygın bir durumdur. Veri kaybını önlemek için bazı siteler, XMLHttpRequest() verileri sunucuya iletilene kadar sayfayı veya uygulamayı açık tutmak için. Verileri kaydetmenin daha iyi yolları olmasının yanı sıra bu teknik, sayfanın kapanmasını birkaç saniyeye kadar geciktirerek kötü bir kullanıcı deneyimi yaratır.
Bu uygulamanın değişmesi gerekiyor ve tarayıcılar yanıt veriyor. bu XMLHttpRequest() şartname zaten kullanımdan kaldırma ve kaldırma için planlanmış. Chrome 80, özellikle birkaç olay işleyicinin içindeki eşzamanlı çağrılara izin vermeyerek ilk adımı atıyor. beforeunload, unload, pagehideVe visibilitychange işten çıkarıldıklarında. WebKit de yakın zamanda indi aynı davranış değişikliğini uygulayan bir taahhüt.
Bu yazıda, sitelerini güncellemek için zamana ihtiyacı olanlar için seçenekleri kısaca anlatacağım ve alternatiflerini özetleyeceğim. XMLHttpRequest().
Geçici devre dışı bırakmalar #
Chrome sadece fişi çekmek istemiyor XMLHttpRequest(), bu nedenle birkaç geçici devre dışı bırakma seçeneği mevcuttur. İnternetteki siteler için, bir menşe denemesi mevcuttur. Bununla, sayfa başlıklarınıza, senkronize çalışmayı etkinleştiren, kaynağa özgü bir belirteç eklersiniz. XMLHttpRequest() çağrılar. Bu seçenek, Chrome 89’un piyasaya sürülmesinden kısa bir süre önce, Mart 2021’de sona erer. Enterprise Chrome müşterileri ayrıca AllowSyncXHRInPageDismissal aynı anda sona eren politika bayrağı.
alternatifler #
Verileri sunucuya nasıl geri gönderirseniz gönderin, tüm verileri bir kerede göndermek için sayfanın kaldırılmasını beklemekten kaçınmak en iyisidir. Kaldırma, kötü bir kullanıcı deneyimi yaratmanın yanı sıra, modern tarayıcılarda güvenilir değildir ve bir şeyler ters giderse veri kaybı riski taşır. Özellikle, etkinlikleri kaldır genellikle mobil tarayıcılarda ateş etmeyin Çünkü var kapatmanın birçok yolu olmadan mobil işletim sistemlerinde bir sekme veya tarayıcı unload olay ateşleme İle XMLHttpRequest(), küçük yükler kullanmak bir seçimdi. Artık bu bir gereklilik. Spesifikasyonun gerektirdiği şekilde, her iki alternatifinin de içerik başına 64 KB yükleme sınırı vardır.
canlı tut getir #
bu API’yi getir sunucu etkileşimleriyle başa çıkmanın sağlam bir yolunu sağlar ve tutarlı bir arayüz farklı platform API’lerinde kullanım için. Seçenekleri arasında keepalivebu da isteğin yapıldığı sayfa açık kalsa da kalmasa da isteğin devam etmesini sağlar:
window.addEventListener('unload', {
fetch('/siteAnalytics', {
method: 'POST',
body: getStatistics(),
keepalive: true
});
}
bu fetch() yöntemi, sunucuya gönderilenler üzerinde daha fazla kontrol avantajına sahiptir. Örnekte göstermediğim şey, fetch() ayrıca şu şekilde çözülen bir söz verir: Response nesne. Sayfanın boşaltılmasının önüne geçmeye çalıştığım için onunla hiçbir şey yapmamayı seçtim.
GönderBeacon() #
SendBeacon() aslında kaputun altında Fetch API’sini kullanır, bu nedenle aynı 64 KB yük sınırlamasına sahiptir ve ayrıca bir sayfa kaldırıldıktan sonra bir isteğin devam etmesini sağlar. Birincil avantajı basitliğidir. Verilerinizi tek bir kod satırıyla göndermenizi sağlar:
window.addEventListener('unload', {
navigator.sendBeacon('/siteAnalytics', getStatistics());
}
Çözüm #
İle artan kullanılabilirlik fetch() tarayıcılar arasında, XMLHttpRequest() umarım bir noktada web platformundan kaldırılacaktır. Tarayıcı satıcıları, kaldırılması gerektiği konusunda hemfikirdir, ancak bu zaman alacaktır. En kötü kullanım durumlarından birinin kullanımdan kaldırılması, kullanıcı deneyimini herkes için iyileştiren ilk adımdır.
fotoğrafı çeken Matthew Hamilton Açık Unsplash