ใช้ Web Push

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

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

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

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

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

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

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

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

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

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

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;
}

ค่าที่ระบุจะส่งผ่านไปยังตัวจัดการพุช

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 ซึ่งเป็นออบเจ็กต์ที่มีข้อมูลเมตาของเซิร์ฟเวอร์ Push เนื่องจากคุณใช้ web-push-codelab.glitch.me คุณจึงต้องคัดลอกค่านี้ไปยังส่วนการสมัครรับข้อมูล Push ของหน้า

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

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

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

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

Push แบบไม่แสดงเสียง

คุณสามารถรับข้อความ 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
});