גרסת המקור לניסיון של ProvideLater API

Brendan Kenny
Brendan Kenny
X GitHub

לרוב דפי אינטרנט צריכים לשלוח נתונים (או 'חיישן') חזרה לשרת שלהם. לדוגמה, נתוני ניתוח נתונים של הסשן הנוכחי של משתמש. המפתחים צריכים לבצע איזון: לצמצם את מספר הבקשות הקבועות, אולי העודפות, בלי להסתכן באובדן נתונים אם הכרטיסייה נסגרה או שהמשתמש עבר לאתר אחר לפני שאפשר היה לשלוח אות מיקום.

בעבר, מפתחים השתמשו באירועים pagehide ו-visibilitychange כדי לזהות את הדף בזמן שהוא פורק, ולאחר מכן השתמשו ב-navigator.sendBeacon() או ב-fetch() עם keepalive כדי לשלוח נתונים באמצעות איתותים. עם זאת, בשני האירועים האלה יש מקרים פינתיים קשים שמשתנים בהתאם לדפדפן של המשתמש, ולפעמים האירועים אף פעם לא מגיעים בכלל – במיוחד בנייד.

fetchLater() היא הצעה להחליף את המורכבות הזו בקריאה אחת ל-API. התג הזה פועל בדיוק כפי ששמו מציין: הוא מבקש מהדפדפן לוודא שהבקשה תישלח בשלב כלשהו בעתיד, גם אם הדף נסגר או שהמשתמש עוזב אותו.

fetchLater() זמין ב-Chrome לבדיקה עם משתמשים אמיתיים במסגרת גרסת מקור לניסיון, החל מגרסה 121 (שפורסמה בינואר 2024) ועד 3 בספטמבר 2024.

ה-API של fetchLater()

const fetchLaterResult = fetchLater(request, options);

fetchLater() מקבלת שני ארגומנטים, בדרך כלל זהים לאלה של fetch():

  • request, כתובת URL במחרוזת או מופע של Request.
  • אובייקט options אופציונלי, שמרחיב את ה-options מ-fetch() עם זמן קצוב לתפוגה שנקרא activateAfter.

הפונקציה fetchLater() מחזירה FetchLaterResult, שכולל כרגע רק נכס אחד לקריאה בלבד, activated, שיוגדר כ-true אחרי שחולף 'הזמן הרצוי' והאחזור מתבצע. כל תגובה לבקשה fetchLater() תימחק.

request

השימוש הפשוט ביותר הוא כתובת URL בפני עצמה:

fetchLater('/endpoint/');

אבל, בדומה לבקשה מסוג fetch(), אפשר להגדיר מספר רב של אפשרויות בבקשה מסוג fetchLater(), כולל כותרות בהתאמה אישית, התנהגות של פרטי הכניסה, גוף של POST ו-AbortController signal כדי לבטל אותה.

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

דוגמה לשימוש

אחת הבעיות במדידת מדדי הליבה לבדיקת חוויית המשתמש באתר בשטח היא שכל מדדי הביצועים עשויים להשתנות עד שהמשתמש יוצא מהדף בפועל. לדוגמה, שינויי פריסה גדולים יותר יכולים להתרחש בכל שלב, או שהדף עשוי להידרשות לו זמן רב יותר כדי להגיב לאינטראקציה.

עם זאת, לא רוצים להסתכן באובדן כל נתוני הביצועים כתוצאה מבאגים או בגלל איתות לא שלם בהסרת הדף שנטענו. הוא מתאים במיוחד לתפקיד 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() זמין בגרסת מקור לניסיון עד גרסה 126 של Chrome. מידע רקע על גרסאות מקור לניסיון זמין במאמר איך מתחילים לעבוד עם גרסאות מקור לניסיון

לצורך בדיקה מקומית, אפשר להפעיל את fetchLater באמצעות הדגל Experimental Web Platform features בקובץ 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.

מידע נוסף