Rich notifications API, Rich notifications API

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

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

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

یک تصویر اساسی:

اعلان‌های فهرست هر تعداد از موارد فهرست را نمایش می‌دهند:

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

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

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

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

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

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

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

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

در Chrome Apps، به دلیل یک خط‌مشی امنیتی سختگیرانه محتوا، این نشانی‌های اینترنتی باید به یک منبع محلی اشاره کنند یا از یک URL یا 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.
}

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