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

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

איך הם נראים

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

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

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

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

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

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

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

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

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

איך לפתח אותם

כדי להשתמש ב-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, עקב מדיניות אבטחת תוכן מחמירה, כתובות ה-URL האלה חייבות להפנות אל משאב או להשתמש בכתובת URL של נתונים או blob. צריך להשתמש ביחס של 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
}

האזנה לאירועים ותגובה אליהם

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

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

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

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

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

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