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

טריגרים להתרעות מאפשרים לתזמן התראות מקומיות שלא דורשות חיבור לרשת, ולכן הן אידיאליות למקרים לדוגמה כמו אפליקציות יומן.

Thomas Steiner

מהם טריגרים להתרעות?

מפתחי אתרים יכולים להציג התראות באמצעות Web Notifications API. התכונה הזו משמשת לעיתים קרובות עם Push API כדי ליידע את המשתמש על מידע שחשוב לקבל בזמן, כמו אירועים חדשותיים דחופים או הודעות שהתקבלו. ההתראות מוצגות על ידי הפעלת JavaScript במכשיר של המשתמש.

הבעיה ב-Push API היא שהוא לא מהימן להפעלת התראות שחייבות להופיע כשמתקיים תנאי מסוים, כמו שעה או מיקום. דוגמה לתנאי מבוסס זמן היא התראה ביומן שמזכירה לכם פגישה חשובה עם הבוס בשעה 14:00. דוגמה לתנאי מבוסס-מיקום היא התראה שמזכירה לכם לקנות חלב כשאתם נכנסים לאזור של מכולת. קישוריות לרשת או תכונות לחיסכון בסוללה, כמו מצב שינה, עלולות לעכב את שליחת ההתראות.

טריגרים להתרעות פותרים את הבעיה הזו על ידי מתן אפשרות לתזמן התראות עם תנאי ההפעלה שלהן מראש, כך שמערכת ההפעלה תציג את ההתראה בזמן הנכון גם אם אין חיבור לרשת או שהמכשיר נמצא במצב חיסכון בסוללה.

תרחישים לדוגמה

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

רשת טלוויזיה עשויה להזכיר למשתמשים שתוכנית הטלוויזיה האהובה עליהם עומדת להתחיל או ששידור חי של כנס עומד להתחיל.

אתרים שמבצעים המרה של אזור זמן יכולים להשתמש בטריגרים של התראות מבוססות-זמן כדי לאפשר למשתמשים שלהם לתזמן התראות לשיחות ועידה או לשיחות וידאו.

הסטטוס הנוכחי

שלב סטטוס
1. יצירת הסבר הושלם
2. יצירת טיוטה ראשונית של מפרט עוד לא התחילה
3. אוספים משוב ומבצעים שינויים בעיצוב. בטיפול
4. גרסת מקור לניסיון הושלם
5. הפעלה עוד לא התחילה

איך משתמשים בטריגרים להתרעות

הפעלה דרך about://flags

כדי להתנסות ב-Notification Triggers API באופן מקומי, בלי טוקן לניסיון במקור, מפעילים את הדגל #enable-experimental-web-platform-features בקובץ about://flags.

זיהוי תכונות

כדי לבדוק אם הדפדפן תומך בטריגרים של התראות, בודקים אם המאפיין showTrigger קיים:

if ('showTrigger' in Notification.prototype) {
  /* Notification Triggers supported */
}

תזמון התראה

תזמון התראה דומה להצגת התראה רגילה ב-push, מלבד העובדה שצריך להעביר למאפיין options של ההתראה מאפיין תנאי showTrigger עם אובייקט TimestampTrigger בתור הערך.

const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: 'This notification was scheduled 30 seconds ago',
    showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
  });
};

ביטול התראה מתוזמנת

כדי לבטל התראות מתוזמנות, קודם צריך לבקש רשימה של כל ההתראות שתואמות לתג מסוים באמצעות ServiceWorkerRegistration.getNotifications(). חשוב לזכור שצריך להעביר את הדגל includeTriggered כדי שהתראות מתוזמנות ייכללו ברשימה:

const cancelScheduledNotification = async (tag) => {
  const registration = await navigator.serviceWorker.getRegistration();
  const notifications = await registration.getNotifications({
    tag: tag,
    includeTriggered: true,
  });
  notifications.forEach((notification) => notification.close());
};

ניפוי באגים

אפשר להשתמש בלוח ההתראות של הכלים למפתחים של Chrome כדי לנפות באגים בהתראות. כדי להתחיל לנפות באגים, מקישים על התחלת ההקלטה של האירועים התחלת הקלטה של אירועים או על Control+E (Command+E ב-Mac). כלים למפתחים של Chrome מתעדים את כל אירועי ההתראות, כולל התראות מתוזמנות, התראות שמוצגות והתראות שנסגרו, למשך שלושה ימים, גם כשכלי הפיתוח סגורים.

