avatar

張志豪

更新：2026-10-22

預計閱讀 5 分鐘

當使用者離開網站後，如何讓他們及時掌握訂單進度、預約提醒或訂閱內容？PWA（漸進式網頁應用程式）除了提供接近原生 App 的使用體驗，也能透過推播通知，在取得使用者同意後傳遞更新，引導他們回到相關頁面，無需另外開發原生 App。

不過，PWA 推播的接入方式與使用條件會因平台而異。例如，iPhone／iPad 自 iOS／iPadOS 16.4 起支援主畫面 Web App 推播，使用者需先將網站加入主畫面，再從圖示開啟並授權通知。本文將介紹各平台的支援條件，並以 EngageLab WebPush 為例，說明接入步驟、測試流程與常見問題的排查方法。

PWA 可以發送推播通知嗎？

PWA（漸進式網頁應用程式）完成推播接入並取得使用者授權後，即可在支援的瀏覽器與作業系統上傳送通知，用於訂單更新、預約提醒、商品補貨或新內容發布。使用者點擊通知後，可直接前往對應頁面查看詳情。

PWA 以網頁技術建立，能提供加入主畫面、獨立視窗等接近原生 App 的使用體驗。但安裝 PWA 不等於啟用推播：安裝、離線存取與推播通知是不同功能，需要各自設定與測試。若希望使用者離開頁面後仍能收到更新，還需完成推播訂閱與發送流程。

PWA 推播如何運作？

「推播」負責將訊息傳送到裝置，「通知」則負責將訊息顯示給使用者。只在網頁上顯示通知，並不代表已完成遠端推播；完整的流程需要由伺服器發送訊息，再透過使用者的訂閱資訊傳遞至裝置。

PWA 推播主要透過推播介面、通知介面與背景服務程式協同運作。網站前端負責取得使用者授權並建立訂閱，後端或推播平台負責發送訊息，背景服務程式則接收推播並顯示通知，讓使用者不必持續停留在原頁面，也能收到更新。

pwa推播通知運作流程

PWA 推播支援哪些裝置與瀏覽器？

相同網站在不同裝置上，可能有不同的安裝與授權流程。開發時應檢查功能是否可用，再以實際目標裝置測試，避免僅憑瀏覽器名稱判斷。

使用環境 接入重點 測試方式
iPhone／iPad iOS／iPadOS 16.4 以上；Web App 加入主畫面後，從主畫面開啟並由使用者操作觸發授權。 確認開啟的是獨立 Web App，並檢查系統通知設定。
Android 選用支援 Web Push 的瀏覽器；是否需要安裝 PWA，取決於瀏覽器與接入方案。 檢查站點權限、作業系統通知設定及背景接收結果。
Windows／macOS 桌面瀏覽器 確認目前瀏覽器版本、作業系統及所用推播服務的支援範圍。 分別測試頁面開啟、切到背景及通知點擊跳轉。

iOS 的版本與主畫面條件可參考 WebKit 官方說明。平台能力與 SDK 接入支援是兩個層次，上線前也要確認推播服務對目標環境的支援情況。

開發者要準備哪些 PWA 設定？

為網站提供 Web App Manifest，配置名稱、圖示、啟動網址及顯示模式；在 iOS 主畫面 Web App 的情境，可依 WebKit 說明設定 display 為 standalone 或 fullscreen。完成後要重新以實機檢查啟動效果，而不是只確認檔案存在。

iOS 主畫面 Web App 使用標準 Web Push 時，不需要僅為此功能加入 Apple Developer Program。若採用第三方服務，仍需完成該服務要求的應用與域名配置。

實作 PWA 推播前，需要準備什麼？

先確認以下條件，避免把部署或權限問題誤判為發送失敗。首次測試只需要少量測試裝置，不必先累積大量使用者。

  • 可存取的 HTTPS 網站：依 EngageLab 接入要求，以實際域名完成整合與裝置測試。
  • 網站部署權限：能新增 SDK 檔案、調整頁面程式，並檢查 Service Worker 路徑。
  • PWA 安裝設定：準備 Manifest、圖示與啟動網址；iOS 需驗證加入主畫面後的開啟方式。
  • 應用配置：準備 WebPush AppKey、接入域名與目前下載的 SDK 套件。
  • 測試條件：至少一部目標裝置、一個可開啟的通知目標頁，以及可查看錯誤與發送結果的工具。

選擇自建 Web Push，還是使用推播平台？

