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

Kate Jeffreys

Kayce Basques

ה-Codelab הזה מראה לך, שלב אחר שלב, איך לפתח שרת התראות. בסוף ה-Codelab יהיה שרת:

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

המטרה של Codelab זו היא לעזור לך ללמוד באמצעות עשייה לדבר על מושגים הרבה. ביצוע צ'ק-אאוט איך פועלות התראות? מידע נוסף על מושגי התראות.

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

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

תאימות דפדפן

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

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

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

• macOS: Brave, Edge, Safari
• iOS

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

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

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

הגדרה

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

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

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

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

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

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

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

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

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

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

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

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

Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/

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

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

1. כדי לחזור לקוד, לוחצים על הצגת מקור בממשק המשתמש של Glitch.
2. כדי לפתוח את יומני Glitch: לוחצים על Tools (כלים) ואז על Logs (יומנים). שלך אמור לראות את /add-subscription ואחריהם כמה נתונים. /add-subscription הוא את כתובת ה-URL שהלקוח שולח פרסום בקשה להרשמה לקבלת התראות. הנתונים מוצגים פרטי המינוי של הלקוח שצריך לשמור.
3. פתיחת server.js.
4. מעדכנים את הלוגיקה של ה-handler של המסלול ב-/add-subscription עם הקוד הבא:

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. לוחצים על ביטול ההרשמה ל-Push.
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 ישירות ללקוחות. במקום זאת, היא מסתמכים על שירות דחיפה כדי לעשות את זה. השרת שלך למעשה פשוט פותח את התהליך של העברת מסרים ללקוחות בקשות שירות (בקשות פרוטוקול דחיפת אינטרנט) לשירות אינטרנט (שירות ה-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. לוחצים על ביטול ההרשמה ל-Push ואז לוחצים שוב על הרשמה ל-Push. לשם כך יש צורך רק כי, כפי שצוין קודם, גליץ' מפעיל מחדש את הפרויקט בכל פעם שעורכים את הקוד, והפרויקט מוגדר למחוק את מסד הנתונים במהלך ההפעלה.
3. לוחצים על אני רוצה לקבל תזכורת. אמורה להופיע התראה. הכותרת צריכה להיות Hello, Notifications! והגוף צריך להיות ID: <ID> כאשר <ID> הוא במספר אקראי.
4. פותחים את האפליקציה בדפדפנים או במכשירים אחרים ומנסים להירשם לקבלת התראות. ואז לוחצים על הלחצן התראות על כל ההודעות. אתם אמורים לקבל את אותה התראה בתאריך כל המכשירים שנרשמת אליהם (כלומר, המזהה בגוף ההתראה) להיות זהה).

השלבים הבאים

• לקרוא את המאמר סקירה כללית בנושא התראות כדי לקבל הבנה עמוקה יותר של המושגים לגבי אופן הפעולה של התראות.
• כדאי לקרוא על Codelab: בניית לקוח התראות כדי ללמוד איך לפתח לקוח שמבקשים הרשאה לשליחת התראות, נרשם המכשיר כדי לקבל התראות, ומשתמש בשירות Service Worker כדי לקבל הודעות שנשלחות מהאפליקציה ולהציג אותן כהתראות.