פונקציית רשת מיוחדת לנתוני ניתוח בדפדפן

כיצד להשתמש ב- 'sendBeacon' להעברת נתחי נתונים קטנים באופן אמין

מהו "sendBeacon"

אתה בטח מכיר את שתי האפשרויות לשימוש כאשר אתה רוצה להגיש בקשה מלקוח, כמו מאפליקציית האינטרנט המתקדמת שלך: XMLHttpRequest או ה"אחזור "החדש יותר. אבל האם ידעת שישנה אפשרות שלישית, שנועדה במיוחד לשליחת נתחי נתונים קטנים מאוד כמו נתוני ניתוח? זוהי פונקציה הנקראת "sendBeacon", הזמינה בדפדפנים מודרניים מהאובייקט "ניווט".

כיצד להשתמש ב- "sendBeacon"

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

ניתן לשלוח את סוגי הנתונים הבאים.

  • ArrayBuffer
  • ArrayBufferView
  • כֶּתֶם
  • מחרוזת DOMS
  • טופס מידע
  • URLSearchParams

כל קריאה של "sendBeacon" תעביר בקשת POST לנקודת הסיום שצוינה.

async function track(payload: TrackPayload){
  // We're using 'optional property access'
  // for a simple and clean implementation.
  //
  // You could of course also use nested if(){ ... }.
  await navigator?.sendBeacon?.('/track', payload);
}

// The following example is taken directly
// from the MDN page, linked in the addendum
// at the end of this page.
//
// It demonstrates the usage with the
// 'visibilitychange'-event when the user
// could close your web app.
document.addEventListener('visibilitychange', function logData() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData);
  }
});

מה שונה

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

שאר פונקציות הבקשה הנפוצות אינן מבטיחות שהבקשה שלך תישלח כאשר משתמש יסגור את אפליקציית האינטרנט (למשל על ידי סגירת הכרטיסייה). "sendBeacon" הוא גם אסינכרוני לחלוטין ואינו מציג עיכוב בעת ניווט לדף אחר באפליקציית האינטרנט שלך ועדיין שולח את נתוני הניתוח להיסטוריית הדפים של המשתמש.

שפר באופן הדרגתי את אפליקציית האינטרנט שלך

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

הצעות

קשור

נספח

שפות