หน้านี้ได้รับการแปลโดย 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 ได้ โปรดดูวิธีลงนามในคำขอโปรโตคอลพุชจากเว็บ

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

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

ใน 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 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

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

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

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

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