ממשק API של התראות עשירות

הבדלים בפלטפורמות: בגרסה 59 של Chrome, ההתראות מופיעות בצורה שונה אצל משתמשי Mac OS X. במקום ההתראות של Chrome עצמו, המשתמשים רואים התראות מקוריות ב-Mac OS X. למידע נוסף במאמר הזה.

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

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

איך הן נראות

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

תמונה בסיסית:

התראה בסיסית

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

התראה על רשימה

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

התראת תמונה

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

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

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

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

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

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

הפעולה בהתראה

איך לפתח אותם

כדי להשתמש ב-API הזה, קוראים ל-method 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, שהוא קישור לתמונה שמוצגת בתצוגה מקדימה בהודעה:

הבדלים בפלטפורמה: תמונות לא יוצגו למשתמשים שמשתמשים ב-Chrome בגרסה 59 ואילך ב-Mac OS X.
var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

עקב מדיניות Content Security מחמירה של אפליקציות Chrome, כתובות ה-URL האלה חייבות להפנות למשאב מקומי או להשתמש בכתובת URL של נתונים (blob או data URL). השתמשו ביחס של 3:2 לתמונה, אחרת מסגרת שחור היא המסגרת.

הודעה על יצירת רשימה

בתבנית list מוצג items בפורמט רשימה:

הבדלים בפלטפורמות: רק הפריט הראשון ברשימה מוצג למשתמשים ב-Chrome בגרסה 59 ומעלה ב-Mac OS X.
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:

הבדל בין פלטפורמה: בגרסה 59 ומעלה של Chrome ב-Mac OS X, סרגל ההתקדמות מוצג כערך באחוזים בכותרת ההתראה, במקום להציג סרגל התקדמות.
var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

מענה לאירועים ומענה לאירועים

כל ההתראות יכולות לכלול פונקציות event listener ורכיבי handler של אירועים שמגיבים לפעולות של משתמשים (ראו chrome.events). לדוגמה, אפשר לכתוב גורם מטפל באירועים כדי להגיב לאירוע notifications.onButtonClicked.

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

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

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

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

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