ใช้ Web Push

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

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

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

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

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

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

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

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

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

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

ระบบจะส่งค่าที่ระบุไปยัง 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 สำหรับข้อความพุชในโปรแกรมทำงานของบริการส่วนขยายของเรา

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 อย่างไรก็ตาม เรากำหนดให้การแจ้งเตือนแสดงข้อความแจ้งที่ผู้ใช้มองเห็นได้อยู่ตลอด เช่น การแจ้งเตือนบนเว็บ วิธีนี้ทำให้มีประโยชน์น้อยลงมากหากคุณต้องการกดคำสั่งหรืออัปเดตข้อมูลไปยังส่วนขยายโดยไม่รบกวนผู้ใช้ด้วยข้อมูลที่ไม่จำเป็น ตั้งแต่ Chrome 121 เป็นต้นไป ส่วนขยายจะตั้งค่า userVisibleOnly เป็น false ได้ ตอนนี้คุณสามารถส่งข้อความ Push แบบเงียบและไม่ต้องแสดงต่อผู้ใช้ไปยังผู้ใช้ได้แล้ว หากต้องการใช้ตัวเลือกนี้ ให้ตั้งค่า userVisibleOnly เป็น false เมื่อคุณเรียกใช้ pushManager.subscribe

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