ใช้ Web Push

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

รับสิทธิ์ใช้งาน Push API

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

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

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

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

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

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

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

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

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()}"`);
});

เมื่อมีผู้ฟังพร้อมแล้ว คุณสามารถส่งข้อความใน web-push-codelab.glitch.me และข้อความเหล่านั้นจะเข้าสู่ระบบ คอนโซลของโปรแกรมทำงานของบริการ

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

แบบไร้เสียง

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

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