หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Kate Jeffreys

Kayce Basques

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 ตลอดทั้งโค้ดแล็บนี้

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

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

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

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

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

ปิด Glitch Terminal

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

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

ลงทะเบียน Service Worker

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

แทนที่ความคิดเห็น // 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) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
คลิกแท็บคอนโซล คุณควรเห็นข้อความ Service worker was registered. ที่บันทึกไว้ในคอนโซล

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

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

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

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

แทนที่ความคิดเห็น // 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 เป็นข้อความแจ้งเตือน

เปิด 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
);

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

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

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

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

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

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

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

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

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

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