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

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

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

تتوفّر الإشعارات التفاعلية بأربع صيغ مختلفة، وهي: الأساسيات والصور والقائمة والتقدم. الكل تتضمن الإشعارات عنوانًا أو رسالة أو رمزًا صغيرًا يتم عرضه على يمين الإشعار. وحقل 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.
}

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