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

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

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

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

صورة أساسية:

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

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

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

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

في 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 هذه إلى مصدر محلي أو تستخدِم عنوان 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.
}

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