---
# System prepended metadata

title: 推送服務 notifications

---

# 推送服務 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)
 - 