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

Kate Jeffreys

Kayce Basques

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

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

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

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

תאימות דפדפן

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

• ‫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:test@test.test"

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

רישום קובץ שירות (service worker)

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

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

// 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);

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

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

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

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

// TODO
// 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.');
}

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

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

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

• מוסיפים את הקוד המודגש הבא אל 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() בקוד הבא:

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

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

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

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

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

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

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

• מחליפים את ההערה // TODO ב-handler של האירוע notificationclick של ה-service worker בקוד הבא:

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

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

השלבים הבאים

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