از Notifications API استفاده کنید

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

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

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

یک اطلاع رسانی اساسی:

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

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

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

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

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

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

تنظیم priority روی ترتیب اعلان‌ها در macOS تأثیری ندارد.

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

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

برای استفاده از این API، متد notifications.create() را فراخوانی کنید و جزئیات اعلان را با استفاده از پارامتر options ارسال کنید:

await browser.notifications.create(id, options);

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 است که پیوندی به تصویری است که در اعلان پیش‌نمایش داده می‌شود. توجه داشته باشید که تصاویر در macOS به کاربران نشان داده نمی‌شوند.

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

ایجاد اعلان فهرست

قالب list ، items در قالب یک لیست نمایش می‌دهد. توجه داشته باشید که فقط اولین آیتم برای کاربران در macOS نمایش داده می‌شود.

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

### Create progress notification {: #progress }

The `progress` template displays a progress bar where current progress ranges from 0 to 100. On macOS the progress bar displays as a percentage value in the notification title instead of in the progress bar.

```js
var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

به رویدادها گوش دهید و به آنها پاسخ دهید

همه اعلان‌ها می‌توانند شامل شنونده‌های رویداد (event listeners) و کنترل‌کننده‌های رویداد (event handlers) باشند که به اقدامات کاربر پاسخ می‌دهند (به browser.events مراجعه کنید). برای مثال، می‌توانید یک کنترل‌کننده رویداد (event handler) بنویسید تا به رویداد notifications.onButtonClicked پاسخ دهد.

شنونده رویداد:

browser.notifications.onButtonClicked.addListener(replyBtnClick);

کنترل کننده رویداد:

function replyBtnClick {
    //Write function to respond to user action.
}

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