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

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

Kate Jeffreys

เคย์เซ บาสก์

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

ติดตามผู้ใช้ข้อความ Push
รับข้อความ 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 คัดลอกคีย์ส่วนตัวและค่าคีย์สาธารณะ
เปิด .env รวมถึงอัปเดต VAPID_PUBLIC_KEY และ VAPID_PRIVATE_KEY ใน UI ของ Glitch ตั้งค่า VAPID_SUBJECT เป็น mailto:test@test.test ค่าทั้งหมดเหล่านี้ควรอยู่ใน เครื่องหมายคำพูดคู่ หลังจากอัปเดตแล้ว ไฟล์ .env ควรมีลักษณะดังนี้

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

ปิดเทอร์มินัล Glitch

ค่าตัวแปรสภาพแวดล้อม (ข้อมูลใน .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 แล้ว คุณต้องส่งไปยังเซิร์ฟเวอร์และเก็บไว้ในฐานข้อมูลในระยะยาว ดูสมัครรับข้อมูลข้อความ 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 และแสดงเป็นการแจ้งเตือน

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

เปิด 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 ของ Service Worker ด้วยรหัสต่อไปนี้

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

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

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

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