ב-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, כדי שההתראות יוכלו להופיע גם כשהתוסף לא פועל.