آلية عمل الإشعارات الفورية

Matt Gaunt

قبل الدخول إلى واجهة برمجة التطبيقات، لنلقِ نظرة على الإشعارات الفورية من مستوى عالٍ، من البداية إلى النهاية. بعد ذلك، عندما نتناول المواضيع أو واجهات برمجة التطبيقات الفردية لاحقًا، ستكون لديك فكرة عن كيفية استخدامها وأهميتها.

الخطوات الثلاث الرئيسية لتنفيذ الإشعارات الفورية هي:

1. إضافة منطق جهة العميل للاشتراك في الإشعارات الفورية (أي JavaScript وواجهة المستخدم في تطبيق الويب الذي يسجّل المستخدم لتلقّي الإشعارات الفورية)
2. طلب بيانات من واجهة برمجة التطبيقات من الخلفية أو التطبيق الذي يؤدي إلى إرسال رسالة فورية إلى جهاز المستخدم.
3. ملف JavaScript الخاص بـ Service Worker الذي سيتلقّى "حدث إشعار" عند وصول الإشعار إلى الجهاز. في ملف JavaScript هذا، ستتمكّن من عرض إشعار.

لنتعرّف على ما تتطلّبه كل خطوة من هذه الخطوات بمزيد من التفصيل.

الخطوة 1: جانب العميل

الخطوة الأولى هي "اشتراك" مستخدم في خدمة الإشعارات الفورية.

يتطلب اشتراك المستخدم شيئين. أولاً، الحصول على إذن من المستخدم لإرسال رسائل فورية إليه ثانيًا، الحصول على PushSubscription من المتصفّح

يحتوي PushSubscription على جميع المعلومات التي نحتاجها لإرسال رسالة فورية إلى ذلك المستخدم. يمكنك اعتبار هذا الرقم التعريفي بمثابة معرّف لجهاز ذلك المستخدم.

يتم تنفيذ كل ذلك في JavaScript باستخدام Push API.

Browser Support

• 42
• 17
• 44
• 16

Source

قبل اشتراك المستخدم، عليك إنشاء مجموعة من "مفاتيح خادم التطبيق"، والتي سنتناولها لاحقًا.

تكون مفاتيح خادم التطبيق، والمعروفة أيضًا باسم مفاتيح VAPID، فريدة لخادمك. وهي تتيح لخدمة الإشعارات الفورية معرفة خادم التطبيق الذي اشترك فيه المستخدم والتأكّد من أنّه الخادم نفسه الذي يرسل الإشعارات الفورية إلى ذلك المستخدم.

بعد اشتراك المستخدم وحصولك على PushSubscription، عليك إرسال تفاصيل PushSubscription إلى الخلفية أو الخادم. على الخادم، ستحفظ هذا الاشتراك في قاعدة بيانات وتستخدمه لإرسال رسالة فورية إلى ذلك المستخدم.

الخطوة 2: إرسال رسالة فورية

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

إليك بعض الأسئلة التي قد تطرحها على نفسك:

• ما هي خدمة الإشعارات الفورية ومَن يقدّمها؟
• كيف تبدو واجهة برمجة التطبيقات؟ هل هو JSON أو XML أو شيء آخر؟
• ما هي الإجراءات التي يمكن لواجهة برمجة التطبيقات تنفيذها؟

ما هي خدمة الإشعارات الفورية ومَن يستخدمها؟

تتلقّى خدمة الإشعارات الفورية طلب شبكة وتتحقّق من صحته وتُرسل رسالة فورية إلى المتصفّح المناسب. إذا كان المتصفّح غير متصل بالإنترنت، تتم إضافة الرسالة إلى قائمة الانتظار إلى أن يتصل المتصفّح بالإنترنت.

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

للحصول على عنوان URL المناسب لتشغيل رسالة فورية (أي عنوان URL لخدمة الإشعارات الفورية)، ما عليك سوى الاطّلاع على قيمة endpoint في PushSubscription.

في ما يلي مثال على القيم التي ستحصل عليها من PushSubscription:

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

نقطة النهاية في هذه الحالة هي https://random-push-service.com/some-kind-of-unique-id-1234/v2/. ستكون خدمة الإشعارات الفورية "random-push-service.com" وكل نقطة نهاية فريدة لمستخدم، ويتم الإشارة إليها باستخدام "some-kind-of-unique-id-1234". عندما تبدأ العمل باستخدام الإشعارات الفورية، ستلاحظ هذا النمط.

