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

Kate Jeffreys

Kayce Basques

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

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

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

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

โปรดดู 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 จะจัดการตรรกะข้อความ Push ทั้งหมด
• ระบบจะเขียนข้อมูลการสมัครใช้บริการลงในไฟล์ JSON โดยใช้ lowdb

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

ตั้งค่า

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

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

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

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

ก่อนที่คุณจะใช้งานข้อความ 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 ใหม่ และลบการสมัครใช้บริการเก่า การสมัครใช้บริการเหล่านี้ช่วยให้คุณทำสิ่งต่อไปนี้ได้ ข้อความให้กับลูกค้าในอนาคต ดูสมัครรับข้อมูลข้อความ Push จากลูกค้า เพื่อดูบริบทเพิ่มเติมเกี่ยวกับ กระบวนการสมัครใช้บริการ

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

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. กลับไปที่โค้ดโดยคลิกดูซอร์สใน Glitch UI
2. เปิดบันทึกข้อบกพร่องโดยคลิกเครื่องมือ แล้วคลิกบันทึก คุณ ควรเห็น /add-subscription ตามด้วยข้อมูลบางส่วน /add-subscription คือ URL ที่ไคลเอ็นต์ส่ง โพสต์ เมื่อได้รับการแจ้งเตือนแบบพุช ข้อมูลที่ นี่คือข้อมูลการสมัครใช้บริการของลูกค้าที่คุณต้องบันทึก
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. ดูบันทึก Glitch อีกครั้ง คุณควรเห็น /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);
});

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

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

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

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

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