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

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

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

תמיכה בדפדפן

• 20
• 14
• 22
• 7

מקור

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

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

1. לוחצים על רמיקס לעריכה כדי להגדיר את הפרויקט כניתן לעריכה.
2. כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .

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

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

היכרות עם אפליקציית הפתיחה והקוד שלה

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

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

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

   Notification permission is default
   

   אם אינך יודע מה משמעות הדבר, אל דאגה; הכל ייחשף בקרוב!

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

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

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

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

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

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

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

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

הערה: Notification.requestPermission() מחזירה Promise. כדי לבצע פעולות אחרי שההבטחה הזו מסתיימת, צריך להציב אותן בתוך פונקציה ולהעביר את הפונקציה הזו כפרמטר ל-method then() של ההבטחה: js Notification.requestPermission().then((result) => { /* do stuff */ }); כדאי לעיין במסמכי התיעוד של Promise ב-MDN למידע נוסף על האופן שבו ההבטחות פועלות.

1. צריך להחליף את ה-stub של הפונקציה 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. לאחר מכן, לא ניתן להציג למשתמש חלונות קופצים של בקשות הרשאה או התראות.

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

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

שליחת התראה

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

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

1. צריך להחליף את ה-stub של הפונקציה 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);
   }
   

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

2. רענן את כרטיסיית Chrome שבה אתה מציג את האפליקציה החיה ולחץ על הלחצן Send notification. אמורה להופיע התראה עם הטקסט 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. לחץ על סמל המנעול לצד סרגל כתובות האתרים של 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'
    },],
  */
}

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

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

כדאי לקרוא את ה-Codelab הבא בסדרה הזו, טיפול בהתראות עם קובץ שירות (service worker) כדי לקבל מידע נוסף.