Uji Coba Origin API fetchLater

Brendan Kenny
Brendan Kenny
X GitHub

Biasanya halaman web perlu mengirim data (atau "beacon") kembali ke server mereka—sebagai contoh, anggap data analisis untuk sesi pengguna saat ini. Bagi developer, hal ini memerlukan tindakan penyeimbangan: mengurangi permintaan yang konstan dan mungkin berlebihan tanpa risiko data yang terlewat jika tab ditutup atau pengguna keluar sebelum beacon dapat dikirim.

Biasanya, developer menggunakan peristiwa pagehide dan visibilitychange untuk menangkap halaman saat menghapus muatan, lalu menggunakan navigator.sendBeacon() atau fetch() dengan keepalive untuk data beacon. Namun, kedua acara ini memiliki sudut pandang yang sulit yang berbeda berdasarkan browser pengguna, dan terkadang peristiwa tidak pernah datang sama sekali—terutama di perangkat seluler.

fetchLater() adalah proposal untuk mengganti kompleksitas ini dengan satu panggilan API. Fungsinya persis seperti namanya: kode ini meminta browser untuk memastikan bahwa permintaan dibuat pada waktu yang akan datang, meskipun halaman ditutup atau pengguna keluar.

fetchLater() tersedia di Chrome untuk diuji dengan pengguna sungguhan yang menggunakan uji coba origin mulai versi 121 (dirilis pada Januari 2024), yang berjalan hingga Chrome 126 (Juli 2024).

fetchLater() API

const fetchLaterResult = fetchLater(request, options);

fetchLater() menggunakan dua argumen, umumnya identik dengan fetch():

  • request, bisa berupa URL string atau instance Request.
  • Objek options opsional, yang memperluas options dari fetch() dengan waktu tunggu yang disebut activateAfter.

fetchLater() menampilkan FetchLaterResult, yang saat ini hanya berisi satu properti hanya baca activated, yang akan ditetapkan ke true saat "nanti" telah diteruskan dan pengambilan telah dilakukan. Respons apa pun terhadap permintaan fetchLater() akan dihapus.

request

Penggunaan yang paling sederhana adalah URL itu sendiri:

fetchLater('/endpoint/');

Namun, seperti fetch(), sejumlah besar opsi dapat ditetapkan pada permintaan fetchLater(), termasuk header kustom, perilaku kredensial, isi POST, dan AbortController signal yang berpotensi membatalkannya.

fetchLater('/endpoint/', {
  method: 'GET',
  cache: 'no-store',
  mode: 'same-origin',
  headers: {Authorization: 'SUPER_SECRET'},
});

options

Objek opsi memperluas opsi fetch() dengan waktu tunggu, activateAfter, jika Anda ingin mengaktifkan permintaan setelah waktu tunggu atau saat halaman dihapus muatannya, mana saja yang lebih dulu.

Dengan demikian, Anda dapat memutuskan keseimbangan antara mendapatkan data pada momen yang benar-benar terakhir atau saat lebih tepat waktu.

Misalnya, jika Anda memiliki aplikasi yang biasanya dibuka oleh pengguna sepanjang hari kerja, Anda mungkin ingin menyediakan waktu tunggu selama satu jam untuk memastikan analisis yang lebih terperinci sambil tetap menjamin beacon jika pengguna keluar kapan saja sebelum jam tersebut habis. fetchLater() baru kemudian dapat disiapkan untuk analisis selama satu jam ke depan.

const hourInMilliseconds = 60 * 60 * 1000;
fetchLater('/endpoint/', {activateAfter: hourInMilliseconds});

Contoh penggunaan

Salah satu masalah saat mengukur Data Web Inti di lapangan adalah salah satu metrik performa dapat berubah hingga pengguna benar-benar meninggalkan halaman. Misalnya, pergeseran tata letak yang lebih besar dapat terjadi kapan saja, atau halaman dapat memerlukan waktu lebih lama untuk merespons interaksi.

Namun, Anda tidak ingin berisiko kehilangan semua data performa karena beaconing yang berisi bug atau tidak lengkap saat penghapusan muatan halaman. Ini adalah kandidat yang tepat untuk fetchLater().

Dalam contoh ini, library web-vitals.js digunakan untuk memantau metrik, dan fetchLater() digunakan untuk melaporkan hasilnya ke endpoint analisis:

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);

Setiap kali pembaruan metrik masuk, semua fetchLater() terjadwal yang ada dibatalkan dengan AbortController dan fetchLater() baru akan dibuat dengan menyertakan pembaruan tersebut.

Coba fetchLater()

Seperti yang dinyatakan, fetchLater() tersedia dalam uji coba origin hingga Chrome 126. Lihat "Memulai uji coba origin" untuk mengetahui informasi latar belakang tentang uji coba origin

Untuk pengujian lokal, fetchLater dapat diaktifkan dengan tanda fitur Platform Web Eksperimental di chrome://flags/#enable-experimental-web-platform-features. Kontrol ini juga dapat diaktifkan dengan menjalankan Chrome dari command line dengan --enable-experimental-web-platform-features, atau tanda --enable-features=FetchLaterAPI yang lebih ditargetkan.

Jika Anda menggunakannya di halaman publik, pastikan untuk mendeteksi fitur dengan memeriksa apakah fetchLater global sudah ditentukan sebelum menggunakannya:

if (globalThis.fetchLater) {
  // Set up beaconing using fetchLater().
  // ...
}

Masukan

Masukan developer sangat penting untuk memperbaiki web API baru dengan tepat, jadi harap ajukan masalah dan masukan di GitHub.

Informasi selengkapnya