Web sayfalarının verileri (veya "işaretçi") sunucularına geri göndermesi yaygın bir durumdur. Örnek olarak, kullanıcının mevcut oturumuna ait analiz verilerini ele alalım. Geliştiriciler için bu, bir denge kurma işlemi gerektirir: Sekme kapatıldıysa 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.
Geleneksel olarak geliştiriciler sayfayı kaldırılırken yakalamak için pagehide ve visibilitychange etkinliklerini, ardından verileri işaretlemek için navigator.sendBeacon() veya keepalive ile fetch() etkinliklerini kullanırlardı. Ancak bu etkinliklerin her ikisi de kullanıcının tarayıcısından farklı olarak 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 istek 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(), Chrome'da 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 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()'tenactivateAfteradlı bir zaman aşımıyla uzatan isteğe bağlı biroptionsnesnesi.
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, URL'nin tek başına olmasıdır:
fetchLater('/endpoint/');
Ancak fetch()'te olduğu gibi, fetchLater() isteğinde de ö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
Seçenekler nesnesi, isteği zaman aşımına uğradıktan sonra veya sayfa kaldırıldığında (hangisi önce gerçekleşirse) tetiklemek istemeniz ihtimaline karşı fetch() öğesinin seçeneklerini bir zaman aşımı (activateAfter) ile genişletir.
Bu sayede, verileri elde etme konusunda mümkün olan mutlak son anda mı yoksa daha zamanında mı elde edileceğine karar verebilirsiniz.
Ö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 bir zaman aşımı belirlemek isteyebilirsiniz. Kullanıcı bu süre dolmadan herhangi bir zamanda çıkış yaparsa yine de bir işaretçiyi garanti altına alabilirsiniz. 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, daha büyük düzen kaymaları herhangi bir zamanda 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ı ise bir analiz uç noktasına raporlamak için fetchLater() kullanılmaktadı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 kaynak denemesinde 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'lerini doğru şekilde kullanmak için geliştiricilerin geri bildirimleri çok önemlidir. Bu nedenle, lütfen GitHub'da sorunları bildirin ve geri bildirimde bulunun.