توقف عن استخدام حيلة localStorage لمزامنة علامات تبويب المتصفح. BroadcastChannel يقوم بذلك بشكل أصلي.

مشكلة localStorage كقناة اتصال

وقع العديد من المطورين في عادة استخدام localStorage كنظام مراسلة مؤقت بين علامات تبويب المتصفح. النمط بسيط: تكتب علامة تبويب واحدة قيمة، وتستمع العلامات الأخرى لحدث storage للتفاعل معه. بينما يعمل هذا في الحالات الطارئة، إلا أنه في الأساس حل بديل. يُطلق حدث storage في علامات التبويب الأخرى فقط، وليس أبداً في علامة التبويب التي أجرت التغيير، مما يؤدي إلى حالات حرجة محرجة. بالإضافة إلى ذلك، localStorage متزامن وحاجب، مما قد يسبب مشاكل في الأداء إذا استخدم بشكل متكرر. كما يفتقر إلى أي مفهوم لتأكيد الرسائل أو معالجة الأخطاء، مما يجعله غير موثوق لأي شيء يتجاوز التنسيق الأساسي.

تقديم BroadcastChannel API

يوفر BroadcastChannel API حلاً أصلياً ومصمماً خصيصاً للتواصل بين علامات التبويب. يتيح لسياقات التصفح المختلفة—علامات التبويب والنوافذ وiframes وحتى service workers—الاشتراك في قناة مسماة وتبادل الرسائل في الوقت الفعلي. على عكس حيلة localStorage، يتم تسليم الرسائل إلى جميع المشتركين، بما في ذلك المرسل، مما يجعل منطق التطبيق أكثر قابلية للتنبؤ. الـ API غير متزامن وغير حاجب، ويتناسب بشكل طبيعي مع تطبيقات JavaScript الحديثة المدفوعة بالأحداث.

حالات الاستخدام العملية

تأمل في سيناريو شائع: يقوم مستخدم بتسجيل الخروج في علامة تبويب واحدة. مع BroadcastChannel، يمكن لعلامة التبويب تلك إخطار جميع العلامات الأخرى فوراً، مما يدفعها إلى إعادة التوجيه إلى صفحة تسجيل الدخول دون الحاجة إلى تحديث يدوي. وبالمثل، عندما يقوم المستخدم بتحديث سلة التسوق الخاصة به، يمكن لكل علامة تبويب مفتوحة استلام الحالة المحدثة فوراً، مما يضمن تجربة متسقة. تشمل التطبيقات العملية الأخرى:

• مزامنة مسودات النماذج عبر علامات التبويب حتى لا يفقد المستخدمون عملهم.
• تنسيق الوضع الداكن أو تفضيلات اللغة في الوقت الفعلي.
• إخطار علامات التبويب الأخرى عند اكتمال المزامنة الخلفية أو التنزيل.
• إدارة الأقفال المشتركة أو رموز الجلسة عبر نوافذ متعددة.

البدء مع BroadcastChannel

استخدام BroadcastChannel بسيط ومباشر. أولاً، أنشئ مثيلاً للقناة باسم وصفي. ثم، أرفق مستمعاً للحدث للتعامل مع الرسائل الواردة. لإرسال رسالة، ما عليك سوى استدعاء postMessage على كائن القناة. عندما لم تعد علامة التبويب بحاجة إلى الاستماع، فإن استدعاء close ينظف الاتصال ويمنع تسرب الذاكرة. نظراً لأن الـ API يعتمد على promises ويتكامل بسلاسة مع الأطر الحديثة، فمن السهل تغليفه في وحدة أدوات صغيرة يمكن إعادة استخدامها عبر التطبيق.

لمزيد من القراءة: https://bestpractic.org/blog/broadcast-channel-cross-tab-messaging