استخدام واجهة برمجة التطبيقات Notification API

تتيح لك chrome.notifications API إنشاء إشعارات باستخدام النماذج وعرض هذه الإشعارات للمستخدمين في لوحة النظام لدى المستخدم:

الإشعارات في لوحة مستخدم النظام

الشكل الذي تظهر به

تتوفر الإشعارات الغنية بصريًا بأربع طرق مختلفة: الأساسية، والصور، والقائمة، ومستوى التقدم. تشمل جميع الإشعارات عنوانًا ورسالة ورمزًا صغيرًا يظهر على يمين رسالة الإشعار، بالإضافة إلى حقل contextMessage يتم عرضه كحقل نصي ثالث بلون أفتح.

الإشعار الأساسي:

الإشعار الأساسي

تعرض إشعارات القائمة أي عدد من عناصر القائمة:

إشعار القائمة

تتضمّن إشعارات الصور معاينة للصورة:

إشعار الصورة

تعرض إشعارات مستوى التقدّم شريط تقدّم:

إشعار بشأن مستوى التقدّم

سلوكيات الجمهور

في نظام التشغيل ChromeOS، تظهر الإشعارات في لوحة النظام لدى المستخدم وتبقى في لوحة النظام إلى أن يغلقها المستخدم. تحتفظ لوحة النظام بعدد جميع الإشعارات الجديدة. وبمجرد أن يرى المستخدم الإشعارات في لوحة النظام، تتم إعادة تعيين العدد إلى صفر.

يمكن تعيين أولوية الإشعارات بين -2 و2. يتم عرض الأولويات الأقل من 0 في مركز إشعارات نظام التشغيل ChromeOS، ما يؤدي إلى ظهور خطأ في الأنظمة الأساسية الأخرى. الأولوية التلقائية هي 0. يتم عرض الأولويات التي تزيد عن 0 لزيادة المدة ويمكن عرض المزيد من الإشعارات ذات الأولوية العالية في لوحة النظام.

لا يؤثر الإعداد priority في ترتيب الإشعارات على نظام التشغيل macOS.

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

الإجراء في الإشعار

كيفية تطويرها

لاستخدام واجهة برمجة التطبيقات هذه، يمكنك استدعاء الطريقة notifications.create() مع إدخال تفاصيل الإشعار باستخدام المعلَمة options:

await chrome.notifications.create(id, options);

يجب أن تتضمّن notifications.NotificationOptions علامة notifications.TemplateType تحدّد تفاصيل الإشعارات المتاحة وكيفية عرض هذه التفاصيل.

إنشاء إشعار أساسي

يجب أن تتضمّن كل أنواع النماذج (basic وimage وlist وprogress) الإشعار title وmessage، بالإضافة إلى الرمز iconUrl، وهو رابط يؤدي إلى رمز صغير يظهر على يمين رسالة الإشعار.

إليك مثال على نموذج basic:

var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon"
}

استخدام صورة

يشتمل نوع النموذج image أيضًا على imageUrl، وهو رابط يؤدي إلى صورة تتم معاينتها ضمن الإشعار. يُرجى العلم أنّ الصور لا تظهر للمستخدمين على نظام التشغيل macOS.

var opt = {
  type: "image",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

إنشاء إشعار للقائمة

يعرض النموذج list items بتنسيق قائمة. يُرجى العِلم أنّه لن يتم عرض سوى العنصر الأول للمستخدمين على نظام التشغيل macOS.

var opt = {
  type: "list",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  items: [{ title: "Item1", message: "This is item 1."},
          { title: "Item2", message: "This is item 2."},
          { title: "Item3", message: "This is item 3."}]
}```

### Create progress notification {: #progress }

The `progress` template displays a progress bar where current progress ranges from 0 to 100. On macOS the progress bar displays as a percentage value in the notification title instead of in the progress bar.

```js
var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

الاستماع إلى الأحداث والاستجابة لها

ويمكن أن تتضمّن جميع الإشعارات أدوات معالجة الأحداث ومعالجات الأحداث التي تستجيب لإجراءات المستخدم (راجِع chrome.events). على سبيل المثال، يمكنك كتابة معالج أحداث للاستجابة لحدث notifications.onButtonClicked.

أداة معالجة الحدث:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

معالج الحدث:

function replyBtnClick {
    //Write function to respond to user action.
}

ننصحك بتضمين أدوات معالجة الأحداث والمعالجات ضمن مشغّل الخدمات، لكي تظهر الإشعارات حتى في حال عدم تشغيل الإضافة.