Codelab: สร้างไคลเอ็นต์ข้อความ Push

Kate Jeffreys

Kayce Basques

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

• สมัครรับข้อความ Push ให้ผู้ใช้
• รับข้อความ Push และแสดงเป็นข้อความแจ้งเตือน
• ยกเลิกการสมัครรับข้อความ Push ของผู้ใช้

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

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

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

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

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

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

• macOS: Brave, Edge, Safari
• iOS

ตั้งค่า

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

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

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

1. เปิด public/index.js
2. แทนที่ VAPID_PUBLIC_KEY_VALUE_HERE ด้วยค่าของคีย์สาธารณะ

ลงทะเบียน Service Worker

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

1. แทนที่ความคิดเห็น // TODO add startup logic here ด้วยโค้ดต่อไปนี้

   if ('serviceWorker' in navigator && 'PushManager' in window) {
     navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
       console.info('Service worker was registered.');
       console.info({serviceWorkerRegistration});
     }).catch(error => {
       console.error('An error occurred while registering the service worker.');
       console.error(error);
     });
     subscribeButton.disabled = false;
   } else {
     console.error('Browser does not support service workers or push messages.');
   }
   
   subscribeButton.addEventListener('click', subscribeButtonHandler);
   unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
   

2. ใน Chrome ให้เปิดคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ

3. คุณควรเห็นข้อความ Service worker was registered. บันทึกไว้ในคอนโซล

ขอสิทธิ์การแจ้งเตือนแบบพุช

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

1. ใน public/index.js ให้แทนที่ความคิดเห็น // TODO ใน subscribeButtonHandler() ด้วยโค้ดต่อไปนี้

   // Prevent the user from clicking the subscribe button multiple times.
   subscribeButton.disabled = true;
   const result = await Notification.requestPermission();
   if (result === 'denied') {
     console.error('The user explicitly denied the permission request.');
     return;
   }
   if (result === 'granted') {
     console.info('The user accepted the permission request.');
   }
   

2. กลับไปที่แท็บแอป แล้วคลิกสมัครรับข้อความ Push เบราว์เซอร์หรือระบบปฏิบัติการจะถามว่าคุณต้องการให้เว็บไซต์ส่งข้อความ Push หรือไม่

3. เลือกอนุญาต (หรือวลีที่เทียบเท่าซึ่งใช้โดยเบราว์เซอร์หรือระบบปฏิบัติการของคุณ) ในคอนโซล คุณควรเห็นข้อความที่ระบุว่าคำขอได้รับการยอมรับหรือถูกปฏิเสธ

ติดตามข้อความ Push

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

1. เพิ่มโค้ดที่ไฮไลต์ต่อไปนี้ลงใน subscribeButtonHandler()

   subscribeButton.disabled = true;
   const result = await Notification.requestPermission();
   if (result === 'denied') {
     console.error('The user explicitly denied the permission request.');
     return;
   }
   if (result === 'granted') {
     console.info('The user accepted the permission request.');
   }
   const registration = await navigator.serviceWorker.getRegistration();
   const subscribed = await registration.pushManager.getSubscription();
   if (subscribed) {
     console.info('User is already subscribed.');
     notifyMeButton.disabled = false;
     unsubscribeButton.disabled = false;
     return;
   }
   const subscription = await registration.pushManager.subscribe({
     userVisibleOnly: true,
     applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
   });
   notifyMeButton.disabled = false;
   fetch('/add-subscription', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(subscription)
   });
   

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

ค่า applicationServerKey จะอาศัยฟังก์ชันยูทิลิตีที่แปลงสตริง base64 เป็น Uint8Array ระบบจะใช้ค่านี้สำหรับการตรวจสอบสิทธิ์ระหว่างเซิร์ฟเวอร์ของคุณกับบริการพุช

ยกเลิกการสมัครรับข้อความ Push

หลังจากที่ผู้ใช้สมัครรับข้อความ Push แล้ว UI ของคุณต้องมีวิธียกเลิกการสมัครในกรณีที่ผู้ใช้เปลี่ยนใจและไม่ต้องการรับข้อความ Push อีกต่อไป

• แทนที่ความคิดเห็น // TODO ใน unsubscribeButtonHandler() ด้วยโค้ดต่อไปนี้

const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

รับข้อความ Push และแสดงเป็นการแจ้งเตือน

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

1. เปิด public/service-worker.js และแทนที่ความคิดเห็น // TODO ในตัวแฮนเดิลเหตุการณ์ push ของ Service Worker ด้วยโค้ดต่อไปนี้

   let data = event.data.json();
   const image = 'logo.png';
   const options = {
     body: data.options.body,
     icon: image
   }
   self.registration.showNotification(
     data.title,
     options
   );
   

2. กลับไปที่แท็บแอป

3. คลิกแจ้งเตือนฉัน คุณควรได้รับข้อความ Push

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

คุณปรับแต่งการแจ้งเตือนได้หลายวิธี ดูพารามิเตอร์ของ ServiceWorkerRegistration.showNotification() เพื่อดูข้อมูลเพิ่มเติม

เปิด URL เมื่อผู้ใช้คลิกการแจ้งเตือน

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

1. แทนที่ความคิดเห็น // TODO ในแฮนเดิลเหตุการณ์ notificationclick ของ Service Worker ด้วยโค้ดต่อไปนี้

   event.notification.close();
   event.waitUntil(self.clients.openWindow('https://web.dev'));
   

2. กลับไปที่แท็บแอป ส่งการแจ้งเตือนอีกรายการให้ตัวเอง แล้วคลิกการแจ้งเตือนนั้น เบราว์เซอร์ควรเปิดแท็บใหม่และโหลด https://web.dev

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

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