تحسين تسليم بيانات sendBeacon في حدث beforeunload

عندما يتم استدعاء navigator.sendBeacon مباشرة في الكونسول، يتم إرسال الطلب على الفور ويمكن رؤيته في لوحة أدوات Chrome DevTools Network بنجاح. ومع ذلك، عند استخدام الكود المذكور أدناه لربط sendBeacon بحدث beforeunload ثم التنقل بعيدًا عن الصفحة، يتم إضافة صف إلى شريط الشبكة في لوحة أدوات Chrome DevTools، لكن حالته تظل “(pending)” ولا يتم إرساله أبدًا.

هذا السلوك يحدث لأن متصفحات الويب تتبع قواعد صارمة بشأن ما يمكن القيام به في حدث beforeunload لضمان تجربة مستخدم مريحة وآمنة. عمومًا، السماح بإرسال طلبات شبكة في حدث beforeunload يعتبر خطرًا على الأمان، لذلك يتم تأجيل إرسال الطلب حتى يتم الانتهاء من الحدث beforeunload أو يتم إلغاؤه بشكل صريح.

للتغلب على هذه المشكلة، يمكنك استخدام مهمة زمنية مؤجلة لإرسال الطلب بعد فترة قصيرة من خلال استخدام setTimeout. يمكنك تجربة الكود التالي:

javascriptCopy code
window.addEventListener('beforeunload', function() {
  setTimeout(function() {
    navigator.sendBeacon(
      'https://www.example.com/sendBeacon-data-collector',
      'Sent by a beacon!');
  }, 100);
}, false);

باستخدام setTimeout، سيتم تأجيل إرسال الطلب لبضعة ميلي ثوانٍ بعد اكتمال حدث beforeunload، مما يعطي المتصفح فرصة لإرسال البيانات بنجاح قبل إغلاق الصفحة.

من الجدير بالذكر أن هذا النهج قد لا يضمن تسليم البيانات بنجاح في كل الحالات، حيث قد يتم قطع الاتصال قبل استكمال الطلب. لذا، يفضل استخدام طرق بديلة مثل استخدام Ajax ضمن حدث unload أو استخدام حدث visibilitychange للتعامل مع مثل هذه الحالات بطريقة أكثر استقرارًا.

في ظل استخدام الحدث beforeunload، قد يواجه المطورون تحديات إضافية في ضمان تسليم البيانات بنجاح قبل إغلاق الصفحة. ومع ذلك، يمكن للمقترحات التالية أن تكون مفيدة في حل هذه المشكلة بشكل أكثر فعالية:

1. استخدام حدث unload بدلاً من beforeunload: بدلاً من استخدام beforeunload، يمكنك استخدام حدث unload الذي يتم تشغيله بمجرد تحميل الصفحة. يتيح حدث unload وقتًا إضافيًا لإرسال الطلبات قبل إغلاق الصفحة.

javascriptCopy code
window.addEventListener('unload', function() {
  navigator.sendBeacon(
    'https://www.example.com/sendBeacon-data-collector',
    'Sent by a beacon!');
}, false);

2. استخدام Ajax في حدث unload: يمكن استخدام تقنية Ajax لإرسال البيانات في حدث unload بدلاً من sendBeacon. هذا يسمح بمزيد من السيطرة على عملية الإرسال وتقديم إشعارات للمستخدم في حالة فشل العملية.

3. استخدام حدث visibilitychange: يمكن استخدام حدث visibilitychange لرصد متى يتم إخفاء الصفحة، ومن ثم إرسال البيانات في هذه الحالة.

javascriptCopy code
document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon(
      'https://www.example.com/sendBeacon-data-collector',
      'Sent by a beacon!');
  }
});

4. تقديم رسائل تأكيد: يمكن توفير رسائل تأكيد للمستخدم للتأكد من أن البيانات قد تمت إرسالها بنجاح قبل إغلاق الصفحة.

5. استخدام خدمات خارجية: بدلاً من إرسال البيانات مباشرة إلى الخادم الخاص بك، يمكنك استخدام خدمات خارجية مثل Google Analytics أو Firebase لتتبع الأحداث والبيانات والحصول على تحليلات دقيقة دون الحاجة إلى القلق بشأن تسليم البيانات.

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