簡要說明推播通知的概念、使用原因和運作方式。
什麼是推播通知？
即使使用者未造訪網站，您也能透過推播訊息吸引他們的注意。這類訊息稱為「推播」訊息，因為即使使用者未處於活躍狀態，您也可以「推播」資訊給他們。請比較推送技術與提取技術，進一步瞭解這個概念。
通知會向使用者顯示一小段資訊。網站可透過通知向使用者傳達重要或時效性事件，或使用者需要採取的動作。各平台的通知外觀和風格有所不同：
推播訊息和通知是兩種不同的技術，但彼此相輔相成。推播技術可讓伺服器傳送訊息給使用者，即使他們未主動使用網站也一樣。通知技術會在使用者裝置上顯示推送的資訊。您可以在不使用推送訊息的情況下使用通知。未來或許也能使用推播訊息，而不向使用者顯示通知 (無聲推播)，但目前瀏覽器不允許這麼做。實際上，這兩者通常會一起使用。 非技術人員可能無法理解推播訊息和通知之間的差異。在本系列文章中，所謂的「推播通知」是指推播訊息，然後將訊息顯示為通知。我們所說的推播訊息是指推播技術本身。我們所指的「通知」是通知技術本身。
為什麼要使用推播通知？
- 對使用者而言，推播通知是接收及時、相關和準確資訊的方式。
- 對您 (網站擁有者) 而言，推播通知是提升使用者參與度的方法。
推播通知的運作方式
簡單來說，導入推播通知的主要步驟如下：
- 新增用戶端邏輯，要求使用者授予傳送推播通知的權限，然後將用戶端 ID 資訊傳送至伺服器，以便儲存在資料庫中。
- 新增伺服器邏輯，將訊息推送至用戶端裝置。
- 新增用戶端邏輯，接收已推送至裝置的訊息，並以通知形式顯示。
本頁接下來的部分會進一步說明這些步驟。
取得傳送推播通知的權限
首先，網站必須取得使用者授權，才能傳送推播通知。
這項操作應由使用者手勢觸發，例如點選Do you want to receive push notifications?提示旁的「是」按鈕。確認後，請撥打 Notification.requestPermission()。使用者裝置上的作業系統或瀏覽器可能會顯示某種使用者介面，正式確認使用者是否要啟用推播通知。這個使用者介面會因平台而異。
訂閱用戶端的推播通知
取得權限後，網站必須啟動程序，讓使用者訂閱推播通知。這項作業是透過 JavaScript 進行，使用 Push API。訂閱程序中需要提供公開驗證金鑰，稍後會詳細說明。啟動訂閱程序後，瀏覽器會向稱為「推送服務」的網路服務發出網路要求，稍後您也會進一步瞭解這項服務。
假設訂閱成功，瀏覽器會傳回 PushSubscription 物件。您需要長期儲存這項資料。
通常是將資訊傳送至您控管的伺服器，然後讓伺服器將資訊儲存在資料庫中。
傳送推播訊息
伺服器不會直接將推送訊息傳送給用戶端，推送服務可達成這個目標。推送服務是由使用者瀏覽器供應商控管的網路服務。如要將推播通知傳送給用戶端，您必須向推播服務提出網路服務要求。您傳送至推送服務的網路服務要求稱為「網路推送通訊協定要求」。網路推送通訊協定要求應包含：
- 要在訊息中加入哪些資料。
- 要將訊息傳送給哪個用戶端。
- 推送服務應如何傳送訊息的操作說明。舉例來說，您可以指定推播服務在 10 分鐘後停止嘗試傳送訊息。
一般來說，您會透過自己控管的伺服器發出網路推送通訊協定要求。 當然，伺服器本身不必建構原始的網路服務要求。您可以透過 web-push-libs 等程式庫處理這項作業。但底層機制是透過 HTTP 發出的網路服務要求。
推送服務會接收並驗證要求，然後將推送訊息轉送至適當的用戶端。如果用戶端的瀏覽器處於離線狀態，推送服務會將推送訊息排入佇列，直到瀏覽器連上網路為止。
每個瀏覽器都會使用自己想要的推送服務。身為網站開發人員，你無法控制這點。這不是問題，因為網頁推送通訊協定要求已標準化。換句話說，您不必在意瀏覽器供應商使用的推送服務。您只需要確保網頁推送通訊協定要求符合規格即可。規格中規定，要求必須包含特定標頭，且資料必須以位元組串流的形式傳送。
不過，您必須確保將網頁推送通訊協定要求傳送至正確的推送服務。在訂閱程序中，瀏覽器傳回給您的 PushSubscription 資料會提供這項資訊。PushSubscription 物件如下所示：
{
"endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
"expirationTime": null,
"keys": {
"p256dh": "BGyyVt9FFV…",
"auth": "R9sidzkcdf…"
}
}
endpoint 的網域基本上是推送服務。endpoint 的路徑是客戶 ID 資訊，可協助推送服務準確判斷要將訊息推送給哪個客戶。
keys 用於加密，詳情請見下文。
加密推送訊息
傳送至推送服務的資料必須經過加密。這樣一來，推送服務就無法查看您傳送給用戶端的資料。請注意，瀏覽器供應商會決定要使用哪種推送服務，而理論上，推送服務可能不安全或不穩定。伺服器必須使用keysPushSubscription中提供的keys，加密網路推送通訊協定要求。
簽署網頁推播通訊協定要求
推送服務可防止其他人傳送訊息給您的使用者。從技術上來說，您不一定要這麼做，但 Chrome 最簡單的實作方式需要這麼做。在 Firefox 上，這項設定為選用。其他瀏覽器日後可能也會要求這麼做。
這項工作流程會使用應用程式專屬的私密金鑰和公開金鑰。驗證程序大致如下：
- 您只需執行一次性工作，即可產生私密和公開金鑰。私密金鑰和公開金鑰的組合稱為應用程式伺服器金鑰。您也可能會看到這些金鑰稱為 VAPID 金鑰。VAPID 是定義這項驗證程序的規格。
- 透過 JavaScript 程式碼訂閱用戶端推播通知時，您會提供公開金鑰。當推送服務為裝置產生
endpoint時，會將提供的公開金鑰與endpoint建立關聯。 - 傳送網頁推送通訊協定要求時，您會使用私密金鑰簽署部分 JSON 資訊。
- 當推送服務收到您的網路推送通訊協定要求時，會使用儲存的公開金鑰驗證已簽署的資訊。如果簽章有效，推送服務就會知道要求來自具有相符私密金鑰的伺服器。
自訂推播訊息的傳送方式
網路推播通訊協定要求規格也定義了參數，可供您自訂推播服務嘗試將推播訊息傳送至用戶端的方式。舉例來說，你可以自訂下列項目：
- 訊息的存留時間 (TTL)，定義推送服務應嘗試傳送訊息的時間長度。
- 訊息的緊急程度，如果推送服務只傳送高優先順序訊息，藉此延長用戶端電池續航力，這項資訊就很有用。
- 訊息的主題，會以最新訊息取代任何相同主題的待處理訊息。
接收並以通知形式顯示推播訊息
將網頁推播通訊協定要求傳送至推播服務後，推播服務會將要求排入佇列，直到發生下列其中一個事件為止：
- 用戶端上線，推送服務傳送推送訊息。
- 訊息到期。
用戶端瀏覽器收到推送訊息時，會解密推送訊息資料，並將 push 事件分派至服務工作人員。Service Worker 基本上是 JavaScript 程式碼，即使網站未開啟或瀏覽器已關閉，仍可在背景執行。在服務工作站的 push 事件處理常式中，您會呼叫 ServiceWorkerRegistration.showNotification()，將資訊顯示為通知。
