--
前言
PWA 作為網站過度到 App 的應用,熄屏、紅點通知、推播點選進入相對應功能也都可以正常使用,如果不是自己安裝和 App 使用體驗沒有不同。
--
支援性
iOS 必須要 16.4 以上的版本,也就是 iPhone 14 以下都必須升級系統才可以支援
--
參考資源
- 你知道這是什麼嗎? Chrome extension MV3 With Vite - Day8 Service Worker 訂閱推播 - iT 邦幫忙
- Day27-Push Notification之成為訂閱用戶(Firebase實作) - iT 邦幫忙
- Day28-Push Notification伺服器推播訊息實作 - iT 邦幫忙
--
網頁註冊 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 必須重新啟動瀏覽器
--
範例
- pushpad.xyz/service-worker.js
- ecpay.com.tw/Scripts/BrowserMessage/BrowserMessage.js
- ecpay.com.tw//Scripts/BrowserMessage/service-worker.js
--
1,401 total views, 1 views today