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

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

Kate Jeffreys

Kayce Basques

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

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

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

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

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

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

เป็นที่ทราบกันดีว่า Codelab นี้สามารถทำงานร่วมกับระบบปฏิบัติการและเบราว์เซอร์ต่อไปนี้

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

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

macOS: Brave, Edge, Safari
iOS

ตั้งค่า

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

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

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

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

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

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

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

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

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

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

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

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

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