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

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

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

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

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