Web sayfalarının sunucularına veri (veya "işaretçi") göndermesi yaygın bir durumdur. Örneğin, bir kullanıcının mevcut oturumuyla ilgili analiz verilerini düşünün. Geliştiriciler için bu, bir denge kurma işlemi gerektirir: Sekme kapatılmışsa veya kullanıcı bir işaretçi gönderilmeden önce başka bir sayfaya gittiyse verilerin kaçırılması riskini göze almadan sürekli ve muhtemelen gereksiz istekleri azaltmak.
Geliştiriciler, sayfayı yüklenirken yakalamak için geleneksel olarak pagehide
ve visibilitychange
etkinliklerini, ardından verileri işaretlemek için navigator.sendBeacon()
veya keepalive
ile fetch()
'ı kullanmıştır. Ancak bu etkinliklerin her ikisi de kullanıcının tarayıcısından farklı olan zor durumlara sahiptir ve bazen etkinlikler hiç gönderilmez (özellikle mobil cihazlarda).
fetchLater()
, bu karmaşıklığı tek bir API çağrısıyla değiştirmeyi amaçlayan bir tekliftir. Bu yöntem tam olarak adından da anlaşılacağı gibi çalışır: Sayfa kapatılmış veya kullanıcı sayfadan ayrılmış olsa bile tarayıcıdan gelecekte bir noktada istek gönderilmesini ister.
fetchLater()
, 121 sürümünden (Ocak 2024'te yayınlandı) itibaren 3 Eylül 2024'e kadar sürecek bir kaynak denemesi kapsamında gerçek kullanıcılarla test etmek için Chrome'da kullanılabilir.
fetchLater()
API
const fetchLaterResult = fetchLater(request, options);
fetchLater()
, genellikle fetch()
ile aynı olan iki bağımsız değişken alır:
request
, dize URL'si veyaRequest
örneğidir.options
öğesinifetch()
'danactivateAfter
adlı bir zaman aşımıyla uzatan isteğe bağlı biroptions
nesnesi.
fetchLater()
, şu anda yalnızca tek bir salt okunur özellik activated
içeren bir FetchLaterResult
döndürür. Bu özellik, "sonra" geçtiğinde ve getirme işlemi yapıldığında true
olarak ayarlanır. fetchLater()
isteğine verilen tüm yanıtlar silinir.
request
En basit kullanım, tek başına bir URL'dir:
fetchLater('/endpoint/');
Ancak fetch()
ile aynı şekilde, fetchLater()
isteğinde özel başlıklar, kimlik bilgileri davranışı, POST
gövdesi ve isteği iptal etmek için AbortController
signal
gibi çok sayıda seçenek ayarlanabilir.
fetchLater('/endpoint/', {
method: 'GET',
cache: 'no-store',
mode: 'same-origin',
headers: {Authorization: 'SUPER_SECRET'},
});
options
options nesnesi, isteği zaman aşımından sonra veya sayfa yüklendiğinde (hangisi önce gelirse) tetiklemek isteyebilirsiniz. Bu nedenle, fetch()
seçeneklerini bir zaman aşımı (activateAfter
) ile genişletir.
Bu sayede, verileri mümkün olan en son anda alma ile daha uygun bir zamanda alma arasında bir denge kurabilirsiniz.
Örneğin, kullanıcılarınızın genellikle tüm iş günü boyunca açık tuttuğu bir uygulamanız varsa daha ayrıntılı analizler elde etmek için bir saatlik zaman aşımı ayarlayabilirsiniz. Bu sayede, kullanıcı bu saat dolmadan uygulamadan çıkarsa işaretçiyi kullanmaya devam edebilirsiniz. Ardından, bir sonraki saate ait analizler için yeni bir fetchLater()
oluşturulabilir.
const hourInMilliseconds = 60 * 60 * 1000;
fetchLater('/endpoint/', {activateAfter: hourInMilliseconds});
Örnek kullanım
Core Web Vitals'ı sahada ölçerken karşılaşılan sorunlardan biri, kullanıcı bir sayfadan ayrılana kadar performans metriklerinden herhangi birinin değişebilmesidir. Örneğin, herhangi bir zamanda daha büyük düzen kaymaları gerçekleşebilir veya sayfanın bir etkileşime yanıt vermesi daha da uzun sürebilir.
Ancak sayfanın yüklenmesi sırasında hatalı veya eksik işaretçi gönderme nedeniyle tüm performans verilerini kaybetme riskini almak istemezsiniz. fetchLater()
için mükemmel bir aday.
Bu örnekte, metrikleri izlemek için web-vitals.js kitaplığı, sonuçları bir analiz uç noktasına bildirmek için ise fetchLater()
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üncellemesi geldiğinde, mevcut planlanmış fetchLater()
bir AbortController
ile iptal edilir ve güncellemenin dahil edildiği yeni bir fetchLater()
oluşturulur.
fetchLater()
'ü deneyin
Belirtildiği gibi, fetchLater()
Chrome 126'ya kadar orijinal deneme sürümünde kullanılabilir. Kaynak denemeleri hakkında temel bilgiler için "Kaynak denemelerini kullanmaya başlama" başlıklı makaleyi inceleyin.
Yerel test için fetchLater
, chrome://flags/#enable-experimental-web-platform-features
adresindeki Deneysel Web Platformu özellikleri işaretiyle etkinleştirilebilir. Chrome, komut satırından --enable-experimental-web-platform-features
veya daha hedefli --enable-features=FetchLaterAPI
işaretiyle çalıştırılarak da etkinleştirilebilir.
Herkese açık bir sayfada kullanıyorsanız kullanmadan önce global fetchLater
değerinin tanımlanıp tanımlanmadığını kontrol ederek özellik algıladığınızdan emin olun:
if (globalThis.fetchLater) {
// Set up beaconing using fetchLater().
// ...
}
Geri bildirim
Yeni web API'lerinin doğru şekilde kullanılması için geliştirici geri bildirimleri çok önemlidir. Bu nedenle, lütfen GitHub'da sorun bildirin ve geri bildirimde bulunun.