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

Alexey Rodionov

Matt Gaunt

لقد نظرنا إلى الآن في الخيارات التي تغيّر المظهر المرئي للإشعار. تتوفر وكذلك الخيارات التي تغير طريقة عمل الإشعارات.

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

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

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

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

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

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

لتحقيق ذلك، عليك إضافة أداة معالجة حدث '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
• بروتوكول Web Push
• التعامل مع الأحداث الفورية
• عرض إشعار
• طريقة عمل الإشعار
• أنماط الإشعارات الشائعة
• الأسئلة الشائعة حول الإشعارات الفورية
• المشاكل الشائعة والإبلاغ عن الأخطاء

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

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