ב-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
, שהוא קישור לתמונה שמוצגת בתצוגה מקדימה בהודעה:
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
בפורמט רשימה:
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 בדף האירוע, כדי שההתראות יוכלו לקפוץ גם כשהאפליקציה או התוסף לא פועלים.