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

Kate Jeffreys

Kayce Basques

ה-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 במהלך ה-Codelab הזה.

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

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

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

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:test@test.test. צריך לכלול את כל הערכים האלה במירכאות כפולות. אחרי ביצוע העדכונים, הקובץ .env אמור להיראות דומה לזה:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

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

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

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

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

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

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

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

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

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

1. צריך להחליף את התגובה // TODO ב-notificationclick של קובץ השירות הגורם המטפל באירועים עם הקוד הבא:

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

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

השלבים הבאים

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