وظيفة شبكة خاصة لتحليلات البيانات في المتصفح

ما هو "sendBeacon"

ربما تعرف الخيارين اللذين يجب استخدامهما عندما تريد تقديم طلب من أحد العملاء ، مثل تطبيق الويب التقدمي: إما XMLHttpRequest أو "الجلب" الأحدث. لكن هل تعلم أن هناك خيارًا ثالثًا ، مصممًا خصيصًا لإرسال أجزاء صغيرة جدًا من البيانات مثل البيانات التحليلية؟ إنها وظيفة تسمى "sendBeacon" ، وهي متوفرة في المتصفحات الحديثة من كائن "navigator".

كيفية استخدام "sendBeacon"

يعد استخدام وظيفة الطلب المصممة لهذا الغرض لقطع البيانات الصغيرة أمرًا بسيطًا حقًا. طالما أن كل من وظيفة "الملاح" و "sendBeacon" على الملاح متوفرة ، فكل ما عليك القيام به هو توفير عنوان URL بالإضافة إلى الحمولة لإرسالها.

يمكنك إرسال الأنواع التالية من البيانات.

• ArrayBuffer
• ArrayBufferView
• سائل لزج
• DOMString
• بيانات النموذج
• 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" أيضًا غير متزامن تمامًا ولا يتسبب في أي تأخير عند الانتقال إلى صفحة أخرى في تطبيق الويب الخاص بك مع الاستمرار في إرسال بيانات التحليلات لسجل صفحة المستخدم.

تدريجيًا تحسين تطبيق الويب الخاص بك

إذا كان لديك نقطة نهاية مخصصة لبيانات التحليلات ، فعليك بالتأكيد تجربة واجهة برمجة التطبيقات الجديدة هذه. يرجى أن تضع في اعتبارك أن المستخدم قد يتصل بك بتطبيق الويب من خلال متصفح لا يدعم واجهة برمجة التطبيقات (على الرغم من أن هذا أمر مستبعد جدًا) ، حتى تتمكن من تحسين تطبيقك تدريجيًا بفحص بسيط للحصول على الدعم قبل استخدامه.