# [研究]利用Service Worker推播通知
###### tags: `article`

Created: April 9, 2021 2:00 PM


# 簡介

Service Worker 是瀏覽器可以獨立在網頁後臺運行的腳本，可以藉由他來做有關推播通知或同步的功能，也可以攔截跟處理網路請求，實現網頁關閉後也可以主動推播通知的功能

## Service Worker & 通知功能 支援度

運用Service Worker進行通知在不同的瀏覽器上會有不同的效果，目前在macOS的safari上會需要改用 Safari Push Notifications，在 IOS則所有的瀏覽器都無法使用IOS的通知。

- mac專用通知 Safari Push Notifications → [https://developer.apple.com/notifications/safari-push-notifications/](https://developer.apple.com/notifications/safari-push-notifications/)
- mac有service worker 但是其中沒有subscribe 功能 所以需要safari專用的通知功能製作
- 後端也需要拆分safari與其他瀏覽器不同的通知流程(資料結構不同)
- 目前只作用在mac上面 Iphone手機實測都是沒有效果

- 其他瀏覽器支援 Web PushManager → [https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe](https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe)

- 以[https://pushalert.co/demo](https://pushalert.co/demo) 網站進行通知測試
- web chrome firefox → 有通知
- safari → 瀏覽器只有在MacOs內能夠成功通知
- ios → 在所有ios系統下的瀏覽器通通無法進行通知
- android chrome firefox → 有通知

# 生命週期


# 實作流程
:::info
Server Worker 只會做用在localhost 跟有ssl 憑證的網站上
實作環境：
nuxt.js 的 node express框架
— npm 套件 —
web-push
@nuxtjs/pwa
:::

## 後端部分

安裝npm中web-push套件來生成綁定單一Service Worker所需要的公鑰，在terminal 中輸入./node_modules/.bin/web-push generate-vapid-keys生成一組新的公私金鑰，並設定webpush的資料驗證。


待驗證 → mail部分可以將錯誤訊息寄到該位置

之後就可以開一個接口負責有關推播的動作，因為沒有串接資料庫，所以將要給通知要顯示的資料寫在payload，之後再利用webpush套件將資料用sendNotification夾帶驗證資訊跟payload一起送出


## 前端部分

在要使用Service Worker 必須現在頁面上用JS進行註冊(register)，註冊後就會在dev tool中的Application > Service Worker中看到你的服務會被記錄到上面


註冊完後還需要使用者允許通知才可以傳送推播通知得功能，可以運用Notification.requestPermission跳出詢問視窗，允許為granted



兩者皆有成功才會能夠推播通知

### 註冊

註冊你的腳本到Service Worker上


### nuxt.config.js檔案設定

在config中需要設定你的Service Worker檔案 他可以幫你管理所有的Service Worker狀態


### Service Worker訂閱資料

註冊完之後，需要傳送該瀏覽器的訂閱資料到後端，讓後端有此訂閱資料才可以用來主動推播，而訂閱資料需要有後端所生成的公鑰包進資料中


如果已經有訂閱資料在瀏覽器中，也是有效可以作為推播通知的資料

都成功後就可以戳api給後端，將資料記錄到資料庫等等


### Service Worker內容

在static中建立一份JS檔案作為Service Worker的腳本做使用，裡面負責監聽後端api回傳資訊，監聽事件為push


監聽到事件後，運用Notification製作系統通知並發送

# Notifications API介紹

## Notification()

- 不支援在所有IOS瀏覽器上，macOS內的瀏覽器支援但僅限於基本功能，並無自訂義衍生選項or 字定義icon
- 無須註冊Service Worker僅需取得推播權限即可

## showNotification()

- 不支援在所有IOS瀏覽器以及MacOS 的Safari無法使用
- 需註冊於Service Worker才可創建的通知
- 具備Option可以設訂自定義選項如網站“ icon圖示” “下拉式選項or” “振動模式”等等（詳情可以參照[https://ithelp.ithome.com.tw/articles/10196736](https://ithelp.ithome.com.tw/articles/10196736)）

# 坑的部分

- 訂閱資訊會因為使用者重新開啟分頁，重整，伺服器重啟等動作會變成新的訂閱資訊 後端需要重新紀錄，否則會有傳送訊息部分的error
- 在Service Worker中，用new Notification() 的function 無法作動，目前還不確定原因，只有用self.registration.showNotification才會有作用
- Notification API支援度使用前需要確認需求再來確定支援範圍，由於IOS政策手機推播是不支援瀏覽器的在功能需求前須先確認是否考慮IOS用戶。
- Service Worker 在上線後盡量不要更改該檔名，避免之後上限會導致前一個Service Worker 會無法註銷的狀況發生 參考 → [https://zhuanlan.zhihu.com/p/51118741](https://zhuanlan.zhihu.com/p/51118741)

# 參考資料

- [https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle)
- [https://developers.google.com/web/fundamentals/primers/service-workers/registration?hl=zh-cn](https://developers.google.com/web/fundamentals/primers/service-workers/registration?hl=zh-cn)