תחילת השימוש ב-Notification API

ב-codelab הזה תשתמשו בתכונות הבסיסיות של Notifications API כדי:

  • שליחת בקשה להרשאה לשלוח התראות
  • שליחת התראות
  • ניסוי באפשרויות ההתראות

תמיכה בדפדפנים

  • Chrome: ‏ 20.
  • Edge: 14.
  • Firefox: 22.
  • Safari: 7.

מקור

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

  1. לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.
  2. כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא מסך מלא.

Glitch אמור להיפתח בכרטיסייה חדשה ב-Chrome:

צילום מסך שבו מוצגת האפליקציה הפעילה עם רמיקס בכרטיסייה חדשה

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

מעיינים באפליקציה המקורית ובקוד שלה

כדי להתחיל, כדאי לבדוק את האפליקציה הפעילה בכרטיסייה החדשה ב-Chrome:

  1. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools. לוחצים על הכרטיסייה מסוף.

    אמורה להופיע ההודעה הבאה במסוף:

    Notification permission is default

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

  2. לוחצים על הלחצנים באפליקציה בשידור חי: בקשה לקבלת הרשאה לשליחת התראות ושליחת התראה.

    במסוף מודפסות הודעות 'TODO' מכמה stubs של פונקציות: requestPermission ו-sendNotification. אלה הפונקציות שתטמיעו ב-codelab הזה.

עכשיו נסתכל על הקוד של האפליקציה לדוגמה ב-Glitch המוטמע בדף הזה. פותחים את public/index.js ומעיינים בחלקים חשובים בקוד הקיים:

  • הפונקציה showPermission משתמשת ב-Notifications API כדי לקבל את מצב ההרשאות הנוכחי של האתר ולתעד אותו ביומן במסוף:

    // Print current permission state to console;
    // update onscreen message.
    function showPermission() {
      let permission
    = Notification.permission;
      console
    .log('Notification permission is ' + permission);
      let p
    = document.getElementById('permission');
      p
    .textContent = 'Notification permission is ' + permission;
    }

    לפני שליחת בקשת ההרשאה, מצב ההרשאה הוא default. במצב ההרשאה default, האתר צריך לבקש הרשאה ולקבל אותה כדי שיוכל לשלוח התראות.

  • הפונקציה requestPermission היא סטאב:

    // Use the Notification API to request permission to send notifications.
    function requestPermission() {
      console
    .log('TODO: Implement requestPermission()');
    }

    בשלב הבא נטמיע את הפונקציה הזו.

  • הפונקציה sendNotification היא סטאב:

    // Use the Notification constructor to create and send a new Notification.
    function sendNotification() {
      console
    .log('TODO: Implement sendNotification()');
    }

    מטמיעים את הפונקציה הזו אחרי שמטמיעים את requestPermission.

  • בחיישן האירועים window.onload מתבצעת קריאה לפונקציה showPermission בזמן טעינת הדף, והמצב הנוכחי של ההרשאה מוצג במסוף ובדף:

    window.onload = () => { showPermission(); };

שליחת בקשה להרשאה לשלוח התראות

בשלב הזה, תוסיפו פונקציונליות לבקשת הרשאה מהמשתמש לשלוח התראות.

משתמשים בשיטה Notification.requestPermission() כדי להפעיל חלון קופץ שבו המשתמש מתבקש לאשר או לחסום התראות מהאתר.

  1. מחליפים את גוף הפונקציה requestPermission בקובץ public/index.js בקוד הבא:

    // Use the Notification API to request permission to send notifications.
    function requestPermission() {
     
    Notification.requestPermission()
       
    .then((permission) => {
          console
    .log('Promise resolved: ' + permission);
          showPermission
    ();
       
    })
       
    .catch((error) => {
          console
    .log('Promise was rejected');
          console
    .log(error);
       
    });
    }
  2. טוענים מחדש את הכרטיסייה ב-Chrome שבה מוצגת האפליקציה שלכם.

  3. בממשק האפליקציה הפעיל, לוחצים על בקשה להרשאה לשליחת התראות. יופיע חלון קופץ.

המשתמש יכול לבחור באחת משלוש התשובות בחלון הקופץ של ההרשאה.

תגובה של משתמש מצב ההרשאה לשליחת התראות
המשתמש בוחר באפשרות אישור. granted
המשתמש בוחר באפשרות חסימה. denied
המשתמש סוגר את החלון הקופץ בלי לבחור אפשרות default

