หน้านี้ได้รับการแปลโดย 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

ตั้งค่า

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

ตัวแก้ไขโค้ดที่คุณเห็นที่ด้านขวาของวิธีการเหล่านี้จะถูกเรียก Glitch UI ทั่วทั้ง 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 ของโปรแกรมทำงานของบริการด้วยโค้ดต่อไปนี้

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