ใช้ Web Push

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

ขอสิทธิ์ใช้ Push API

เมื่อลงทะเบียนเซิร์ฟเวอร์แบบพุชในเว็บไซต์ปกติ ผู้ใช้จะเห็นข้อความแจ้งเกี่ยวกับสิทธิ์เพื่ออนุญาตหรือปฏิเสธ ส่วนขยายที่พรอมต์จะไม่แสดง หากต้องการใช้ Push API ในส่วนขยาย คุณต้องตั้งค่า notifications ใน manifest.json

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

หากคุณไม่มีสิทธิ์นี้ การโต้ตอบกับ registration.pushManager จะทำให้เกิดข้อผิดพลาดทันที ซึ่งเป็นผลลัพธ์เดียวกันกับกรณีที่ผู้ใช้ปฏิเสธสิทธิ์ นอกจากนี้ โปรดทราบว่าnotifications สิทธิ์จะทำให้คำเตือนเกี่ยวกับสิทธิ์ แสดงขึ้นเมื่อติดตั้ง Chrome จะปิดใช้ส่วนขยายสำหรับการติดตั้งที่มีอยู่จนกว่าผู้ใช้จะอนุมัติคำขอสิทธิ์ใหม่ คุณดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีจัดการปัญหานี้ได้ในคำแนะนำเกี่ยวกับคำเตือนเรื่องสิทธิ์

ผู้ให้บริการพุชและบริการพุช

เมื่อเพิ่มสิทธิ์ลงใน manifest.json แล้ว คุณจะต้อง กำหนดค่าการเชื่อมต่อระหว่างแบ็กเอนด์กับส่วนขยาย การเชื่อมต่อนี้ แบ่งออกเป็น 2 ส่วน ได้แก่ ผู้ให้บริการพุชและบริการพุช ผู้ให้บริการคือ SDK ที่คุณใช้เพื่อส่งข้อความไปยังบริการ Push มีตัวเลือกมากมาย และผู้ให้บริการ Push สามารถใช้ได้กับ Push API (แม้ว่าผู้ให้บริการอาจไม่มี SDK ที่ช่วยให้ผสานรวมได้ง่าย) คุณจะต้องทดสอบ SDK ของผู้ให้บริการเพื่อดูว่าทำอะไรได้บ้าง Push service คือสิ่งที่อุปกรณ์ของผู้ใช้ปลายทางลงทะเบียนไว้ เพื่อให้ระบบแจ้งเตือน ข้อความพุชที่ผู้ให้บริการ Push ส่งมาได้ ซึ่งเป็นสิ่งที่คุณควบคุมไม่ได้ เนื่องจากมีการฮาร์ดโค้ดไว้ในเบราว์เซอร์แต่ละรายการ สำหรับ Chrome Firebase Cloud Messaging คือบริการพุช ระบบจะกำหนดเส้นทางข้อความที่พุชไปยังผู้ใช้ Chrome ผ่านบริการนี้

การโฮสต์ผู้ให้บริการ Push ด้วยตนเอง

ผู้ให้บริการ Push รายใดก็ได้สามารถใช้งานได้ แต่ผู้ให้บริการบางรายไม่มี SDK ที่ใช้งานได้ใน Service Worker คุณจะต้องปรึกษาผู้ให้บริการหากพบปัญหา ในการเรียกใช้ แต่คุณไม่จำเป็นต้องใช้ผู้ให้บริการสาธารณะ การใช้ไลบรารี เช่น web-push จะช่วยให้คุณโฮสต์แบ็กเอนด์ของคุณเองได้

คุณทดสอบไลบรารีนี้ได้โดยใช้ web-push-codelab.glitch.me โดยเฉพาะอย่างยิ่ง คุณจะต้อง คัดลอกคีย์สาธารณะ VAPID ของเซิร์ฟเวอร์พุชเพื่อสร้างการสมัครรับข้อมูลพุช ในเบราว์เซอร์ คีย์สาธารณะนี้เป็นค่าไบนารีที่เข้ารหัส base64 ซึ่งจะต้องถอดรหัสและแปลงเป็น Uint8Array เพื่อลงทะเบียนกับ Push manager ของเบราว์เซอร์ มีไลบรารีที่พร้อมใช้งานเพื่อดำเนินการตามตรรกะนี้ แต่คุณ ต้องมีข้อมูลต่อไปนี้เท่านั้น

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

ระบบจะส่งค่าที่ระบุไปยัง Push Manager

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

ฟังก์ชัน subscribe จะแสดงผล PushSubscription ซึ่งเป็นออบเจ็กต์ที่มีข้อมูลเมตาของเซิร์ฟเวอร์แบบพุช เนื่องจากคุณใช้ web-push-codelab.glitch.me คุณจึงต้องคัดลอกค่านี้ไปยัง ส่วนการสมัครรับข้อความพุชของหน้าเว็บ

เมื่อมี PushSubscription แล้ว คุณก็พร้อมที่จะลงทะเบียน Listener สำหรับ ข้อความพุชใน Service Worker ของส่วนขยาย

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

เมื่อมี Listener แล้ว คุณจะส่งข้อความใน web-push-codelab.glitch.me ได้ และระบบจะบันทึกข้อความลงในคอนโซลของ Service Worker

เนื่องจากเป็นมาตรฐานเว็บแบบเปิด จึงมีเอกสารที่มีอยู่มากมายเกี่ยวกับ วิธีติดตั้งใช้งาน Web Push รวมถึงในบล็อกของ Chrome หากต้องการดูตัวอย่างฉบับสมบูรณ์ที่กล่าวถึงที่นี่ โปรดดูตัวอย่างในที่เก็บตัวอย่างส่วนขยายของเรา

การพุชแบบปิดเสียง

คุณรับข้อความ Push ในส่วนขยาย Manifest V3 ได้ ตั้งแต่มีการเปิดตัว Manifest V3 ใน Chrome 88 อย่างไรก็ตาม ข้อกำหนดที่ว่าการแจ้งเตือนต้องแสดงข้อความแจ้งที่ผู้ใช้มองเห็นได้ เช่น Web Notification นั้นมีมาโดยตลอด ซึ่งทำให้มีประโยชน์น้อยลงมากหากคุณต้องการส่งคำสั่งหรือการอัปเดตข้อมูลไปยังส่วนขยายโดยไม่รบกวนผู้ใช้ด้วยข้อมูลที่ไม่จำเป็น ตั้งแต่ Chrome 121 เป็นต้นไป ส่วนขยาย จะตั้งค่า userVisibleOnly เป็น false ได้ ตอนนี้คุณสามารถส่งข้อความ Push แบบเงียบที่ผู้ใช้ไม่เห็นไปยังผู้ใช้ได้แล้ว หากต้องการใช้ฟีเจอร์นี้ ให้ตั้งค่า userVisibleOnly เป็น false เมื่อโทรหา pushManager.subscribe

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});