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

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

איך הם נראים

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

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

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

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

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

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

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

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

באפליקציות Chrome, בגלל Content Security Policy מחמירה, כתובות ה-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
}

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

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

פונקציית Event Listener:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

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

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

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