PWA 漸進式網路應用程式 - 2. 使用 FCM 推播通知

10 月 8, 2024

--

前言

PWA 作為網站過度到 App 的應用,熄屏、紅點通知、推播點選進入相對應功能也都可以正常使用,如果不是自己安裝和 App 使用體驗沒有不同。

--

參考資源

--

網頁註冊 FCM 取得身份

 

--

sw.js

 

--

發送端:安裝 web-push

安裝時加上 -g 為使用命令列

取得發送者身份,只要有身份就可以發送,不同電腦也可以共用

推送訊息

  • --endpoint 使用者註冊取得的 endpoint,接收推播的訊息發送的平台,不同的裝置、瀏覽器 endpoint 都不同,例如 Google Chrome 使用 Google 的 FCM (Firebase Cloud Messaging),Microsoft Edge 使用 WNS (Windows Push Notification Service)
  • --key 使用者註冊取得 keys 的 p256dh
  • --auth 使用者註冊取得 keys 的 auth
  • --vapid-pubkey 使用 generate-vapid-keys 取得的 Public Key
  • --vapid-pvtkey使用 generate-vapid-keys 取得的 Private Key
  • --vapid-subject 使用 email (mailto:your@email.com) 或是網址 (https://your-website.com) 申明身份
  • --payload 發送內容,純文字格式隨意,只要接收後可處理,一般都是使用 JSON

--

支援性

推播各家必須使用自己的主機進行,因此 endpoint 就不相同

  • Chrome:https://fcm.googleapis.com/fcm/send/
  • Edge:https://wns2-ln2p.notify.windows.com/w/?token=
  • Firefox:https://updates.push.services.mozilla.com/wpush/v2/
  • Safari:https://web.push.apple.com/

因為 endpoint 主機都是從各自瀏覽器提供,所以反應速度可能會有不同

--

注意事項

  • 修改 sw.js 必須重新啟動瀏覽器

--

範例

--

 557 total views,  2 views today

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。