שימוש ב-Notifications API

ב-chrome.notifications API אפשר ליצור התראות באמצעות תבניות ולהציג למשתמשים את ההתראות האלה במגש המערכת של המשתמש:

התראות במגשית המשתמש של המערכת

איך הן נראות

יש ארבע טעמים שונים של התראות עשירות: בסיסית, תמונה, רשימה והתקדמות. כל ההתראות כוללות כותרת, הודעה, סמל קטן מימין להודעת ההתראה ושדה contextMessage שמוצג כשדה טקסט שלישי בגופן בהיר יותר.

התראה בסיסית:

התראה בסיסית

התראות רשימה מציגות כל מספר של פריטים ברשימה:

התראה ברשימה

התראות עם תמונות כוללות תצוגה מקדימה של תמונה:

התראה עם תמונה

בהתראות התקדמות מוצג סרגל התקדמות:

התראה על התקדמות

איך הם מתנהגים

ב-ChromeOS, ההתראות מופיעות במגש המערכת של המשתמש ונשארות במגש המערכת עד שהמשתמש סוגר אותן. במגש המערכת סופרים את כל ההתראות החדשות. כשהמשתמשים רואים את ההתראות במגש המערכת, הספירה מתאפסת.

אפשר להקצות להתראות עדיפות בין 2 ל-2. במרכז ההודעות של ChromeOS מוצגות עדיפות נמוכה מ-0, ויוצרות שגיאה בפלטפורמות אחרות. עדיפות ברירת המחדל היא 0. אם תגדירו עדיפות גבוהה מ-0, משך הזמן יהיה ארוך יותר, וניתן יהיה להציג יותר התראות בעדיפות גבוהה במגש המערכת.

ההגדרה priority לא משפיעה על סדר ההתראות ב-macOS.

בנוסף להצגת המידע, כל סוגי ההתראות יכולים לכלול עד שתי פעולות לביצוע. כשמשתמשים לוחצים על פעולה לביצוע, התוסף יכול להגיב על הפעולה המתאימה. לדוגמה, כשמשתמש לוחץ על תשובה, אפליקציית האימייל נפתחת והמשתמש יכול להשיב:

פעולה בהתראה

איך לפתח אותם

כדי להשתמש ב-API הזה, צריך לקרוא לשיטה notifications.create() ולהעביר את פרטי ההתראה באמצעות הפרמטר options:

await chrome.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 listener וגורמים מטפלים באירועים שמגיבים לפעולות של משתמשים (ראו chrome.events). לדוגמה, אפשר לכתוב handler של אירועים כדי להגיב לאירוע notifications.onButtonClicked.

האזנה לאירוע:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

גורם מטפל באירועים:

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

כדאי לכלול פונקציות event listener ו-handlers בתוך ה-Service Worker, כדי שההתראות יוכלו להופיע גם כשהתוסף לא פועל.