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

Kate Jeffreys

Kayce Basques

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

• ติดตามข้อความ 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: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. logged to the Console

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

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

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. กลับไปที่แท็บแอป แล้วคลิกสมัครรับการแจ้งเตือนแบบพุช เบราว์เซอร์หรือระบบปฏิบัติการจะถามว่าคุณต้องการอนุญาตให้เว็บไซต์ส่งการแจ้งเตือนแบบพุชถึงคุณหรือไม่

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

ติดตามข้อความ 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

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

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

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

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