หน้านี้ได้รับการแปลโดย Cloud Translation API

Codelab: สร้างเซิร์ฟเวอร์ข้อความ Push

Kate Jeffreys

Kayce Basques

Codelab นี้จะแสดงวิธีสร้างเซิร์ฟเวอร์ข้อความ Push แบบทีละขั้นตอน เมื่อสิ้นสุดโค้ดแล็บ คุณจะมีเซิร์ฟเวอร์ที่ทำสิ่งต่อไปนี้ได้

ติดตามการสมัครรับการแจ้งเตือนแบบพุช (เช่น เซิร์ฟเวอร์จะสร้าง บันทึกฐานข้อมูลใหม่เมื่อไคลเอ็นต์เลือกรับการแจ้งเตือนแบบพุช และจะ ลบบันทึกฐานข้อมูลที่มีอยู่เมื่อไคลเอ็นต์เลือกไม่รับ)
ส่งการแจ้งเตือนแบบพุชไปยังไคลเอ็นต์รายเดียว
ส่งการแจ้งเตือนแบบพุชไปยังไคลเอ็นต์ทั้งหมดที่สมัครใช้บริการ

Codelab นี้มุ่งเน้นการช่วยให้คุณได้เรียนรู้จากการลงมือทำและไม่ได้ พูดถึงแนวคิดมากนัก ดูข้อมูลเกี่ยวกับแนวคิดของข้อความ Push ได้ที่ ข้อความ Push ทำงานอย่างไร

โค้ดไคลเอ็นต์ของโค้ดแล็บนี้เสร็จสมบูรณ์แล้ว คุณจะ ติดตั้งใช้งานเซิร์ฟเวอร์ในโค้ดแล็บนี้เท่านั้น หากต้องการดูวิธีติดตั้งใช้งานไคลเอ็นต์ข้อความ Push โปรดดู Codelab: สร้างไคลเอ็นต์ข้อความ Push

ความเข้ากันได้กับเบราว์เซอร์

Codelab นี้ทราบกันดีว่าใช้งานได้กับระบบปฏิบัติการและ เบราว์เซอร์ต่อไปนี้

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

Codelab นี้ใช้ไม่ได้กับระบบปฏิบัติการต่อไปนี้ (หรือการผสมผสานระบบปฏิบัติการและเบราว์เซอร์)

macOS: Brave, Edge, Safari
iOS

สแต็กแอปพลิเคชัน

เซิร์ฟเวอร์สร้างขึ้นบน Express.js
ไลบรารี Node.js web-push จะจัดการตรรกะของข้อความ Push ทั้งหมด
ระบบจะเขียนข้อมูลการติดตามลงในไฟล์ JSON โดยใช้ lowdb

คุณไม่จำเป็นต้องใช้เทคโนโลยีเหล่านี้เพื่อติดตั้งใช้งานการแจ้งเตือนแบบพุช เราเลือกใช้เทคโนโลยีเหล่านี้เนื่องจากมอบประสบการณ์การใช้งาน Codelab ที่เชื่อถือได้

ตั้งค่า

คุณต้องตั้งค่าเซิร์ฟเวอร์และไคลเอ็นต์ด้วยคีย์การตรวจสอบสิทธิ์ก่อนจึงจะทำให้การแจ้งเตือนแบบพุชทำงานได้ ดูเหตุผลได้ที่ลงนามในคำขอโปรโตคอลการแจ้งเตือนแบบพุชบนเว็บ

