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

Kate Jeffreys

لماذا يُنصح باستخدام الإشعارات الفورية؟

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

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

بشكل تقليدي، كان على متصفحات الويب بدء تبادل المعلومات بين الخادم والعميل من خلال تقديم طلب. من ناحية أخرى، تتيح لك تكنولوجيا الدفع على الويب ضبط الخادم لإرسال الإشعارات عندما يكون ذلك مناسبًا لتطبيقك. وتنشئ الخدمة الفورية عناوين 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 لعامل الخدمات إلى رفع الأحداث على عامل الخدمة هذا، ويطلب منه عرض إشعار.

في المثال التالي، يسجِّل العميل مشغّل الخدمات ويشترك في الإشعارات الفورية. ثم يرسل الخادم إشعارًا إلى نقطة نهاية الاشتراك.

يستخدم العميل ومشغّل الخدمات لغة JavaScript بتنسيق vanilla بدون مكتبات إضافية. تم إنشاء الخادم مع حزمة express npm على Node.js، ويستخدم حزمة web-push npm لإرسال الإشعارات. لإرسال معلومات إلى الخادم، يُجري العميل اتصالاً بعنوان URL POST الذي يعرضه الخادم.

الجزء 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. يتفاعل المستخدم مع الإشعار، ما يجعل تطبيق الويب نشطًا إذا لم يكن كذلك.

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

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

لقد أنشأنا سلسلة من الدروس التطبيقية حول الترميز لإرشادك خلال كل خطوة من العملية.