واجهة برمجة تطبيقات Beacon هي واجهة تستند إلى JavaScript لـ:
إرسال كمية صغيرة من البيانات إلى الخادم من المتصفح ، دون انتظار الرد. في هذه المقالة ، سننظر في الحالات التي ستكون فيها واجهة برمجة تطبيقات Beacon مفيدة ، وكيف تختلف عن استخدام XMLHTTPRequest (Ajax) لنفس الأغراض وكيفية استخدامها.
لماذا نحتاج إلى واجهة برمجة تطبيقات أخرى؟
يتم استخدام Beacon API لإرسال بيانات صغيرة إلى الخادم دون انتظار الرد . الجزء الأخير من البيان هو الأكثر إثارة للاهتمام. تم تصميم Beacon API خصيصًا لإرسال البيانات ونسيانها. لا حاجة لتوقع إجابة ، لأنها لن تكون أبدًا.
استعارة بالبطاقات البريدية ، هي بطاقات يرسلها / يرسلها الناس إلى بعضهم البعض. وكقاعدة ، كتبوا نصًا صغيرًا عليهم ("أين أنت؟ وأنا هادئ في البحر." ، "هنا لدي طقس رائع ، ليس كما هو الحال في مكتبك") ، ألقوا بهم في البريد ونسون. لم يتوقع أحد إجابة مثل "لقد تركت لك بالفعل" ، "إنها رائعة في مكتبي."
هناك العديد من الحالات التي يكون فيها نهج "الإرسال والنسيان" مناسبًا.
تتبع الإحصائيات والمعلومات التحليلية
هذا هو أول ما يتبادر إلى الذهن. يمكن للحلول الكبيرة مثل Google Analytics أن تقدم نظرة عامة جيدة على الأشياء الأساسية. ولكن إذا أردنا شيئًا أكثر تخصيصًا؟ نحتاج إلى كتابة بعض التعليمات البرمجية لتتبع ما يحدث على الصفحة (كيفية تفاعل المستخدمين مع المكونات ، ومدى التمرير ، والصفحات التي تم عرضها قبل البيع الأول) ، ثم إرسال هذه البيانات إلى الخادم عندما يغادر المستخدم الصفحة. منارة مثالية لمثل هذه المهمة ، لأننا ببساطة نرسل البيانات ولا نحتاج إلى استجابة من الخادم.
التصحيح والتسجيل
يوجد تطبيق آخر يقوم بتسجيل المعلومات من كود JavaScript. تخيل موقفًا عندما يكون لديك تطبيق كبير مع واجهة مستخدم غنية / UX. جميع الاختبارات خضراء ، ويظهر الخطأ بشكل دوري على المحترف الذي تعرفه ، ولكن لا يمكنك القيام بذلك بسبب نقص المعلومات. في هذه الحالة ، يمكنك استخدام المنارة للتشخيص.
في الواقع ، يمكن حل أي مهمة مع تسجيل الدخول باستخدام منارة. يمكن أن يكون هذا إنشاء نقاط حفظ في الألعاب ، وجمع معلومات حول استخدام وظائف جديدة ، وتسجيل نتائج الاختبار ، وما إلى ذلك. إذا كان هذا شيئًا يحدث في المتصفح وتريد أن يعرف الخادم عنه ، فإن Beacon هو ما تحتاجه.
ألم نفعل هذا من قبل؟
انا اعرف بماذا تفكر لا شيء من هذا جديد؟ لقد تم التواصل مع الشمال من خلال XMLHTTPRequest لأكثر من 10 سنوات. بدأنا مؤخرًا في استخدام واجهة برمجة التطبيقات Fetch ، والتي تفعل الشيء نفسه في الواقع ، فقط مع واجهة Promise الجديدة. فلماذا نحتاج إلى منارة API أخرى؟
الميزة الرئيسية هي أننا لسنا بحاجة إلى استجابة من الخادم. يمكن للمتصفح انتظار الطلب وإرسال البيانات دون منع تنفيذ أي رمز. نظرًا لأن المتصفح يستخدم هذا ، فلا يهمنا ما إذا كان الرمز لا يزال قيد التشغيل أم لا ، فسيقوم المتصفح ببساطة بإرسال الطلبات إلى الخلفية بصمت.
لا تحتاج واجهة برمجة تطبيقات C Beacon إلى انتظار أفضل لحظة لشبكة وحدة المعالجة المركزية. مجرد إضافة طلب إلى قائمة الانتظار باستخدام منارة عمليا لا قيمة له.
لفهم سبب أهمية ذلك ، ما عليك سوى إلقاء نظرة على كيفية ومكان استخدام هذا المنطق عادةً. على سبيل المثال ، من أجل قياس المدة التي قضاها المستخدم في الصفحة ، نحتاج إلى إرسال طلب إلى الخادم في أقرب وقت ممكن من نهاية الجلسة.
عادة ما يتم ذلك beforeunload أو beforeunload unload . يمكن أن يمنع هذا الرمز التنفيذ ، وإذا تأخرت الصفحة ، فسيتم أيضًا تأخير تحميل الصفحة التالية. هذا لا يؤدي إلى أفضل تجربة مستخدم.
هل تفهم مدى بطء طلبات HTTP؟ وآخر شيء تريده هو دفع طلب HTTP بين الانتقالات.
تجربة واجهة برمجة تطبيقات Beacon
مثال الاستخدام الأساسي بسيط للغاية:
let result = navigator.sendBeacon(url, data);
result قيمة منطقية. إذا أضاف المستعرض الطلب إلى قائمة الانتظار - true ، إن لم يكن false .
باستخدام navigator.sendBeacon ()
يقبل navigator.sendBeacon معلمتين. الأول هو عنوان URL الذي سيتم إرسال الطلب إليه ، والثاني هو البيانات التي يجب إرسالها. يحتوي الطلب على نموذج HTTP POST .
data - يمكن لهذه المعلمة قبول العديد من تنسيقات البيانات ، والتي تعمل جميعها مع Fetch API. يمكن أن يكون Blob أو BufferSource أو FormData أو URLSearchParams ، إلخ.
أحب استخدام FormData لبيانات بسيطة ذات قيمة مفتاح ، فهي ليست فئة معقدة وسهلة الاستخدام.
// URL let url = '/api/my-endpoint'; // FormData let data = new FormData(); data.append('hello', 'world'); let result = navigator.sendBeacon(url, data); if (result) { console.log(' !'); } else { console.log('.'); }
دعم المتصفح
دعم واجهة برمجة التطبيقات هذه قوي جدًا. المتصفح الوحيد الذي لا يدعم هو Internet Explorer (لم أتوقع ذلك) و Opera Mini. ولكن في Edge يعمل كل شيء. في معظم الحالات ، يوجد دعم ، ولكن من الأفضل التحقق فقط في حالة:
if (navigator.sendBeacon) { // Beacon } else { // XHR? }
مثال: الوقت المستغرق في التسجيل على الصفحة
من أجل رؤية هذا الأمر برمته عمليًا ، دعنا ننشئ نظامًا بسيطًا لحساب الوقت الذي يكون فيه المستخدم على الصفحة. عندما يتم تحميل الصفحة ، ننظر إلى الوقت وعندما تغادر ، نرسل طلبًا من بداية العرض والطلب الحالي إلى الخادم.
نظرًا لأننا مهتمون فقط بالوقت المستغرق في الصفحة ، وليس في الوقت الحاضر ، يمكننا استخدام performance.now() للحصول على الطابع الزمني الأساسي عند تحميل الصفحة:
let startTime = performance.now();
دعنا نلف قطعة صغيرة من المنطق في وظيفة سهلة الاستخدام:
let logVisit = function() { // Test that we have support if (!navigator.sendBeacon) return true; // URL to send the data to, eg let url = '/api/log-visit'; // Data to send let data = new FormData(); data.append('start', startTime); data.append('end', performance.now()); data.append('url', document.URL); // Let's go! navigator.sendBeacon(url, data); };
أخيرًا ، نحتاج إلى استدعاء هذه الوظيفة عندما يترك المستخدم الصفحة. كان الفكر الأول هو استخدام unload ، ولكن يبدو أن Safari على Mac يحظر الطلب لأسباب أمنية. لذلك ، من الأفضل استخدام beforeunload :
window.addEventListener('beforeunload', logVisit);
عندما يتم إلغاء تحميل الصفحة (أو قبلها) ، سيتم استدعاء وظيفة logVisit() الخاصة بنا ، وإذا كان المتصفح يدعم Beacon API ، فسوف يرسل طلبًا إلى الخادم.
بضع نقاط
نظرًا لأن معظم المشكلات التي سيتم استخدام واجهة برمجة تطبيقات Beacon لها تدور حول تتبع النشاط ، سيكون من المهم ملاحظة الجزء الاجتماعي والقانوني من هذا المطبخ بالكامل.
اللائحة العامة لحماية البيانات
فقط تذكر ذلك.
DNT: لا تتبع
بالإضافة إلى ذلك ، تحتوي المستعرضات على خيار يسمح للمستخدمين بالإشارة إلى أنهم لا يريدون تتبع أنشطتهم. يرسل " Do Not Track رأس HTTP يبدو كما يلي:
DNT: 1
إذا كنت تقوم بتتبع البيانات التي يمكن أن تشير إلى المستخدم ورأس الطلب لديه DNT: 1 ، فمن الأفضل الاستماع إلى المستخدم وعدم حفظ أي بيانات. على سبيل المثال ، باستخدام PHP ، يمكن التحقق من ذلك على النحو التالي:
if (!empty($_SERVER['HTTP_DNT'])) {
في الختام
إن واجهة برمجة تطبيقات Beacon هي في الواقع طريقة مناسبة للغاية لإرسال البيانات إلى الخادم ، خاصة في سياق التسجيل. دعم المستعرض على مستوى جيد بما فيه الكفاية ويسمح لك بتسجيل أي معلومات بسهولة دون أي عواقب سلبية على أداء واستجابة واجهة المستخدم الخاصة بك. تلعب الطبيعة غير المحظورة لهذه الطلبات دورًا جيدًا جدًا في ذلك ؛ فهي أسرع بكثير من البدائل XHR و Fetch.
