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

Kate Jeffreys

Kayce Basques

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

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

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

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

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

ב-push-notifications-client-codelab-complete (מקור) תוכלו לראות את הקוד המלא.

תאימות דפדפן

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

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

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

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

הגדרה

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

לאורך הקודלאב הזה, נעזרים בעורך הקוד שמופיע משמאל להוראות האלה, שנקרא Glitch UI.

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

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

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

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

1. בממשק המשתמש של Glitch, לוחצים על Tools (כלים) ואז על Terminal (טרמינל) כדי לפתוח את הטרמינל של Glitch.
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 Terminal.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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