自建方案適合希望自行掌握訂閱儲存與發送邏輯的團隊，也需要維護金鑰、失效訂閱與發送錯誤。推播平台方案則可將接入、裝置管理與營運發送集中處理；選擇時應核對目標平台支援、既有 Worker 的整合方式，以及團隊需要的控制台與 API 能力。

如何使用 EngageLab 推播平台完成第一則 PWA 推播？

EngageLab WebPush 是網頁推播服務平台，協助網站與 PWA 接入通知功能，並透過控制台或 API 發送訊息。完成接入後，團隊可管理推播對象、建立通知及查看發送紀錄，用於訂單更新、內容訂閱與行銷提醒等情境。

engagelab pwa 推播通知平台

以下將從網站設定開始，帶你完成裝置註冊、通知授權與第一則測試推播。SDK 檔名、參數及控制台操作，請以當前官方接入指南及下載套件為準。

  • 1

    確認接入域名與測試頁面

    準備可從測試裝置存取的 HTTPS 網站、網站部署權限，以及 Android、iPhone 或桌面測試裝置。依 EngageLab 接入要求，使用可存取的 HTTPS 域名測試，避免以本機檔案預覽代替正式接入驗證。

    完成標準：測試裝置可開啟網站，憑證正常，PWA 能以預期模式啟動。

  • 2

    建立 WebPush 應用並設定域名

    登入 EngageLab，建立 WebPush 應用並取得 AppKey，再於整合設定填入接入域名。核對實際測試網址是否與配置一致，尤其是子域名與測試、正式環境的差異。

    完成標準：應用與接入域名已保存，開發者能確認目前使用的是哪個環境的 AppKey。

    engagelab集成設定網站整合
  • 3

    部署 SDK 與 Service Worker

    從控制台下載目前的 Web SDK，按照隨附範例引入 SDK 並部署 Service Worker。確認檔案可直接存取、回傳正確內容，且作用範圍涵蓋需要接收推播的頁面。

    若 PWA 已有用於離線快取的 Service Worker，先檢查它與推播 Worker 的作用範圍。不要直接覆蓋現有檔案；應依套件整合方式處理，並重新驗證離線與通知功能。

    完成標準：瀏覽器開發者工具可確認 Worker 狀態正常，沒有載入錯誤或範圍衝突。

    engagelab 下載web sdk
  • 4

    初始化並取得通知授權

    依官方範例配置 AppKey、使用者識別與初始化回呼。使用者識別應能對應你的訂閱管理需求；不要讓所有裝置共用同一個測試識別值。

    在顯示訂閱入口前，可先執行以下功能偵測。這段程式只判斷傳統 Web Push 所需 API 是否存在，不會接入 EngageLab、不會要求授權，也不代表通知一定能送達。

    // 前端功能偵測範例
const hasPushApis =
  window.isSecureContext &&
  'serviceWorker' in navigator &&
  'PushManager' in window &&
  'Notification' in window;

const permission = 'Notification' in window
  ? Notification.permission
  : 'unsupported';

console.log({ hasPushApis, permission });
// hasPushApis 為 true 後，仍需完成 SDK 初始化、授權與實機測試。

    訂閱按鈕應說明通知用途，再由使用者點擊觸發 SDK 的授權流程。區分尚未選擇、已允許、已拒絕三種狀態；SDK 方法與回呼可查閱 Web SDK API 文件。

    engagelab webpush 通知授權

    完成標準：權限狀態與裝置註冊結果均可確認，並取得用於測試發送的裝置識別資訊。初始化成功本身不能代替接收測試。

  • 5

    只向測試裝置發送第一則通知

    建立一則測試通知，填寫標題、正文與目標網址，將對象限制為剛完成註冊的測試裝置。先確認畫面呈現和跳轉，再擴展到實際訂閱群組。

    標題：測試成功：你的 PWA 已啟用通知
    內容：點擊這則通知，確認是否返回測試頁面。
    目標頁面：網站內可公開存取的測試結果頁。

    engagelab測試pwa推播通知

    完成標準：目標裝置收到通知，點擊後到達正確頁面；必要時登入後仍能返回原目標。

  • 6

    驗證背景接收與後續管理

    分別在頁面開啟、切到背景與鎖定畫面等情境測試，記錄作業系統、瀏覽器版本、權限及發送時間。背景與顯示行為受系統設定影響，不能把單次成功視為所有裝置都會即時收到。

    上線前也應檢查退訂入口、失效訂閱處理、通知點擊追蹤與頻率限制。後端發送憑證應留在伺服器端，不能放入公開頁面的前端程式。

