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

Kate Jeffreys

Kayce Basques

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

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

ה-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

הגדרה

לוחצים על Remix to Edit כדי להפוך את הפרויקט לעריכה.

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

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

VAPID_PUBLIC_KEY="BKiwTvD9HA…" VAPID_PRIVATE_KEY="4mXG9jBUaU…" VAPID_SUBJECT="mailto:[email protected]" 

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

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

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

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

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; } 

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

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

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

   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().

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

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

1. מחליפים את ההערה // TODO ב-handler של האירוע 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 מוסבר איך לבנות שרת שמנהל מינויים ושולח בקשות של פרוטוקול push באינטרנט.
• כדאי לנסות את מחולל ההתראות כדי לבדוק את כל הדרכים להתאמה אישית של ההתראות.