เรียกใช้ npx web-push generate-vapid-keys ในเทอร์มินัล คัดลอกค่าคีย์ส่วนตัว และคีย์สาธารณะ
เปิด .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"
```
เปิด public/index.js
แทนที่ VAPID_PUBLIC_KEY_VALUE_HERE ด้วยค่าของคีย์สาธารณะ

จัดการการสมัครใช้บริการ

ลูกค้าของคุณจะจัดการกระบวนการสมัครใช้บริการส่วนใหญ่ สิ่งสำคัญที่เซิร์ฟเวอร์ต้องทำคือบันทึกการสมัครรับการแจ้งเตือนแบบพุชใหม่ และลบการสมัครรับข้อมูลเก่า การสมัครใช้บริการเหล่านี้ช่วยให้คุณ ส่งข้อความไปยังไคลเอ็นต์ในอนาคตได้

อ่านสมัครรับข้อความ Push ให้กับไคลเอ็นต์ เพื่อดูบริบทเพิ่มเติมเกี่ยวกับกระบวนการสมัครรับข้อมูล

บันทึกข้อมูลการสมัครใช้บริการใหม่

คลิกลงทะเบียน Service Worker ในแท็บแอป ในช่องสถานะ คุณ ควรเห็นข้อความที่คล้ายกับข้อความนี้
```
Service worker registered. Scope: https://example.com
```
ในแท็บแอป ให้คลิกติดตามเพื่อรับการแจ้งเตือนแบบพุช เบราว์เซอร์หรือระบบปฏิบัติการ อาจถามว่าคุณต้องการอนุญาตให้เว็บไซต์ส่งข้อความ Push หรือไม่
คลิกอนุญาต (หรือวลีที่เทียบเท่าซึ่งเบราว์เซอร์หรือ ระบบปฏิบัติการของคุณใช้) ในช่องสถานะ คุณควรเห็นข้อความต่อไปนี้
```
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
```
หมายเหตุ: URL ของปลายทางจะเปลี่ยนแปลงไปตามเบราว์เซอร์ที่คุณใช้ เช่น ใน Firefox URL จะขึ้นต้นด้วย https://updates.push.services.mozilla.com/
เปิดเทอร์มินัลเพื่อดูบันทึก คุณควรเห็น /add-subscription ตามด้วยข้อมูลบางอย่าง /add-subscription คือ URL ที่ไคลเอ็นต์ส่งคำขอ POST เมื่อต้องการสมัครรับข้อความ Push ข้อมูลต่อไปนี้คือข้อมูลการสมัครใช้บริการของลูกค้าที่คุณต้องบันทึก
เปิด server.js
อัปเดตตรรกะตัวแฮนเดิลเส้นทาง /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);
});

ลบข้อมูลการสมัครใช้บริการเก่า

กลับไปที่แท็บแอป
คลิกยกเลิกการสมัครรับข้อความพุช
ดูบันทึกอีกครั้ง คุณควรเห็น /remove-subscription ตามด้วยข้อมูลการสมัครใช้บริการของลูกค้า

อัปเดตตรรกะตัวแฮนเดิลเส้นทาง /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);
});

ส่งการแจ้งเตือน

ดังที่อธิบายไว้ในส่งข้อความพุช เซิร์ฟเวอร์ของคุณไม่ได้ส่งข้อความพุชไปยังไคลเอ็นต์โดยตรง แต่จะใช้บริการพุชเพื่อดำเนินการดังกล่าว โดยพื้นฐานแล้ว เซิร์ฟเวอร์ของคุณจะเริ่มกระบวนการพุชข้อความไปยังไคลเอ็นต์โดยการส่งคำขอบริการเว็บ (คำขอโปรโตคอลการแจ้งเตือนแบบพุชบนเว็บ) ไปยังบริการเว็บ (บริการพุช) ที่เป็นของบริษัทผู้จำหน่ายเบราว์เซอร์ที่ผู้ใช้ของคุณใช้

อัปเดตตรรกะตัวแฮนเดิลเส้นทาง /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);
});

อัปเดตฟังก์ชัน 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} `);
      });
  });
}

อัปเดตตรรกะตัวแฮนเดิลเส้นทาง /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);
  }
});

กลับไปที่แท็บแอป
คลิกแจ้งเตือนฉัน คุณควรได้รับข้อความ Push ชื่อควรเป็น Hello, Notifications! และเนื้อหาควรเป็น ID: <ID> โดยที่ <ID> เป็น ตัวเลขสุ่ม
เปิดแอปในเบราว์เซอร์หรืออุปกรณ์อื่นๆ ที่รองรับ ลองสมัครรับการแจ้งเตือนแบบพุช แล้วคลิกปุ่มแจ้งเตือนทุกคน คุณควรได้รับการแจ้งเตือนเดียวกันในอุปกรณ์ทั้งหมดที่สมัครใช้บริการ

ขั้นตอนถัดไป

อ่านภาพรวมของข้อความพุช เพื่อทำความเข้าใจแนวคิดเกี่ยวกับวิธีการทำงานของข้อความพุชให้ดียิ่งขึ้น
ดูCodelab: สร้างไคลเอ็นต์การแจ้งเตือนแบบพุช เพื่อดูวิธีสร้างไคลเอ็นต์ที่ขอสิทธิ์การแจ้งเตือน สมัครรับข้อมูล อุปกรณ์เพื่อรับการแจ้งเตือนแบบพุช และใช้ Service Worker เพื่อรับ ข้อความพุชและแสดงข้อความเป็นการแจ้งเตือน