Rich notifications API, Rich notifications API

API غنی اعلان‌ها به شما امکان می‌دهد با استفاده از قالب‌ها اعلان‌هایی ایجاد کنید و این اعلان‌ها را در سینی سیستم کاربر به او نشان دهید:

چگونه به نظر می‌رسند

اعلان‌های غنی در چهار نوع مختلف ارائه می‌شوند: ساده، تصویری، فهرستی و پیشرفتی. همه اعلان‌ها شامل یک عنوان، پیام، یک آیکون کوچک که در سمت چپ پیام اعلان نمایش داده می‌شود و یک فیلد contextMessage هستند که به عنوان فیلد متنی سوم با فونتی روشن‌تر نمایش داده می‌شود.

یک تصویر پایه:

اعلان‌های لیست، هر تعداد از آیتم‌های لیست را نمایش می‌دهند:

اعلان‌های تصویر شامل پیش‌نمایش تصویر هستند:

اعلان‌های پیشرفت، نوار پیشرفت را نشان می‌دهند:

چگونه رفتار می‌کنند؟

در سیستم عامل کروم، اعلان‌ها در سینی سیستم کاربر نمایش داده می‌شوند و تا زمانی که کاربر آنها را ببندد، در سینی سیستم باقی می‌مانند. سینی سیستم تعداد تمام اعلان‌های جدید را نگه می‌دارد. به محض اینکه کاربر اعلان‌ها را در سینی سیستم مشاهده کرد، تعداد آنها به صفر بازنشانی می‌شود.

می‌توان به اعلان‌ها اولویتی بین -۲ تا ۲ اختصاص داد. اولویت‌های < ۰ در مرکز اعلان‌های ChromeOS نشان داده می‌شوند و در پلتفرم‌های دیگر خطا ایجاد می‌کنند. اولویت ۰ اولویت پیش‌فرض است. اولویت‌های > ۰ برای افزایش مدت زمان نمایش داده می‌شوند و اعلان‌های با اولویت بالاتر می‌توانند در سینی سیستم نمایش داده شوند.

علاوه بر نمایش اطلاعات، همه انواع اعلان‌ها می‌توانند شامل حداکثر دو مورد عملیاتی باشند. وقتی کاربران روی یک مورد عملیاتی کلیک می‌کنند، برنامه شما می‌تواند با اقدام مناسب پاسخ دهد. به عنوان مثال، وقتی کاربر روی "پاسخ" کلیک می‌کند، برنامه ایمیل باز می‌شود و کاربر می‌تواند پاسخ را تکمیل کند:

چگونه آنها را توسعه دهیم

برای استفاده از این API، متد 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"
}

در برنامه‌های کروم، به دلیل سیاست امنیتی محتوای سختگیرانه، این URLها باید به یک منبع محلی اشاره کنند یا از یک blob یا data URL استفاده کنند. از نسبت تصویر ۳:۲ برای تصویر خود استفاده کنید؛ در غیر این صورت، یک حاشیه سیاه تصویر را قاب می‌گیرد.

اعلان ایجاد لیست

الگوی 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 ، یک نوار پیشرفت را نمایش می‌دهد که در آن پیشرفت فعلی از ۰ تا ۱۰۰ متغیر است:

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

گنجاندن شنونده‌ها و کنترل‌کننده‌های رویداد را در صفحه رویداد در نظر بگیرید، تا اعلان‌ها حتی زمانی که برنامه یا افزونه در حال اجرا نیست، بتوانند ظاهر شوند.