Codelab: יצירת שרת התראות

Kate Jeffreys

Kayce Basques

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

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

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

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

תאימות דפדפן

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

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

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

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

מקבץ אפליקציות

• השרת מבוסס על Express.js.
• ספריית Node.js‏ web-push מטפלת בכל הלוגיקה של ההתראות בדחיפה.
• נתוני המינוי נכתבים לקובץ JSON באמצעות lowdb.

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

הגדרה

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

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

1. פותחים את הטרמינל.
2. בטרמינל, מריצים את הפקודה npx web-push generate-vapid-keys. מעתיקים את הערכים של המפתח הפרטי ושל המפתח הציבורי.
3. פותחים את .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. פתיחת public/index.js.
2. מחליפים את VAPID_PUBLIC_KEY_VALUE_HERE בערך של המפתח הציבורי.

ניהול מינויים

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

שמירת פרטי מינוי חדשים

1. לוחצים על Register service worker (רישום של Service Worker) בכרטיסיית האפליקציה. בתיבת הסטטוס אמורה להופיע הודעה דומה לזו:

Service worker registered. Scope: https://example.com

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

Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…

1. פותחים את הטרמינל כדי לראות את היומנים. אמורה להופיע השורה /add-subscription ואחריה נתונים. ‫/add-subscription היא כתובת ה-URL שהלקוח שולח אליה בקשת POST כשהוא רוצה להירשם לקבלת התראות פוש. הנתונים שמופיעים בהמשך הם פרטי המינוי של הלקוח שצריך לשמור.
2. פתיחת server.js.
3. מעדכנים את הלוגיקה של /add-subscription route handler באמצעות הקוד הבא:

app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

מחיקת פרטי מינוי ישנים

1. חוזרים לכרטיסיית האפליקציה.
2. לוחצים על ביטול ההרשמה לקבלת עדכונים.
3. בודקים שוב את היומנים. הכתובת /remove-subscription צריכה להופיע ואחריה פרטי המינוי של הלקוח.
4. מעדכנים את הלוגיקה של ה-handler של המסלול /remove-subscription באמצעות הקוד הבא:

app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

שליחת התראות

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

1. מעדכנים את הלוגיקה של ה-handler של המסלול /notify-me באמצעות הקוד הבא:

app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});

1. מעדכנים את הפונקציה sendNotifications() באמצעות הקוד הבא:

function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}

1. מעדכנים את הלוגיקה של ה-handler של המסלול /notify-all באמצעות הקוד הבא:

app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});

1. חוזרים לכרטיסיית האפליקציה.
2. לוחצים על אני רוצה לקבל התראות. צריכה להתקבל התראה. הכותרת צריכה להיות Hello, Notifications! והגוף צריך להיות ID: <ID>, כאשר <ID> הוא מספר אקראי.
3. פותחים את האפליקציה בדפדפנים או במכשירים אחרים ומנסים להירשם לקבלת התראות פוש, ואז לוחצים על הלחצן התראה לכולם. ההתראה צריכה להתקבל בכל המכשירים שרשומים למינוי (כלומר, המזהה בגוף ההתראה בדחיפה צריך להיות זהה).

השלבים הבאים

• כדי להבין טוב יותר איך התראות פוש פועלות, מומלץ לקרוא את הסקירה הכללית על התראות פוש.
• במאמר Codelab: Build a push notification client (מעבדת קוד: יצירת לקוח של התראות דחיפה) מוסבר איך ליצור לקוח שמבקש הרשאת התראות, רושם את המכשיר לקבלת התראות דחיפה ומשתמש ב-service worker כדי לקבל הודעות דחיפה ולהציג את ההודעות כהתראות.