現已支援跨瀏覽器推播通知

向使用者提供及時且實用的通知。

Thomas Steiner

推播通知是在 2016 年上統一的標準，發布了 Push API 和 Notification API，後者屬於 W3C 網頁應用程式工作團隊的一部分。這些 API 為網頁程式開發人員提供必要的功能，可將推播通知整合至網頁應用程式，使用者也可以在網路瀏覽器上接收通知並進行互動。推送訊息是指從使用者先前已授予傳送通知權限的網站或應用程式，傳送至使用者網頁瀏覽器的通知。這些訊息可用於提醒使用者有新內容或更新、提醒他們即將到來的活動或截止期限，或提供其他重要資訊。推播訊息特別適合需要向使用者提供即時相關資訊的應用程式，例如新聞或運動應用程式，或是想傳送特價或特賣資訊的電子商務網站。

如要申請使用推播通知，請先檢查 navigator 和 window 物件中的 serviceWorker 和 PushManager 物件，確認瀏覽器是否支援這些功能。

如果支援推播通知，請使用 async 和 await 關鍵字註冊服務工作者，並訂閱推播通知。以下範例說明如何使用 JavaScript 執行這項操作：

// Check if the browser supports push notifications.
if ("serviceWorker" in navigator && "PushManager" in window) {
  try {
    // Register the service worker.
    const swReg = await navigator.serviceWorker.register("/sw.js");

    // Subscribe for push notifications.
    const pushSubscription = await swReg.pushManager.subscribe({
      userVisibleOnly: true
    });

    // Save the push subscription to the database.
    savePushSubscription(pushSubscription);
  } catch (error) {
    // Handle errors.
    console.error("Error subscribing for push notifications.", error);
  }
} else {
  // Push notifications are not supported by the browser.
  console.error("Push notifications are not supported by the browser.");
}

延伸閱讀

• 推播通知總覽
• Push API
• iOS 和 iPadOS 網頁版適用的網頁推送功能