אם המשתמש לוחץ על 'אישור':

  • Notification.permission מוגדר לערך granted.

  • האתר יוכל להציג התראות.

  • קריאות חוזרות ל-Notification.requestPermission יפנו ל-granted בלי חלון קופץ.

אם המשתמש לוחץ על 'חסימה':

  • Notification.permission מוגדר לערך denied.

  • האתר לא יוכל להציג התראות למשתמש.

  • קריאות חוזרות ל-Notification.requestPermission יפנו ל-denied בלי חלון קופץ.

אם המשתמש סוגר את החלון הקופץ:

  • Notification.permission נשאר default.

  • האתר לא יוכל להציג התראות למשתמש.

  • קריאות נוספות ל-Notification.requestPermission ייצרו חלונות קופצים נוספים.

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

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

שליחת התראה

בשלב הזה שולחים התראה למשתמש.

תשתמשו ב-constructor‏ Notification כדי ליצור התראה חדשה ולנסות להציג אותה. אם סטטוס ההרשאה הוא granted, ההודעה תוצג.

  1. מחליפים את קטעי הקוד של פונקציית sendNotification בקובץ index.js בקוד הבא:

    // Use the Notification constructor to create and send a new Notification.
    function sendNotification() {
      let title
    = 'Test';
      let options
    = {
        body
    : 'Test body',
       
    // Other options can go here
     
    };
      console
    .log('Creating new notification');
      let notification
    = new Notification(title, options);
    }

    ה-constructor של Notification כולל שני פרמטרים: title ו-options. options הוא אובייקט עם מאפיינים שמייצגים הגדרות חזותיות ונתונים שאפשר לכלול בהתראה. מידע נוסף זמין במסמכי התיעוד של MDN בנושא פרמטרים של התראות.

  2. מרעננים את הכרטיסייה ב-Chrome שבה מוצגת האפליקציה הפעילה ולוחצים על הלחצן שליחת התראה. אמורה להופיע התראה עם הטקסט Test body.

מה קורה כששולחים התראות בלי רשות?

בשלב הזה תוסיפו כמה שורות קוד שיאפשרו לכם לראות מה קורה כשמנסים להציג התראה בלי רשות המשתמש.

  • ב-public/index.js, בסוף הפונקציה sendNotification, מגדירים את פונקציית הטיפול באירועים onerror של ההתראה החדשה:
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title
= 'Test';
  let options
= {
    body
: 'Test body',
   
// Other options can go here
 
};
  console
.log('Creating new notification');
  let notification
= new Notification(title, options);
  notification
.onerror = (event) => {
    console
.log('Could not send notification');
    console
.log(event);
 
};
}

כדי לבדוק אם יש שגיאה בהרשאה לשליחת התראות:

  1. לוחצים על סמל הנעילה לצד סרגל כתובות ה-URL ב-Chrome ומאפסים את הגדרת ההרשאה לקבלת התראות מהאתר להגדרת ברירת המחדל.

  2. לוחצים על בקשה לקבלת הרשאה לשליחת התראות, ובחלון הקופץ בוחרים הפעם באפשרות חסימה.

  3. לוחצים על שליחת התראה וצפו מה יקרה. טקסט השגיאה (Could not send notification) ועצם האירוע נרשמים במסוף.

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

ניסוי באפשרויות ההתראות

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

עכשיו אפשר להתנסות באפשרויות הרבות של רכיבים חזותיים ונתונים שזמינות בזמן יצירת ההתראה. בהמשך מפורטות כל האפשרויות הזמינות. (בתיעוד בנושא התראות ב-MDN מפורט מידע נוסף על האפשרויות האלה).

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

let options = {
  dir
: 'auto',              // Text direction
  lang
: 'en-US',            // A language tag
  badge
: '/orange-cat.png', // Display when insufficient room
  body
: 'Hello World',      // Body text
  tag
: 'mytag',             // Tag for categorization
  icon
: '/line-cat.png',    // To display in the notification
  image
: '/orange-cat.png', // To display in the notification
  data
: {                   // Arbitrary data; any data type
    cheese
: 'I like cheese',
    pizza
: 'Excellent cheese delivery mechanism',
    arbitrary
: {
      faveNumber
: 42,
      myBool
: true
   
}},
  vibrate
: [200, 100, 200], // Vibration pattern for hardware
  renotify
: false,          // Notify if replaced? Default false
  requireInteraction
: false,// Active until click? Default false
 
/*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */

}

בכלי ליצירת התראות של Peter Beverloo תוכלו למצוא רעיונות נוספים.

אם נתקעתם, הנה הקוד המלא של ה-Codelab הזה: glitch.com/edit/#!/codelab-notifications-get-started-completed

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