سلوك الإشعارات

Alexey Rodionov

Matt Gaunt

حتى الآن، نظرنا في الخيارات التي تغير المظهر المرئي للإشعار. هناك أيضًا خيارات تغيّر سلوك الإشعارات.

بشكل تلقائي، سيتم تطبيق السلوكيات التالية عند استدعاء showNotification() باستخدام خيارات مرئية فقط:

• يؤدي النقر على الإشعار إلى عدم حدوث أي شيء.
• يتم عرض كل إشعار جديد واحدًا تلو الآخر. لن يقوم المتصفح بتصغير الإشعارات بأي شكل من الأشكال.
• يمكن أن تُصدر المنصة صوتًا أو يهتز جهاز المستخدم (حسب النظام الأساسي).
• على بعض الأنظمة الأساسية، سيختفي الإشعار بعد فترة قصيرة بينما يعرض البعض الآخر الإشعار ما لم يتفاعل معه المستخدم. (على سبيل المثال، قارن بين إشعاراتك على Android وسطح المكتب).

في هذا القسم، سنلقي نظرة على كيفية تغيير هذه السلوكيات الافتراضية باستخدام الخيارات فقط. وهي سهلة نسبيًا والاستفادة منها.

حدث النقر على الإشعار

عندما ينقر المستخدم على إشعار، يكون السلوك التلقائي هو عدم حدوث أي شيء. إنه لا يغلق أو يزيل الإشعار.

الممارسة الشائعة للنقر على الإشعار هي إغلاقها وتنفيذ إجراءات منطقية أخرى (أي فتح نافذة أو إجراء طلب بيانات من واجهة برمجة التطبيقات إلى التطبيق).

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

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

كما ترى في هذا المثال، يمكن الوصول إلى الإشعار الذي تم النقر عليه باستخدام event.notification. من خلال ذلك، يمكنك الوصول إلى خصائص الإشعار وطرقه. في هذه الحالة، يمكنك استدعاء طريقة close() الخاصة بها وتنفيذ جهد إضافي.

المهام

تتيح لك الإجراءات إنشاء مستوى آخر من التفاعل مع المستخدمين بمجرد النقر على الإشعار.

الأزرار

في القسم السابق، اطّلعت على كيفية تحديد أزرار الإجراءات عند استدعاء showNotification():

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

إذا نقر المستخدم على زر إجراء، تحقَّق من قيمة event.action في الحدث noticationclick لمعرفة زر الإجراء الذي تم النقر عليه.

سيحتوي event.action على القيمة action التي تم ضبطها في الخيارات. في المثال أعلاه، تكون القيم event.action واحدة مما يلي: 'coffee-action' أو 'doughnut-action' أو 'gramophone-action' أو 'atom-action'.

من خلال هذا الإجراء، سنكتشف النقرات على الإشعارات أو النقرات على الإجراءات على النحو التالي:

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

الردود المضمّنة

في القسم السابق أيضًا، اطّلعت على كيفية إضافة ردّ مضمّن على الإشعار:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

سيحتوي event.reply على القيمة التي كتبها المستخدم في حقل الإدخال:

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

العلامة

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

لنعرض إشعارًا ونضع له علامة 'message-group-1'. سنعرض الإشعار بهذه التعليمة البرمجية:

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

والذي سيعرض إشعارنا الأول.

لنعرض إشعارًا ثانيًا يحتوي على علامة جديدة 'message-group-2'، مثل:

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

سيؤدي ذلك إلى عرض إشعار ثانٍ للمستخدم.

لنعرض الآن إشعارًا ثالثًا مع إعادة استخدام العلامة الأولى في 'message-group-1'. سيؤدي هذا الإجراء إلى إغلاق الإشعار الأول واستبداله بإشعارنا الجديد.

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

لدينا الآن إشعاران على الرغم من استدعاء "showNotification()" ثلاث مرات.

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

من التفاصيل الدقيقة حول استخدام tag أنه عندما يستبدل إشعارًا، يتم استخدامه بدون صوت أو اهتزاز.

هنا يأتي دور خيار renotify.

إعادة إرسال الإشعار

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

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

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

صامت

يتيح لك هذا الخيار عرض إشعار جديد ولكنه يمنع السلوك التلقائي للاهتزاز والصوت وتشغيل شاشة الجهاز.

وهذا مثالي إذا كانت إشعاراتك لا تتطلب اهتمامًا فوريًا من المستخدم.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

يتطلب التفاعل

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

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

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

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

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

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

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

الدروس التطبيقية حول الترميز

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