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

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

  • macOS: Brave, Edge, Safari
  • iOS

ตั้งค่า

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

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

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

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

VAPID_PUBLIC_KEY="BKiwTvD9HA…" VAPID_PRIVATE_KEY="4mXG9jBUaU…" VAPID_SUBJECT="mailto:[email protected]"
  • เปิด public/index.js
  • แทนที่ VAPID_PUBLIC_KEY_VALUE_HERE ด้วยค่าของคีย์สาธารณะ

ลงทะเบียน Service Worker

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

  • แทนที่ความคิดเห็น // TODO add startup logic here ด้วยโค้ดต่อไปนี้
// 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);
  • กด `Control+Shift+J` (หรือ `Command+Option+J` ใน Mac) เพื่อเปิด DevTools
  • คลิกแท็บคอนโซล คุณควรเห็นข้อความ Service worker was registered.ที่บันทึกไว้ในคอนโซล

ขอสิทธิ์ส่งข้อความ Push

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

  • ใน public/index.js ให้แทนที่ความคิดเห็น // TODO ใน subscribeButtonHandler() ด้วยโค้ดต่อไปนี้
// TODO // 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.'); }
  • กลับไปที่แท็บแอป แล้วคลิกสมัครรับข้อมูลแบบพุช เบราว์เซอร์หรือระบบปฏิบัติการอาจถามว่าคุณต้องการอนุญาตให้เว็บไซต์ส่งข้อความ Push หรือไม่ คลิกอนุญาต (หรือวลีที่เทียบเท่า ที่เบราว์เซอร์/ระบบปฏิบัติการของคุณใช้) ในคอนโซล คุณควรเห็นข้อความที่ระบุว่าคำขอได้รับการยอมรับหรือถูกปฏิเสธ

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

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

  • เพิ่มโค้ดที่ไฮไลต์ต่อไปนี้ลงใน 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

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

  • แทนที่ความคิดเห็น // TODO ใน unsubscribeButtonHandler() ด้วยโค้ดต่อไปนี้
// TODO 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 เพื่อจัดการ การรับและแสดงข้อความที่พุชไปยังไคลเอ็นต์ จากเซิร์ฟเวอร์ ดูรายละเอียดเพิ่มเติมได้ที่รับและแสดงข้อความที่พุชเป็น การแจ้งเตือน

  • เปิด public/service-worker.js แล้วแทนที่// TODOความคิดเห็น ในตัวแฮนเดิลเหตุการณ์ push ของ Service Worker ด้วยโค้ดต่อไปนี้
// TODO let data = event.data.json(); const image = 'logo.png'; const options = {   body: data.options.body,   icon: image } self.registration.showNotification(   data.title,    options );
  • กลับไปที่แท็บแอป
  • คลิกแจ้งเตือนฉัน คุณควรได้รับข้อความ Push
  • ลองเปิด URL ของแท็บแอปในเบราว์เซอร์อื่น (หรือแม้แต่ อุปกรณ์อื่น) ทำตามขั้นตอนการสมัครใช้บริการ แล้วคลิกแจ้งเตือนทั้งหมด คุณควรได้รับการแจ้งเตือนแบบพุชเดียวกัน ในเบราว์เซอร์ทั้งหมดที่คุณสมัครใช้บริการ กลับไปที่ความเข้ากันได้ของเบราว์เซอร์เพื่อดูรายการชุดค่าผสมของเบราว์เซอร์/ระบบปฏิบัติการ ที่ทราบว่าใช้ได้หรือใช้ไม่ได้

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

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

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

  • แทนที่// TODOความคิดเห็นในnotificationclick ตัวแฮนเดิลเหตุการณ์ของ Service Worker ด้วยโค้ดต่อไปนี้
// TODO event.notification.close(); event.waitUntil(self.clients.openWindow('https://web.dev'));
  • กลับไปที่แท็บแอป ส่งการแจ้งเตือนให้ตัวเองอีกครั้ง แล้ว คลิกการแจ้งเตือน เบราว์เซอร์ควรเปิดแท็บใหม่และโหลด https://web.dev

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