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

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() وتنفيذ عمل إضافي.

تحذير: يجب استخدام event.waitUntil() لإبقاء مشغّل الخدمات قيد التشغيل عندما يكون الرمز البرمجي مشغولاً.

الإجراءات

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

الأزرار

في القسم السابق، تعرّفت على كيفية تحديد أزرار الإجراءات عند استدعاء 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);

تحذير: إذا ضبطت renotify على true في إشعار بدون tag، سيظهر لك الخطأ التالي: TypeError: Failed to execute 'showNotification' on 'ServiceWorkerRegistration': Notifications which set the renotify flag must specify a non-empty tag

صامت

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

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

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

ملاحظة: إذا حدّدت كلاً من silent وrenotify، ستكون الأولوية لـ silent.

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

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

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

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

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

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

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

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

Code labs

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