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:test@test.test"
  • เปิด 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

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