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

Kate Jeffreys
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 الخاص بمشغِّل الخدمات إلى إظهار الأحداث في مشغّل الخدمات هذا، ما يطلب منه عرض إشعار.

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

يستخدم العميل ومشغّل الخدمات vanilla JavaScript بدون مكتبات إضافية. يتضمّن الخادم حزمة npm express على Node.js ويستخدم حزمة npm web-push لإرسال الإشعارات. لإرسال معلومات إلى الخادم، يجري العميل اتصالًا بعنوان 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. يتفاعل المستخدم مع الإشعار، ما يجعل تطبيق الويب نشطًا إذا لم يكن مفعلاً في السابق.

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

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

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