Web sayfalarının verileri (veya "işaretçiyi") sunucularına geri göndermesi yaygın bir durumdur. Örneğin, bir kullanıcının o andaki oturumuna ilişkin analiz verilerini düşünebilirsiniz. Geliştiriciler için bunun için dengeli bir yaklaşım gerekir: Sekme kapatıldıysa veya kullanıcı bir işaretçi gönderilmeden başka bir yere gittiğinde veri kaçırılma riski olmadan sabit, muhtemelen gereksiz istekleri azaltma.
Geleneksel olarak, geliştiriciler sayfa yüklenirken sayfayı yakalamak için pagehide ve visibilitychange etkinliklerini, ardından verileri işaretlemek için navigator.sendBeacon() veya keepalive içeren bir fetch() kullanırlar. Ancak, her iki etkinliğin de kullanıcının tarayıcısına göre farklılık gösteren zor köşe durumları vardır ve bazen etkinlikler hiçbir zaman gelmez (özellikle mobilde).
fetchLater(), bu karmaşıklığı tek bir API çağrısıyla değiştirme teklifidir. Adından da anlaşılacağı gibi, sayfa kapalı olsa veya kullanıcı sayfadan çıksa bile tarayıcının gelecekte herhangi bir zamanda bir istek yapıldığından emin olmasını ister.
fetchLater(), Chrome 126 sürümüne (Temmuz 2024) kadar 121 (Ocak 2024'te kullanıma sunuldu) sürümünden itibaren geçerli olan bir kaynak denemesi kullanan gerçek kullanıcılarla test etmek için Chrome'da kullanılabilir.
fetchLater() API
const fetchLaterResult = fetchLater(request, options);
fetchLater(), genellikle fetch() bağımsız değişkeniyle aynı olan iki bağımsız değişken alır:
request, dize URL'si veyaRequestörneğidir.optionsöğesinifetch()değerindenactivateAfteradlı bir zaman aşımıyla genişleten isteğe bağlıoptionsnesnesi.
fetchLater(), şu anda yalnızca tek bir salt okunur özellik activated içeren bir FetchLaterResult döndürür. "Daha sonra" değeri geçip getirme işlemi yapıldığında bu özellik true olarak ayarlanır. fetchLater() isteğine verilen yanıtlar silinir.
request
En basit kullanım, başlı başına bir URL'dir:
fetchLater('/endpoint/');
Ancak fetch() içinde olduğu gibi fetchLater() isteği için özel üstbilgiler, kimlik bilgileri davranışı, POST gövdesi ve AbortController signal gibi çok sayıda seçenek ayarlanabilir.
fetchLater('/endpoint/', {
method: 'GET',
cache: 'no-store',
mode: 'same-origin',
headers: {Authorization: 'SUPER_SECRET'},
});
options
Seçenekler nesnesi, isteğin zaman aşımı süresinden sonra veya sayfa boşaltıldığında (hangisi önce gerçekleşirse) etkinleşmesi ihtimaline karşı fetch() ürününün seçeneklerini zaman aşımıyla (activateAfter) genişletir.
Bu sayede verileri en son mümkün olan zamanda mı yoksa daha doğru zamanda mı alacağınıza karar verebilirsiniz.
Örneğin, kullanıcılarınızın genellikle iş gününün tamamı boyunca açık tuttuğu bir uygulamanız varsa daha ayrıntılı analizler elde etmek için bir saatlik zaman aşımı olmasını isteyebilirsiniz. Ayrıca, kullanıcı bu saat bitmeden herhangi bir zamanda çıkış yapmışsa bir işaretçiyi garanti etmeyi sürdürebilirsiniz. Analizin bir sonraki saati için yeni bir fetchLater() ayarlanabilir.
const hourInMilliseconds = 60 * 60 * 1000;
fetchLater('/endpoint/', {activateAfter: hourInMilliseconds});
Örnek kullanım
Alanda Önemli Web Verileri ölçülürken karşılaşılan sorunlardan biri, kullanıcı gerçekten sayfadan ayrılana kadar performans metriklerinden herhangi birinin değişebilmesidir. Örneğin, her an daha büyük düzen kaymaları olabilir veya sayfanın bir etkileşime yanıt vermesi daha da uzun sürebilir.
Ancak, sayfa yüklemesi kaldırılırken hatalı veya eksik işaretlemeler nedeniyle tüm performans verilerini kaybetme riskiyle karşı karşıya olmak istemezsiniz. fetchLater() için mükemmel bir aday.
Bu örnekte, web-vitals.js kitaplığı metrikleri izlemek için, fetchLater() ise sonuçları bir analiz uç noktasına raporlamak için kullanılır:
import {onCLS, onINP, onLCP} from 'web-vitals';
const queue = new Set();
let fetchLaterController;
let fetchLaterResult;
function updateQueue(metricUpdate) {
// If there was an already complete request for whatever
// reason, clear out the queue of already-sent updates.
if (fetchLaterResult?.activated) {
queue.clear();
}
queue.add(metricUpdate);
// JSON.stringify used here for simplicity and will likely include
// more data than you need. Replace with a preferred serialization.
const body = JSON.stringify([...queue]);
// Abort any existing `fetchLater()` and schedule a new one with
// the update included.
fetchLaterController?.abort();
fetchLaterController = new AbortController();
fetchLaterResult = fetchLater('/analytics', {
method: 'POST',
body,
signal: fetchLaterController.signal,
activateAfter: 60 * 60 * 1000, // Timeout to ensure timeliness.
});
}
onCLS(updateQueue);
onINP(updateQueue);
onLCP(updateQueue);
Her metrik güncellemesinde, planlanan tüm fetchLater() bir AbortController ile iptal edilir ve güncellemeyi içeren yeni bir fetchLater() oluşturulur.
fetchLater() ürününü deneyin
Belirtildiği gibi fetchLater(), Chrome 126'ya kadar kaynak deneme sürümünde kullanılabilir. Kaynak denemeleriyle ilgili arka plan bilgileri için "Kaynak denemelerini kullanmaya başlama" bölümüne bakın.
Yerel test için fetchLater, chrome://flags/#enable-experimental-web-platform-features adresindeki Deneysel Web Platformu özellikleri işaretiyle etkinleştirilebilir. Bu ayrıca, Chrome'u komut satırından --enable-experimental-web-platform-features veya daha iyi hedeflenmiş --enable-features=FetchLaterAPI işaretiyle çalıştırarak da etkinleştirilebilir.
Herkese açık bir sayfada kullanıyorsanız, kullanmadan önce genel fetchLater öğesinin tanımlanıp tanımlanmadığını kontrol ederek özellik algılama özelliğini etkinleştirdiğinizden emin olun:
if (globalThis.fetchLater) {
// Set up beaconing using fetchLater().
// ...
}
Geri bildirim
Yeni web API'lerini doğru şekilde kullanmak için geliştirici geri bildirimleri çok önemlidir. Bu nedenle lütfen GitHub ile ilgili sorunları bildirip geri bildirim gönderin.