在擴充功能中，您可以使用任何推送服務供應商傳送推送通知和訊息。服務工作人員收到 Push API 的推送後，會立即處理。如果 Service Worker 已暫停，系統會透過推播通知喚醒 Service Worker。在擴充功能中使用這項 API 的程序，與在開放式網路上使用完全相同。
取得 Push API 的使用權限
在一般網站上註冊 Push 伺服器時，系統會向使用者顯示權限提示，要求授予或拒絕權限。系統不會顯示提示的擴充功能。如要在擴充功能中使用 Push API，請在 manifest.json 中設定 notifications 權限。
{
"manifest_version": 3,
...
"permissions": ["notifications"]
如果缺少這項權限，與 registration.pushManager 的任何互動都會立即產生錯誤，與使用者拒絕權限的結果相同。此外，請注意，notifications 權限會導致安裝時顯示權限警告。此外，Chrome 也會停用所有現有安裝的擴充功能，直到使用者核准新的權限要求為止。如要進一步瞭解如何處理這項問題，請參閱權限警告指南。
推送供應商和推送服務
在 manifest.json 中新增權限後，您必須設定後端與擴充功能之間的連線。這個連線可分為兩部分：推送供應商和推送服務。供應商是指您用來將訊息傳送至 Push 服務的 SDK。選項相當多元，任何推送供應商都可與 Push API 搭配使用 (但他們可能不會提供可輕鬆整合的 SDK)。您需要嘗試使用供應商的 SDK，瞭解可行的做法。推送服務是使用者裝置註冊的服務，因此可以接收推送供應商傳送的任何推送訊息。這是您無法控制的項目，因為個別瀏覽器會將這項資訊硬式編碼。Chrome 的推送服務是 Firebase 雲端通訊。推送到 Chrome 使用者的任何訊息都會透過該伺服器傳送。
自行託管推送供應商
任何推送供應商都可運作，但並非所有供應商都提供可在 Service Worker 中運作的 SDK。如有無法運作的問題，請諮詢供應商。不過，您不必使用公開供應商。您可以使用 web-push 等程式庫，自行代管後端。
您可以使用 web-push-codelab.glitch.me 測試這個程式庫。具體來說，您需要複製 Push 伺服器的 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 管理工具
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 後，即可在擴充功能的 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 網誌。如要查看本節涵蓋的完整範例，請前往擴充功能範例存放區。
無聲推送
自 Chrome 88 推出 Manifest V3 以來，您已能在 Manifest V3 擴充功能中接收推播通知。不過，通知一律必須顯示某種使用者可見的提示，例如 Web Notification。如果您想將指令或資料更新推送至擴充功能，但不想以不必要的資訊打擾使用者，這項功能就沒那麼實用。自 Chrome 121 起，擴充功能可以將 userVisibleOnly 設為 false。您現在可以向使用者傳送無聲的非使用者面向推播通知。如要使用這項功能，請在呼叫 pushManager.subscribe 時，將 userVisibleOnly 設為 false。
let subscription = await self.registration.pushManager.subscribe({
userVisibleOnly: false,
applicationServerKey
});