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

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

תאימות דפדפן

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

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

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

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

סטאק האפליקציות

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

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

הגדרה

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

  1. בטרמינל, מריצים את הפקודה npx web-push generate-vapid-keys. מעתיקים את הערכים של המפתח הפרטי ושל המפתח הציבורי.

  2. פותחים את .env ומעדכנים את VAPID_PUBLIC_KEY ואת VAPID_PRIVATE_KEY. מגדירים את VAPID_SUBJECT לערך mailto:[email protected]. צריך להוסיף מירכאות כפולות לכל הערכים האלה. אחרי שתעדכנו את הקובץ, הוא אמור להיראות כך:.env

    VAPID_PUBLIC_KEY="BKiwTvD9HA…" VAPID_PRIVATE_KEY="4mXG9jBUaU…" VAPID_SUBJECT="mailto:[email protected]"

  3. פתיחת public/index.js.

  4. מחליפים את VAPID_PUBLIC_KEY_VALUE_HERE בערך של המפתח הציבורי.

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

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

מידע נוסף על תהליך ההרשמה

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

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

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

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

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

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

  4. פותחים את הטרמינל כדי לראות את היומנים. אמורה להופיע ההודעה /add-subscription ואחריה נתונים מסוימים. ‫/add-subscription היא כתובת ה-URL שהלקוח שולח אליה בקשת POST כשהוא רוצה להירשם לקבלת התראות Push. הנתונים שמופיעים בהמשך הם פרטי המינוי של הלקוח שצריך לשמור.

  5. פתיחת server.js.

  6. מעדכנים את הלוגיקה של /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. מעדכנים את הלוגיקה של /notify-me route handler באמצעות הקוד הבא:

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

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

    function sendNotifications(subscriptions) {   // 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} `);       });   }); }

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

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

  4. חוזרים לכרטיסיית האפליקציה.

  5. לוחצים על אני רוצה לקבל התראות. צריכה להתקבל התראה. הכותרת צריכה להיות Hello, Notifications! והגוף צריך להיות ID: <ID>, כאשר <ID> הוא מספר אקראי.

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

השלבים הבאים

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