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

Kate Jeffreys

Kayce Basques

หากต้องการทำตามโค้ดแล็บนี้ ให้เปิด Glitch นี้ในแท็บที่ 2

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

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

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

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

ดูโค้ดที่สมบูรณ์ได้ที่ push-notifications-client-codelab-complete (แหล่งที่มา)

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

เป็นที่ทราบกันว่าโค้ดแล็บนี้ใช้งานได้กับระบบปฏิบัติการและเบราว์เซอร์ต่อไปนี้

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

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

• macOS: Brave, Edge, Safari
• iOS

ตั้งค่า

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

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

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

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

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

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

1. ใน UI ของ Glitch ให้คลิกเครื่องมือ แล้วคลิกเทอร์มินัลเพื่อเปิดเทอร์มินัล Glitch
2. ในเทอร์มินัล Glitch ให้เรียกใช้ npx web-push generate-vapid-keys คัดลอกค่าคีย์ส่วนตัวและค่าคีย์สาธารณะ
3. ใน UI ของ Glitch ให้เปิด .env แล้วอัปเดต VAPID_PUBLIC_KEY และ VAPID_PRIVATE_KEY ตั้งค่า VAPID_SUBJECT เป็น mailto:[e-mail] ค่าเหล่านี้ทั้งหมดควรอยู่ในเครื่องหมายคำพูดคู่ หลังจากอัปเดตแล้ว ไฟล์ .env ควรมีลักษณะคล้ายกับตัวอย่างต่อไปนี้

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[e-mail]"

1. ปิด Glitch Terminal

ค่าตัวแปรสภาพแวดล้อม (ข้อมูลใน .env) จะไม่ซ้ำกันสำหรับโปรเจ็กต์ Glitch แต่ละโปรเจ็กต์ หากคุณรีมิกซ์โปรเจ็กต์ ระบบจะไม่คัดลอกค่าใน .env

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

ลงทะเบียน Service Worker

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

1. แทนที่ความคิดเห็น // 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);

1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ

คําศัพท์สําคัญ: แท็บที่คุณเพิ่งเปิดจะเรียกว่าแท็บแอปตลอดทั้งโค้ดแล็บนี้

1. กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
2. คลิกแท็บคอนโซล คุณควรเห็นข้อความ Service worker was registered. ที่บันทึกไว้ในคอนโซล

หมายเหตุ: วิธีการก่อนหน้านี้จะถือว่าคุณใช้ Google Chrome และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

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

1. ใน UI ของ Glitch ให้คลิกดูซอร์สโค้ดเพื่อกลับไปที่โค้ด
2. ใน 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.');
}

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

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

สมัครรับข้อความ Push

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

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

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

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

// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);

1. กลับไปที่แท็บแอป
2. คลิกแจ้งเตือนฉัน คุณควรได้รับการแจ้งเตือนแบบ Push
3. ลองเปิด URL ของแท็บแอปในเบราว์เซอร์อื่น (หรือแม้แต่อุปกรณ์อื่น) ทำตามเวิร์กโฟลว์การสมัครใช้บริการ แล้วคลิกแจ้งเตือนทั้งหมด คุณควรได้รับการแจ้งเตือนแบบ Push เดียวกันในเบราว์เซอร์ทั้งหมดที่คุณสมัครรับข้อมูล โปรดกลับไปดูความเข้ากันได้ของเบราว์เซอร์เพื่อดูรายการชุดค่าผสมของเบราว์เซอร์/ระบบปฏิบัติการที่ทราบว่าใช้งานได้หรือไม่ทำงาน

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

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

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

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

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

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

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

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

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