استخدام الإشعارات الفورية للتفاعل مع المستخدمين وإعادة جذبهم

Kate Jeffreys

لماذا يجب استخدام الإشعارات الفورية؟

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

يختلف شكل الإشعارات ومظهرها بين المنصات. على سبيل المثال:

إشعار على جهاز Android

إشعار على جهاز MacBook

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

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

إنشاء الإشعارات وإرسالها

أنشئ إشعارات باستخدام Notifications API. يحتوي عنصر Notification على سلسلة title وعنصر options. على سبيل المثال:

let title = 'Hi!';
let options = {
  body: 'Very Important Message',
  /* other options can go here */
};
let notification = new Notification(title, options);

يظهر title بخط غامق عندما يكون الإشعار نشطًا، بينما يحتوي body على نص إضافي.

الحصول على إذن بإرسال الإشعارات

لعرض إشعار، يجب أن يحصل تطبيقك على إذن من المستخدم للقيام بذلك:

Notification.requestPermission();

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

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

تكمن القوة الحقيقية للإشعارات في الجمع بين مشغّلي الخدمات وتكنولوجيا الإشعارات الفورية:

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

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

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

يستخدم كلّ من العميل وService Worker لغة JavaScript العادية بدون أي مكتبات إضافية. تم إنشاء الخادم باستخدام حزمة npm ‏express على Node.js، ويستخدم حزمة npm ‏web-push لإرسال الإشعارات. لإرسال المعلومات إلى الخادم، يطلب العميل عنوان URL خاصًا بمشاركة نشره الخادم.

الجزء 1: تسجيل مشغّل خدمة والاشتراك في Push

1. يسجّل تطبيق العميل مشغّل خدمات باستخدام ServiceWorkerContainer.register(). سيستمر مشغّل الخدمات المسجّل في العمل في الخلفية عندما يكون العميل غير نشط.

   رمز العميل:

   navigator.serviceWorker.register('sw.js');
   

2. يطلب العميل إذنًا من المستخدم لإرسال الإشعارات.

   رمز العميل:

   Notification.requestPermission();
   

3. لتفعيل الإشعارات الفورية، يستخدم عامل الخدمة PushManager.subscribe() لإنشاء اشتراك في الإشعارات الفورية. في طلب البيانات إلى PushManager.subscribe()، يقدّم عامل الخدمة مفتاح واجهة برمجة التطبيقات كمعرّف.

   رمز العميل:

   navigator.serviceWorker.register('sw.js').then(sw => {
     sw.pushManager.subscribe({ /* API key */ });
   });
   

   تعمل خدمات الإشعارات الفورية، مثل "المراسلة عبر السحابة الإلكترونية من Firebase"، وفقًا لنموذج اشتراك. عندما يشترك عامل الخدمة في خدمة الإشعارات الفورية من خلال استدعاء PushManager.subscribe()، تنشئ خدمة الإشعارات الفورية عنوان URL فريدًا لعامل الخدمة هذا. يُعرف عنوان URL باسم نقطة نهاية الاشتراك.

4. يرسل العميل نقطة نهاية الاشتراك إلى خادم التطبيق.

   رمز العميل:

   navigator.serviceWorker.register('sw.js').then(sw => {
     sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
       sendToServer(subscription, '/new-subscription', 'POST');
     });
   });
   

   رمز الخادم:

   app.post('/new-subscription', (request, response) => {
     // extract subscription from request
     // send 'OK' response
   });
   

الجزء 2: إرسال إشعار

1. يرسل خادم الويب إشعارًا إلى نقطة نهاية الاشتراك.

   رمز الخادم:

   const webpush = require('web-push');
   
   let options = { /* config info for cloud messaging and API key */ };
   let subscription = { /* subscription created in Part 1*/ };
   let payload = { /* notification */ };
   
   webpush.sendNotification(subscription, payload, options);
   

2. تؤدي الإشعارات المُرسَلة إلى نقطة نهاية الاشتراك إلى تشغيل أحداث الإشعارات الفورية مع تحديد عامل الخدمة كهدف. يتلقّى عامل الخدمة الرسالة ويعرضها للمستخدم كإشعار.

   رمز مشغّل الخدمات:

   self.addEventListener('push', (event) => {
     let title = { /* get notification title from event data */ }
     let options = { /* get notification options from event data */ }
     showNotification(title, options);
   })
   

3. يتفاعل المستخدم مع الإشعار، ما يؤدي إلى تنشيط تطبيق الويب إذا لم يكن نشطًا من قبل.

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

الخطوة التالية هي تنفيذ الإشعارات الفورية.

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