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

Kate Jeffreys
Kate Jeffreys
Kayce Basques

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

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

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

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

ดูโค้ดที่สมบูรณ์ได้ที่ push-notifications-server-codelab-complete (แหล่งที่มา)

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

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

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

เป็นที่ทราบกันดีว่าโค้ดแล็บนี้ไม่ทำงานร่วมกับระบบปฏิบัติการต่อไปนี้ (หรือระบบปฏิบัติการและเบราว์เซอร์ที่ทำงานร่วมกัน)

  • macOS: Brave, Edge, Safari
  • iOS

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

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

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

ตั้งค่า

รับสำเนาโค้ดที่แก้ไขได้

ตัวแก้ไขโค้ดที่คุณเห็นทางด้านขวาของวิธีการเหล่านี้จะเรียกว่า Glitch UI ตลอดทั้งโค้ดแล็บนี้

  1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้

ตั้งค่าการตรวจสอบสิทธิ์

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

  1. เปิดเทอร์มินัลของ Glitch โดยคลิกเครื่องมือ แล้วคลิกเทอร์มินัล
  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 ด้วยค่าของคีย์สาธารณะ

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

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

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

  1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ เต็มหน้าจอ
  1. คลิกลงทะเบียน Service Worker ในแท็บแอป ในช่องสถานะ คุณควรเห็นข้อความที่คล้ายกับข้อความต่อไปนี้
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. กลับไปที่โค้ดโดยคลิกดูซอร์สโค้ดใน UI ของ Glitch
  2. เปิดบันทึกข้อบกพร่องโดยคลิกเครื่องมือ แล้วคลิกบันทึก คุณควรเห็น /add-subscription ตามด้วยข้อมูลบางส่วน /add-subscription คือ URL ที่ไคลเอ็นต์ส่งคำขอ POST ไปเมื่อต้องการสมัครรับข้อความ Push ข้อมูลที่ตามมาคือข้อมูลการสมัครใช้บริการของลูกค้าที่คุณต้องบันทึก
  3. เปิด server.js
  4. อัปเดตตรรกะตัวแฮนเดิลเส้นทาง /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. อัปเดตตรรกะตัวแฮนเดิลเส้นทาง /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 ไปยังไคลเอ็นต์โดยตรง แต่จะใช้บริการ Push แทน โดยพื้นฐานแล้ว เซิร์ฟเวอร์จะเริ่มต้นกระบวนการส่งข้อความไปยังไคลเอ็นต์ด้วยการส่งคำขอบริการเว็บ (คำขอโปรโตคอล Web Push) ไปยังบริการเว็บ (บริการ Push) ที่เป็นของผู้ให้บริการเบราว์เซอร์ที่ผู้ใช้ของคุณใช้

  1. อัปเดตตรรกะตัวแฮนเดิลเส้นทาง /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. อัปเดตตรรกะตัวแฮนเดิลเส้นทาง /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 อีกครั้ง การดำเนินการนี้จำเป็นเนื่องจากดังที่ได้กล่าวไว้ก่อนหน้านี้ว่า Glitch จะรีสตาร์ทโปรเจ็กต์ทุกครั้งที่คุณแก้ไขโค้ดและโปรเจ็กต์ได้รับการกำหนดค่าให้ลบฐานข้อมูลเมื่อเริ่มต้น
  3. คลิกแจ้งเตือนฉัน คุณควรได้รับการแจ้งเตือนแบบ Push ชื่อควรเป็น Hello, Notifications! และเนื้อหาควรเป็น ID: <ID> โดยที่ <ID> เป็นตัวเลขสุ่ม
  4. เปิดแอปในเบราว์เซอร์หรืออุปกรณ์อื่น แล้วลองสมัครรับการแจ้งเตือนแบบพุช จากนั้นคลิกปุ่มแจ้งเตือนทั้งหมด คุณควรได้รับการแจ้งเตือนเดียวกันในอุปกรณ์ทั้งหมดที่สมัครรับข้อมูล (เช่น รหัสในเนื้อหาของข้อความ Push ควรเหมือนกัน)

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

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