FetchLater API Origin Trial

برندن کنی
Brendan Kenny
X GitHub

معمولاً صفحات وب نیاز به ارسال داده ها (یا "فانوس دریایی") به سرور خود دارند - به عنوان مثال، داده های تجزیه و تحلیل را برای جلسه فعلی کاربر در نظر بگیرید. برای توسعه دهندگان، این به یک عمل متعادل کننده نیاز دارد: کاهش درخواست های ثابت، احتمالاً اضافی، بدون خطر داده های از دست رفته در صورت بسته شدن برگه یا دور شدن کاربر قبل از ارسال یک چراغ دریایی.

به طور سنتی، توسعه دهندگان از pagehide و visibilitychange رویدادها برای گرفتن صفحه هنگام بارگیری آن استفاده می کردند و سپس از navigator.sendBeacon() یا fetch() همراه با داده های keepalive به beacon استفاده می کردند. با این حال، هر دوی این رویدادها موارد گوشه‌ای دشواری دارند که بر اساس مرورگر کاربر متفاوت است، و گاهی اوقات رویدادها اصلاً به دست نمی‌آیند - مخصوصاً در تلفن همراه.

fetchLater() پیشنهادی برای جایگزینی این پیچیدگی با یک فراخوانی API است. دقیقاً همانطور که از نامش پیداست عمل می‌کند: از مرورگر می‌خواهد تا اطمینان حاصل کند که یک درخواست در نقطه‌ای در آینده انجام می‌شود، حتی اگر صفحه بسته شود یا کاربر از آنجا دور شود.

fetchLater() در کروم برای آزمایش با کاربران واقعی در پشت نسخه آزمایشی اصلی که در نسخه 121 (منتشر شده در ژانویه 2024) شروع می شود و تا Chrome 126 (ژوئیه 2024) اجرا می شود، موجود است.

API fetchLater()

const fetchLaterResult = fetchLater(request, options);

fetchLater() دو آرگومان می گیرد که به طور کلی با آرگومان های fetch() یکسان هستند:

  • request ، یا یک URL رشته یا یک نمونه Request .
  • یک شی options اختیاری، که options از fetch() با یک بازه زمانی به نام activateAfter گسترش می‌دهد.

fetchLater() یک FetchLaterResult را برمی‌گرداند که در حال حاضر فقط حاوی یک ویژگی فقط خواندنی activated ، که وقتی "later" گذشت و واکشی انجام شد روی true تنظیم می‌شود. هر پاسخی به درخواست fetchLater() نادیده گرفته می شود.

request

ساده ترین استفاده یک URL به خودی خود است:

fetchLater('/endpoint/');

اما، درست مانند fetch() ، تعداد زیادی از گزینه ها را می توان در یک درخواست fetchLater() تنظیم کرد، از جمله هدرهای سفارشی، رفتار اعتبارنامه ها، بدنه POST و signal AbortController برای لغو احتمالی آن .

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

options

شی گزینه گزینه‌های fetch() را با یک بازه زمانی، activateAfter ، گسترش می‌دهد، در صورتی که می‌خواهید پس از اتمام زمان یا زمانی که صفحه بارگیری می‌شود، هر کدام که زودتر بیاید، درخواست را اجرا کنید.

این به شما امکان می‌دهد بین دریافت داده‌ها در آخرین لحظه ممکن یا زمانی که به موقع است تصمیم بگیرید.

به عنوان مثال، اگر برنامه‌ای دارید که کاربران شما معمولاً برای تمام روز کاری باز نگه می‌دارند، ممکن است بخواهید یک ساعت مهلت زمانی داشته باشید تا از تجزیه و تحلیل دقیق‌تر اطمینان حاصل کنید و در عین حال اگر کاربر در هر زمانی قبل از آن ساعت از آن خارج شد، چراغ‌های دریایی را تضمین کنید. بالا سپس یک fetchLater() جدید می‌تواند برای ساعت بعدی تجزیه و تحلیل راه‌اندازی شود.

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

استفاده مثال

یکی از مسائلی که هنگام اندازه گیری Core Web Vitals در این زمینه وجود دارد این است که هر یک از معیارهای عملکرد می تواند تغییر کند تا زمانی که کاربر واقعاً یک صفحه را ترک کند. به عنوان مثال، تغییرات طرح‌بندی بزرگ‌تر ممکن است در هر زمانی اتفاق بیفتد، یا ممکن است پاسخ صفحه به یک تعامل بیشتر طول بکشد.

با این حال، نمی‌خواهید در هنگام بارگیری صفحه، تمام داده‌های عملکرد را به دلیل باگ یا نشان دادن ناقص از دست بدهید. این یک نامزد عالی برای fetchLater() است.

در این مثال، کتابخانه web-vitals.js برای نظارت بر معیارها، و fetchLater() برای گزارش نتایج به نقطه پایانی تجزیه و تحلیل استفاده می‌شود:

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

هر بار که یک به‌روزرسانی متریک وارد می‌شود، هر fetchLater() زمان‌بندی‌شده موجود با یک AbortController لغو می‌شود و یک fetchLater() جدید همراه با به‌روزرسانی ایجاد می‌شود.

fetchLater() را امتحان کنید

همانطور که گفته شد، fetchLater() در یک نسخه آزمایشی اصلی تا Chrome 126 در دسترس است. برای اطلاعات پس‌زمینه در مورد آزمایش‌های اولیه، به « شروع با آزمایش‌های اولیه » مراجعه کنید.

برای آزمایش محلی، fetchLater می‌توان با پرچم‌گذاری ویژگی‌های پلتفرم وب آزمایشی در chrome://flags/#enable-experimental-web-platform-features فعال کرد. همچنین می‌توان آن را با اجرای Chrome از خط فرمان با --enable-experimental-web-platform-features یا پرچم هدفمندتر --enable-features=FetchLaterAPI فعال کرد.

اگر از آن در یک صفحه عمومی استفاده می‌کنید، قبل از استفاده از آن مطمئن شوید که با بررسی اینکه fetchLater جهانی تعریف شده است، ویژگی را شناسایی کنید:

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

بازخورد

بازخورد برنامه‌نویس برای درست کردن APIهای وب جدید ضروری است، بنابراین لطفاً مشکلات و بازخورد خود را در GitHub ارسال کنید .

اطلاعات بیشتر