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

Kate Jeffreys

Kayce Basques

כדי לעקוב אחר ה-Codelab הזה, פותחים את התקלה הזו בכרטיסייה שנייה.

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

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

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

קוד השרת של Codelab הזה כבר הושלם. תטמיעו את הלקוח רק ב-Codelab הזה. אפשר לקרוא מידע נוסף על הטמעת שרת התראות במאמר Codelab: בניית שרת התראות.

הקוד המלא מופיע במאמר push-notifications-client-codelab-complete (מקור).

תאימות דפדפן

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

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

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

• macOS: Brave, Edge, Safari
• iOS

הגדרה

קבלת עותק שניתן לעריכה של הקוד

עורך הקוד שמופיע משמאל להוראות האלו ייקרא Glitch UI במהלך ה-Codelab הזה.

1. לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.

אם אתם משתמשים במצב פרטי או בחלון אורח ב-Chrome, יכול להיות שתתקשו להשלים את ה-Codelab. כדאי להשתמש במקום זאת בפרופיל שמחובר לחשבון.

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

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

1. בממשק המשתמש של Glitch, לוחצים על Tools (כלים) ואז על Terminal (טרמינל) כדי לפתוח את Glitch Terminal.
2. ב-Glitch Terminal, מריצים את npx web-push generate-vapid-keys. מעתיקים את המפתח הפרטי ואת ערכי המפתח הציבורי.
3. בממשק המשתמש של Glitch, פותחים את .env ומעדכנים את VAPID_PUBLIC_KEY ואת VAPID_PRIVATE_KEY. מגדירים את VAPID_SUBJECT ל-mailto:[e-mail]. צריך להקיף את כל הערכים האלו במירכאות כפולות. אחרי ביצוע העדכונים, הקובץ .env אמור להיראות כך:

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

1. סוגרים את טרמינל Glitch.

הערכים של משתני הסביבה (הדברים שב-.env) הם ייחודיים לפרויקט Glitch אחד. אם יוצרים רמיקס מהפרויקט, הערכים שבפרויקט .env לא יועתקו.

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

רישום Service Worker

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

1. מחליפים את התגובה // 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);

1. כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen (מסך מלא).

מונח מפתח: במהלך ה-Codelab הזה תיקרא כרטיסיית האפליקציה שפתחת עכשיו.

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

הערה: ההוראה הקודמת מבוססת על ההנחה שאתם משתמשים ב-Google Chrome ובכלי הפיתוח ל-Chrome.

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

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

1. בממשק המשתמש של Glitch, לוחצים על View Source כדי לחזור לקוד.
2. ב-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.');
}

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

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

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

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

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

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

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

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

// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);

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

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

חשוב להבין את הקריאה ל-self.skipWaiting() במאזינים של install של קובץ השירות (service worker). לקבלת הסבר, ראו דילוג על שלב ההמתנה. בלי אותו, השינויים בקוד שתבצעו ב-Service Worker לא ייכנסו לתוקף באופן מיידי. ייתכן שתרצו להשתמש בתכונה הזו באתר שלכם בהתאם לצרכים שלכם, אבל בכל מקרה חשוב להבין את ההשפעה שלה.

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

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

1. מחליפים את התגובה // TODO ב-handler של אירועים מסוג notificationclick של Service Worker בקוד הבא:

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

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

השלבים הבאים

• ב-ServiceWorkerRegistration.showNotification() תוכלו לראות את כל הדרכים השונות שבהן אפשר להתאים אישית את ההתראות.
• כדאי לקרוא את המאמר סקירה כללית של התראות כדי לקבל הבנה עמוקה יותר לגבי אופן הפעולה של ההתראות.
• קראו את המאמר Codelab: בניית שרת התראות כדי ללמוד איך לפתח שרת שמנהל מינויים ושולח בקשות לפרוטוקולי Push.
• כדאי לנסות את מחולל ההתראות כדי לנסות את כל הדרכים להתאמה אישית של ההתראות.