سيتم تناول المفاتيح في الاشتراك لاحقًا.

كيف تبدو واجهة برمجة التطبيقات؟

ذكرتُ أنّ كل خدمة إشعارات فورية على الويب تتوقّع طلب البيانات نفسه من واجهة برمجة التطبيقات. واجهة برمجة التطبيقات هذه هي بروتوكول Web Push. وهو معيار IETF يحدّد كيفية إجراء طلب بيانات من واجهة برمجة التطبيقات إلى خدمة إشعارات فورية.

يتطلّب طلب البيانات من واجهة برمجة التطبيقات ضبط عناوين معيّنة وأن تكون البيانات عبارة عن سلسلة من وحدات البايت. سنلقي نظرة على المكتبات التي يمكنها إجراء طلب البيانات من واجهة برمجة التطبيقات هذا نيابةً عنا، بالإضافة إلى كيفية إجراء ذلك بأنفسنا.

ما هي الإجراءات التي يمكن لواجهة برمجة التطبيقات تنفيذها؟

توفّر واجهة برمجة التطبيقات طريقة لإرسال رسالة إلى مستخدم، مع بيانات أو بدونها، وتوفّر تعليمات حول كيفية إرسال الرسالة.

يجب تشفير البيانات التي ترسلها مع رسالة فورية. والسبب في ذلك هو أنّها تمنع خدمات الإشعارات الفورية، التي يمكن أن تكون أي شخص، من الاطّلاع على البيانات المُرسَلة مع رسالة الإشعار الفوري. هذا مهم لأنّ المتصفّح هو الذي يقرر خدمة الإشعارات الفورية التي سيتم استخدامها، ما قد يفتح الباب أمام المتصفّحات لاستخدام خدمة إشعارات فورية غير آمنة.

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

تتضمّن التعليمات تفاصيل مثل:

• تمثّل هذه السمة مدة صلاحية رسالة فورية. يحدّد هذا الإعداد المدة التي يجب أن تبقى فيها الرسالة في قائمة الانتظار قبل إزالتها وعدم تسليمها.

• حدِّد مدى أهمية الرسالة. ويُعدّ ذلك مفيدًا في حال كانت خدمة الإشعارات الفورية تحافظ على عمر بطارية المستخدمين من خلال إرسال الرسائل ذات الأولوية العالية فقط.

• يمكنك منح رسالة الإشعار الفوري اسم "موضوع"، ما سيؤدي إلى استبدال أي رسالة في انتظار المراجعة بهذه الرسالة الجديدة.

الخطوة 3: إرسال الحدث على جهاز المستخدم

بعد إرسال رسالة فورية، ستحتفظ خدمة الإشعارات الفورية برسالتك على خادمها إلى أن يقع أحد الأحداث التالية:

1. يتصل الجهاز بالإنترنت وتسلّم خدمة الإشعارات الفورية الرسالة.
2. انتهاء صلاحية الرسالة في هذه الحالة، تزيل خدمة الإشعارات الفورية الرسالة من قائمة الانتظار ولن يتم تسليمها مطلقًا.

عندما تسلّم خدمة الإشعارات الفورية رسالة، سيتلقّى المتصفّح الرسالة ويفك تشفير أي بيانات ويرسل حدث push في مشغّل الخدمات.

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

يمكنك تنفيذ أي مهام في الخلفية داخل حدث "الدفع" الخاص بـ Service Worker. يمكنك إجراء طلبات الإحصاءات وتخزين الصفحات مؤقتًا بلا إنترنت وعرض الإشعارات.

هذا هو المسار الكامل لرسائل الإشعارات الفورية.

الخطوات التالية

• نظرة عامة على الإشعارات الفورية على الويب
• طريقة عمل الإشعارات الفورية
• الاشتراك في قناة مستخدم
• تجربة المستخدم في ما يتعلّق بالأذونات
• إرسال الرسائل باستخدام مكتبات Web Push
• بروتوكول Web Push
• التعامل مع أحداث الإشعارات الفورية
• عرض إشعار
• سلوك الإشعارات
• أنماط الإشعارات الشائعة
• الأسئلة الشائعة حول الإشعارات الفورية
• المشاكل الشائعة والإبلاغ عن الأخطاء

Code labs

• إنشاء برنامج عميل للإشعارات الفورية
• إنشاء خادم للإشعارات الفورية