開始驗證你的 PWA 推播流程

先建立 WebPush 應用，完成一部裝置的授權、註冊、接收與點擊測試，再規劃正式發送。

建立 WebPush 應用

PWA 推播通知範例與發送策略

PWA 推播通知範例

有效的通知應讓使用者一眼知道「發生什麼事」與「點擊後能做什麼」。以下為文案示例，並非實際客戶成效或送達保證。

情境與觸發條件通知文案範例點擊目的地
訂單已出貨你的訂單已出貨
物流資訊已更新，點擊查看配送進度。		對應訂單的物流頁
已訂閱商品補貨你關注的商品補貨了
先前訂閱的款式已重新上架，查看目前庫存。		對應商品與規格頁
訂閱主題有新內容本週開發快訊已更新
你訂閱的前端技術精選已上線，查看本期重點。		本期內容頁
預約時間即將到來你的預約即將開始
請確認時間與地點；如需調整，可前往預約頁。		對應預約詳情頁

通知頻率怎麼設定？

交易更新依實際事件觸發；行銷通知則依訂閱偏好、內容價值與互動表現調整。不宜對所有網站套用固定的每日或每週次數。可以提供通知分類、暫停或退訂選項，並避免不同活動在短時間內重複觸達同一使用者。

評估時除了發送量，也要查看點擊、退訂與後續行動。例如補貨提醒可觀察商品頁瀏覽及購買，預約提醒則可觀察確認或改期。比較成效時，應統一統計口徑與觀察期間。

PWA 推播通知常見問題

  • 1

    PWA 可以向 iOS 發送推播通知嗎？

    可以。iOS／iPadOS 16.4 以上支援主畫面 Web App 的 Web Push。使用者需要加入主畫面、從主畫面開啟，並透過直接操作授予通知權限；一般瀏覽器分頁不應視為相同的使用情境。

  • 2

    使用者一定要安裝 PWA 才能接收網頁推播嗎？

    不一定，須視平台而定。部分桌面與 Android 瀏覽器可在網站取得同意後接收 Web Push；iOS／iPadOS 則需依主畫面 Web App 的條件處理。

  • 3

    關閉 PWA 頁面後，還能收到通知嗎？

    在支援的環境下，Web Push 可在頁面未開啟時運作。但系統權限、瀏覽器狀態、網路與省電設定等都可能影響接收或顯示，應以目標裝置測試結果為準。

  • 4

    PWA 推播一定要自己建立發送伺服器嗎？

    可自行建置標準 Web Push 發送與訂閱管理，也可使用推播平台。採用 EngageLab 等服務時，仍需完成網站端的接入、授權與註冊，不能只建立控制台發送任務。

  • 5

    只有少量使用者，可以先測試 PWA 通知嗎？

    可以。接入並不以大量使用者為前提；先用測試裝置驗證，再逐步開放訂閱，更容易檢查設定與接收結果。

  • 6

    PWA 推播通知可以加入圖片或操作按鈕嗎？

    呈現能力依作業系統、瀏覽器與發送服務而異。不要假設所有裝置都會顯示相同版型；重要訊息應能僅靠標題與正文表達，圖片與按鈕則另做實機驗證。

  • 7

    FCM、自建 Web Push 與 EngageLab 可以直接共用接入程式嗎？

    不應直接混用。不同方案的初始化、註冊識別與發送配置不同；若既有 PWA 已接入另一個服務，先盤點 Worker、訂閱與使用者對應，再規劃整合或遷移，避免重複註冊與重複發送。

  • 8

    iPhone／PWA 已允許通知，為什麼還是收不到？

    授權成功不代表已完成推播註冊。請依序檢查裝置支援、通知權限、SDK 註冊、目標裝置與發送結果。iPhone 需從主畫面開啟 Web App，並確認系統通知與專注模式未阻擋顯示。

結論

PWA 推播能協助企業將網站互動延伸至訂單提醒、內容更新與使用者召回。導入時，應先確認目標裝置的支援條件，完成授權、註冊與接收測試，再依業務需求建立分眾與觸發規則，並透過點擊、退訂及轉換表現持續調整。

若企業希望集中管理推播接入與日常發送，可透過 EngageLab WebPush，從一個明確的業務場景開始驗證，再逐步擴展至更多使用者與通知情境。

開始設定 EngageLab WebPush