使用網路推播

在擴充功能中，您可以使用任何推送供應商傳送推播通知和訊息。服務工作站收到來自 Push API 的推送作業時，系統就會盡快處理。如果 Service Worker 已暫停，系統會備份推送作業。在擴充功能中使用這項工具的程序，與在開放網路使用的程序完全相同。

取得使用 Push API 的權限

當您在一般網站上註冊 Push Server 時，系統會向使用者顯示授予或拒絕該伺服器的權限提示。系統不會顯示提示的擴充功能如要在擴充功能中使用 Push API，您必須在 manifest.json 中設定 notifications 權限

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

如果缺少這項權限，與 registration.pushManager 的任何互動都會立即導致錯誤，也就是使用者拒絕授予權限的結果。此外，請注意，notifications 權限會在安裝時顯示權限警告。Chrome 也會停用現有安裝項目的擴充功能，直到使用者核准新的權限要求為止。如要進一步瞭解如何處理這種情況，請參閱「權限警告指南」。

推送供應商和推送服務

將權限新增至 manifest.json 後，您需要設定後端與擴充功能之間的連線。這種連線可以分為兩個部分：推送供應商和推送服務。提供者是指您透過 SDK 將訊息傳送至推送服務時使用的 SDK。方法有很多種，任何推送供應商都「可以」用於 Push API (但可能未提供可讓您輕鬆整合的 SDK)。您需要透過供應商的 SDK 進行實驗，看看能提供哪些項目。推送服務是使用者裝置註冊時使用的服務，因此會收到由推送供應商傳送的任何推送訊息快訊。由於它會以硬式編碼的方式寫入個別瀏覽器中，因此你無法掌控這項設定。Chrome 上的 Firebase 雲端通訊是推送服務。凡是推送給 Chrome 使用者的訊息 都會透過協議轉送

自行託管推送供應商

雖然任何推送供應商「可以」正常運作，但並非所有供應商均提供可在服務工作站中使用的 SDK。如果無法順利執行，請向供應商諮詢。不過，您不必使用公開提供者，您可以使用 web-push 等程式庫代管自己的後端。

您可以使用 web-push-codelab.glitch.me 測試這個程式庫。具體來說，您需要複製 Push 伺服器的 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 後，即可為擴充功能的服務工作站註冊推送訊息的事件監聽器。

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

事件監聽器設定妥當後，您就能在 web-push-codelab.glitch.me 上提交訊息，訊息會登入服務工作站的控制台。

由於這是開放式網路標準，所以現在有許多關於如何實作網路推播的說明文件，包括 Chrome 的網誌。如需本文完整範例，請參考擴充功能範例存放區。

靜音推播

由於 Manifest v3 在 Chrome 第 88 版中推出，因此您可以在 Manifest V3 擴充功能中收到推播通知。不過，通知一律會顯示某種使用者可見的提示，例如網頁通知。如此一來，當您想要推送指令或資料更新至擴充功能時，卻又不想浪費使用者不必要的資訊時，這個方法會大幅降低實用性。自 Chrome 121 起，擴充功能可以將 userVisibleOnly 設為 false。您現在可以向使用者傳送不會向使用者顯示的靜音推播通知。如要使用此功能，請在呼叫 pushManager.subscribe 時將 userVisibleOnly 設為 false。

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