واجهة برمجة تطبيقات الإشعارات الغنية

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

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

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

صورة أساسية:

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

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

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

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

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

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

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

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

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

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

يجب أن يتضمّن 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، وهو رابط يؤدي إلى صورة تتم معاينتها ضمن الإشعار:

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

في تطبيقات Chrome، بموجب سياسة أمان المحتوى الصارمة، يجب أن توجّه عناوين URL هذه إلى مورد محلي أو أن تستخدم عنوان كائن تخزين البيانات (blob) أو عنوان URL للبيانات. استخدم نسبة 3:2 للصورة؛ وإلا سيتم استخدام حدود سوداء لتحديد إطار الصورة.

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

يعرض نموذج list items بتنسيق قائمة:

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."}]
}

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

يعرض نموذج progress شريط تقدّم يتراوح فيه مستوى التقدّم الحالي من 0 إلى 100:

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.
}

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