אירוע התראה מתוזמן נרשם בחלונית ההתראות של Chrome DevTools, שנמצאת בחלונית האפליקציה.
התראה מתוזמנת.
אירוע של התראה שמוצגת נרשם ביומן בחלונית ההתראות של Chrome DevTools.
התראה מוצגת.

הדגמה (דמו)

אפשר לראות את הטריגרים של ההתראות בפעולה בהדגמה. כך ניתן לתזמן התראות, להציג רשימה של התראות מתוזמנות ולבטל אותן. קוד המקור זמין ב-Glitch.

צילום מסך של אפליקציית האינטרנט לדוגמה של טריגרים להתראות.
הדגמה של טריגרי התראות.

אבטחה והרשאות

צוות Chrome תכנן ויישם את Notification Triggers API בהתאם לעקרונות המרכזיים שמוגדרים במאמר בקרת הגישה לתכונות עוצמתיות של פלטפורמת אינטרנט, כולל שליטה על ידי משתמשים, שקיפות וארגונומיה. מכיוון ש-API הזה מחייב שירותי עובדים, הוא דורש גם הֶקשר מאובטח. כדי להשתמש ב-API נדרשת אותה הרשאה כמו להתרעות רגילות.

שליטת משתמשים

ה-API הזה זמין רק בהקשר של ServiceWorkerRegistration. המשמעות היא שכל הנתונים הנדרשים מאוחסנים באותו הקשר ונמחקים באופן אוטומטי כשה-service worker נמחק או כשהמשתמש מחק את כל נתוני האתר של המקור. חסימת קובצי cookie מונעת גם את ההתקנה של שירותי worker ב-Chrome, ולכן לא ניתן להשתמש ב-API הזה. המשתמשים תמיד יכולים להשבית את ההתראות באתר בהגדרות האתר.

שקיפות

בניגוד ל-Push API, ה-API הזה לא תלוי ברשת, כלומר כדי לשלוח התראות מתוזמנות צריך לספק מראש את כל הנתונים הנדרשים, כולל משאבי תמונות שמפנים למאפיינים badge,‏ icon ו-image. כלומר, המפתח לא יכול לראות את הצגת ההתראה המתוזמנת, והיא לא מעוררת את ה-service worker עד שהמשתמש יוצר אינטראקציה עם ההתראה. כתוצאה מכך, בשלב זה אין דרך ידועה שבה המפתח יכול לקבל מידע על המשתמש באמצעות שיטות שעלולות לפגוע בפרטיות, כמו חיפוש מיקום גיאוגרפי לפי כתובת IP. העיצוב הזה מאפשר גם לתכונה להשתמש במנגנוני תזמון שסופקו על ידי מערכת ההפעלה, כמו AlarmManager של Android, כדי לחסוך בסוללה.

משוב

צוות Chrome רוצה לשמוע על החוויה שלכם עם טריגרים להתרעות.

תיאור של עיצוב ה-API

האם יש משהו ב-API שלא פועל כצפוי? או שיש שיטות או מאפיינים חסרים שאתם צריכים ליישם את הרעיון שלכם? יש לכם שאלות או הערות לגבי מודל האבטחה? דווחו על בעיית מפרט במאגר ההתראות של Triggers GitHub או הוסיפו את דעתכם לגבי בעיה קיימת.

בעיה בהטמעה?

מצאתם באג בהטמעה של Chrome? או שההטמעה שונה מהמפרט? דווחו על באג בכתובת new.crbug.com. הקפידו לכלול כמה שיותר פרטים, הוראות פשוטות לשחזור הרכיבים והגדרתם את הרכיבים ל-UI>Notifications. Glitch מצוין לשיתוף של הדגמות מהירות וקלות של באגים.

מתכננים להשתמש ב-API?

מתכננים להשתמש בטריגרים להתרעות באתר? התמיכה הציבורית שלכם עוזרת לנו לקבוע את סדר העדיפויות של התכונות, ומראה ליצרני דפדפנים אחרים כמה חשובה התמיכה בהם. אפשר לשלוח ציוץ אל @ChromiumDev עם ההאשטאג #NotificationTriggers ולספר לנו איפה ואיך אתם משתמשים בו.

קישורים מועילים

תודות

Richard Knoll הטמיע את התכונה 'טריגרים להתרעות', והסבר על התכונה נכתב על ידי Peter Beverloo, עם תרומות מ-Richard. האנשים הבאים בדקו את המאמר: ג'ו מדלי, Pete LePage, וגם ריצ'רד ופיטר. תמונה ראשית (Hero) של Lukas Blazek ב-Unsplash.