# 推送服務 notifications

首先先理解一下推送服務 [Web Push](https://hackmd.io/@wtflink515/HyjOvWtO_)

## 取得權限

### 通知
取得瀏覽器通知權限

- 取得通知前先確認瀏覽器有相關功能可註冊
https://web.dev/articles/push-notifications-subscribing-a-user?hl=zh-tw

## 背景運作

### SW 註冊
瀏覽器註冊 Service Worker
註冊 SW 要注意 install 存活

## 訂閱推播

### 取得 PushSubscription 並儲存

SW 內註冊訂閱服務，取得 PushSubscription 物件，將 PushSubscription 記錄到後端

## 後端推送服務

### PushSubscription 推送到 瀏覽器提供商

後端 透過 PushSubscription 資料，將資訊推送到 瀏覽器提供商，由瀏覽器去通知使用者

## 接收推播

### 顯示 PUSH 事件

取得瀏覽器通知權限後，SW 註冊 PUSH 事件，將接收到的 PUSH EVENT 推送到通知裡面顯示

附錄：
- [Custom Service Worker Logic in Typescript on Vite](https://dev.to/wtho/custom-service-worker-logic-in-typescript-on-vite-4f27)
- [Service Worker typings #11781](https://github.com/microsoft/TypeScript/issues/11781)
- [workbox-webpack-plugin](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/)
- [一次性完整学完搭建PWA项目](https://qborfy.com/today/20230301.html)
-