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

Kate Jeffreys

Kayce Basques

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

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

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

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

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

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

תאימות דפדפן

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

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

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

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

הגדרה

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

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

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

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

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

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

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

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

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.

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 במטפל האירועים notificationclick של ה-service worker בקוד הבא:

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

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

השלבים הבאים

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