使用網路推播

在擴充功能中，您可以使用任何推送服務提供者傳送推播通知和訊息。Service Worker 會在收到訊息時立即處理從 Push API 推送的推送作業。如果服務工作站已暫停，則推送會喚醒服務工作站。在擴充功能中使用這項功能的程序，與在開放網站上使用這項功能的程序完全相同。

取得 Push API 的使用權限

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

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

如果您缺少這項權限，則與 registration.pushManager 的任何互動都會立即發生錯誤，這與使用者拒絕權限的結果相同。此外，請注意 notifications 權限會在安裝時顯示權限警告。在使用者核准新權限要求前，Chrome 也會停用所有現有安裝的擴充功能。如要進一步瞭解如何處理這種情況，請參閱權限警告指南。

推送供應器和推送服務

在 manifest.json 中新增權限後，您需要設定後端和擴充功能之間的連線。這項連線可分為兩個部分：推播供應器和推播服務。提供者是指您用於將訊息傳送至推送服務的 SDK。您可以選擇多種不同的選項，任何 Push 供應商都可以使用 Push API (但他們可能不會提供可輕鬆整合的 SDK)。您必須嘗試供應商的 SDK，才能瞭解可行的做法。推送服務是使用者裝置的註冊項目，因此可在推送訊息提供者傳送的任何推送訊息時收到快訊。這是硬式編碼至個別瀏覽器的內容，因此您無法控制。在 Chrome 中，Firebase 雲端訊息是推播服務。所有推送至 Chrome 使用者的訊息都會透過此管道傳送。

自行代管推播供應器

任何推送提供者「可以」運作，但並非所有供應商都提供可在服務工作站中使用的 SDK。如果無法順利執行，請務必洽詢您的供應商。但您不需要使用公用供應商。您可以使用 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;
}

系統會將提供的值傳遞至推播管理工具

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 Subscription」部分。

取得 PushSubscription 後，您就可以在擴充功能的服務工作程式中註冊推播訊息的事件監聽器。

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

有了事件監聽器，您就可以在 web-push-codelab.glitch.me 上提交訊息，系統會將訊息記錄到服務工作者的資訊主頁。

由於這是開放式網路標準，因此網路上有許多說明如何導入網路推播的現有文件，包括 Chrome 的部落格。如需這裡所述範例的完整版本，請前往擴充功能範例存放區查看。

靜默推送

自從 Chrome 88 推出 Manifest v3 以來，您已可在 Manifest v3 擴充功能中接收推播通知。不過，通知一向都必須顯示某種使用者可見的提示，例如網頁通知。如果您想將指令或資料更新推送到擴充功能，同時避免對使用者造成不必要的困擾，這種做法會降低實用性。自 Chrome 121 起，擴充功能可以將 userVisibleOnly 設為 false。您現在可以向使用者傳送靜默的非使用者介面推播通知。如要使用此功能，請在呼叫 pushManager.subscribe 時將 userVisibleOnly 設為 false。

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