Codelab: יצירת לקוח התראות בדחיפה

Kate Jeffreys

Kayce Basques

ב-Codelab הזה נסביר שלב אחר שלב איך ליצור לקוח של התראות. בסוף ה-Codelab יהיה לכם לקוח:

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

ה-Codelab הזה מתמקד בלמידה תוך כדי עשייה, ולא מתעכב על מושגים. במאמר איך פועלות התראות מוסברים המושגים שקשורים להתראות.

קוד השרת של ה-Codelab הזה כבר הושלם. ב-Codelab הזה תטמיעו רק את הלקוח. ב-Codelab: Build a push notification server מוסבר איך מטמיעים שרת של התראות.

תאימות דפדפן

ה-Codelab הזה פועל עם השילובים הבאים של מערכות הפעלה ודפדפנים:

• ‫Windows: ‏ Chrome, ‏ Edge
• ‫macOS: ‏Chrome, ‏Firefox
• ‫Android: ‏ Chrome, ‏ Firefox

ה-Codelab הזה לא פועל עם מערכות ההפעלה הבאות (או שילובים של מערכת הפעלה ודפדפן):

• ‫macOS: ‏Brave, ‏Edge, ‏Safari
• iOS

הגדרה

מגדירים אימות

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

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[e-mail]"

1. פתיחת public/index.js.
2. מחליפים את VAPID_PUBLIC_KEY_VALUE_HERE בערך של המפתח הציבורי.

רישום של Service Worker

הלקוח צריך service worker כדי לקבל ולהציג התראות. מומלץ לרשום את קובץ השירות (service worker) כמה שיותר מוקדם. קבלת הודעות שנשלחו והצגתן כהתראות

1. מחליפים את ההערה // TODO add startup logic here בקוד הבא:

   if ('serviceWorker' in navigator && 'PushManager' in window) {
     navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
       console.info('Service worker was registered.');
       console.info({serviceWorkerRegistration});
     }).catch(error => {
       console.error('An error occurred while registering the service worker.');
       console.error(error);
     });
     subscribeButton.disabled = false;
   } else {
     console.error('Browser does not support service workers or push messages.');
   }
   
   subscribeButton.addEventListener('click', subscribeButtonHandler);
   unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
   

2. ב-Chrome, פותחים את DevTools Console.

3. ההודעה Service worker was registered. אמורה להופיע במסוף.

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

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

1. בקובץ public/index.js, מחליפים את ההערה // TODO בקובץ subscribeButtonHandler() בקוד הבא:

   // Prevent the user from clicking the subscribe button multiple times.
   subscribeButton.disabled = true;
   const result = await Notification.requestPermission();
   if (result === 'denied') {
     console.error('The user explicitly denied the permission request.');
     return;
   }
   if (result === 'granted') {
     console.info('The user accepted the permission request.');
   }
   

2. חוזרים לכרטיסייה של האפליקציה ולוחצים על Subscribe to push (הרשמה להתראות). הדפדפן או מערכת ההפעלה ישאלו אם אתם רוצים לאפשר לאתר לשלוח לכם התראות.

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

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

הרשמה לקבלת התראות

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

1. מוסיפים את הקוד המודגש הבא אל subscribeButtonHandler():

   subscribeButton.disabled = true;
   const result = await Notification.requestPermission();
   if (result === 'denied') {
     console.error('The user explicitly denied the permission request.');
     return;
   }
   if (result === 'granted') {
     console.info('The user accepted the permission request.');
   }
   const registration = await navigator.serviceWorker.getRegistration();
   const subscribed = await registration.pushManager.getSubscription();
   if (subscribed) {
     console.info('User is already subscribed.');
     notifyMeButton.disabled = false;
     unsubscribeButton.disabled = false;
     return;
   }
   const subscription = await registration.pushManager.subscribe({
     userVisibleOnly: true,
     applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
   });
   notifyMeButton.disabled = false;
   fetch('/add-subscription', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(subscription)
   });
   

האפשרות userVisibleOnly חייבת להיות true. יכול להיות שבעתיד תהיה אפשרות לשלוח הודעות בלי להציג התראות שגלויות למשתמשים (התראות שקטות), אבל דפדפנים לא מאפשרים את היכולת הזו בגלל בעיות שקשורות לפרטיות.

הערך applicationServerKey מסתמך על פונקציה בסיסית שממירה מחרוזת base64 ל-Uint8Array. הערך הזה משמש לאימות בין השרת שלכם לבין שירות ההתראות.

ביטול ההרשמה להתראות

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

• מחליפים את ההערה // TODO ב-unsubscribeButtonHandler() בקוד הבא:

const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

קבלת הודעת Push והצגתה כהתראה

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

1. פותחים את public/service-worker.js ומחליפים את ההערה // TODO בגורם המטפל באירועים push של ה-service worker בקוד הבא:

   let data = event.data.json();
   const image = 'logo.png';
   const options = {
     body: data.options.body,
     icon: image
   }
   self.registration.showNotification(
     data.title,
     options
   );
   

2. חוזרים לכרטיסיית האפליקציה.

3. לוחצים על אני רוצה לקבל התראה. אמורה להופיע התראה.

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

אפשר להתאים אישית את ההתראה בהרבה דרכים. מידע נוסף זמין בפרמטרים של ServiceWorkerRegistration.showNotification().

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

פתיחת כתובת URL כשמשתמש לוחץ על התראה

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

1. מחליפים את ההערה // TODO ב-גורם המטפל באירועים של notificationclick ב-קובץ שירות (service worker) בקוד הבא:

   event.notification.close();
   event.waitUntil(self.clients.openWindow('https://web.dev'));
   

2. חוזרים לכרטיסיית האפליקציה, שולחים לעצמכם עוד התראה ולוחצים עליה. הדפדפן אמור לפתוח כרטיסייה חדשה ולטעון את https://web.dev.

השלבים הבאים

• במאמר ServiceWorkerRegistration.showNotification() מפורטות כל הדרכים השונות להתאמה אישית של ההתראות.
• במאמר סקירה כללית של התראות מוסבר איך פועלות התראות.
• ב-Codelab: Build a push notification server מוסבר איך ליצור שרת שמנהל מינויים ושולח בקשות לפרוטוקול של התראות אינטרנט.
• כדי לבדוק את כל הדרכים שבהן אפשר להתאים אישית את ההתראות, נסו את Notification Generator.