使用網路推播

在擴充功能中，您可以使用任何推送服務提供者傳送推播通知， 訊息。Service Worker 會處理來自 Push API 的推送作業 。如果 Service Worker 已經暫停，推送程序 喚醒它。在擴充功能中使用 如何使用 Google Cloud 進行

取得 Push API 的使用權限

當您在一般網站上註冊 Push 伺服器時， 表示授予或拒絕的權限當使用者輸入提示時 。如要在擴充功能中使用 Push API，需將 manifest.json 中的 notifications 權限

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

如果您缺少這項權限，則 registration.pushManager 會產生立即錯誤，與 使用者拒絕權限要求。此外，請注意， notifications 權限會導致權限警告 顯示的語言Chrome 也會停用 現有的安裝次數，直到使用者核准新的權限要求為止。你可以 想進一步瞭解如何處理這種情況，請參閱 權限警告指南。

推送供應商和推送服務

將權限新增至 manifest.json 後，您必須 設定後端與擴充功能之間的連線。這個連線 兩個部分：推送供應器和推送服務A 罩杯 是您用來將訊息傳送至 Push 服務的 SDK。 選項有很多，所有推送提供者都「可以」處理 Push API (但可能無法提供簡化整合的 SDK)。個人中心 就必須先測試供應商的 SDK，看看能執行哪些作業。推動 服務是使用者註冊的裝置，因此可以收到快訊 推送訊息。雖然 掌控權和控制方式，因為這個方法以硬式編碼的方式寫入個別瀏覽器。Chrome：Firebase 雲端通訊是推送服務。任何推送至 Chrome 的訊息 一律經過轉送

自行託管 Push 提供者

任何推送提供者「可以」運作，但並非所有供應商都提供有效的 SDK 服務工作處理程序如有問題，請向供應商洽詢 保持運作但您不需要使用公用供應商。使用 web-push 等程式庫，您就能代管自己的後端。

如要測試這個程式庫，請使用 web-push-codelab.glitch.me.具體而言，您需要 複製推送伺服器的 VAPID 公開金鑰，以便產生 Push 。這組公開金鑰實際上是 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 後，就可以註冊 推送訊息至擴充功能的 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 的網誌。換 本文提到的範例的完整版本 擴充功能範例存放區。

靜音推送

您可以在 Manifest v3 擴充功能中接收推播通知 。不過，一直以來 使用者應要求通知必須顯示某種使用者提示 例如網頁通知。但這對於某些使用者而言 想將指令或資料更新推送到你的擴充功能中 顯示不必要的資訊。自 Chrome 121 起，擴充功能 可以將 userVisibleOnly 設為 false。您現在可以傳送 不要向使用者顯示推播通知。為了使用這項功能 將 userVisibleOnly 設為 false 時設為呼叫 pushManager.subscribe。

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