概略說明推播通知的用途、用途和運作方式。
什麼是推播通知？
推送訊息功能可以讓您利用訊息提醒使用者，即使他們並未使用您的網站。即稱為「推送」push訊息，因為您可以向使用者「推送」資訊，即使使用者未處於使用中狀態也沒問題。您可以將推送技術與提取技術進行比較，進一步瞭解這個概念。
通知會向使用者顯示簡短的資訊。網站可以利用通知，告知使用者重要、具時效性的事件或需要使用者採取的行動。通知的外觀和風格會因平台而異：
推送訊息和通知是兩種相輔相成的技術。推送技術，可從伺服器向使用者傳送訊息，即使對方沒有主動使用您的網站也沒問題。通知是用來在使用者裝置上顯示推送資訊的技術。無需推送訊息，就能使用通知。一天或許也可以在沒有向使用者顯示通知的情況下使用推送訊息 (靜音推送)，但瀏覽器目前不允許這種做法。在實務上通常會搭配使用。非技術人員可能難以瞭解推送訊息與通知之間的差異。在這個集合中，我們所謂的「推播通知」是指推送訊息，然後以通知形式顯示。我們所謂的推送訊息，指的是自行推送技術。所謂的通知，指的是通知技術。
使用推播通知的好處
- 使用者可透過推播通知接收「及時」、「相關」和「精確」的資訊。
- 對您 (網站擁有者) 來說，推播通知是提高使用者參與度的一種方法。
推播通知如何運作？
大致來說，導入推播通知的關鍵步驟為：
- 新增用戶端邏輯，要求使用者授予傳送推播通知的權限，然後將用戶端 ID 資訊傳送至伺服器，以儲存資料庫中的儲存空間。
- 新增伺服器邏輯，以便將訊息推送至用戶端裝置。
- 新增用戶端邏輯，接收已推送至裝置的訊息，並顯示為通知。
本頁其餘部分會詳細說明這些步驟。
取得傳送推播通知的權限
首先，您的網站必須取得使用者同意，才能傳送推播通知。
這項動作應由使用者手勢觸發，例如點選 Do you want to receive push notifications? 提示旁的「Yes」按鈕。確認之後，請呼叫 Notification.requestPermission()。使用者裝置上的作業系統或瀏覽器可能會顯示某種 UI，正式確認使用者想要選擇接收推播通知。這個使用者介面在各平台上有所不同。
為用戶端訂閱推播通知
取得權限後，網站需要啟動使用者訂閱推播通知的程序。方法是使用 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 會用於加密，說明如下。
加密推送訊息
您傳送至推送服務的資料必須經過加密。以防推送服務檢視您傳送至用戶端的資料。請注意，瀏覽器廠商會決定要使用哪一種推送服務，理論上來說，推送服務可能會不安全或不安全。您的伺服器必須使用 PushSubscription 中提供的 keys 來加密其網路推送通訊協定要求。
簽署網路推送通訊協定要求
推送服務可防止他人傳送訊息給您的使用者。嚴格說來，您不必執行這項動作，但若要在 Chrome 上實作最簡單易懂的實作方式，就必須這個標記。在 Firefox 中是選擇性的。但其他瀏覽器未來可能會要求使用。
這個工作流程涉及應用程式專屬的私密金鑰和公開金鑰。驗證程序的運作方式大致如下：
- 您會產生一次性工作並產生私密與公開金鑰。私密與公開金鑰的組合稱為「應用程式伺服器金鑰」。您可能也會看到這些稱為「VAPID 金鑰」。VAPID 是定義此驗證程序的規格。
- 當您訂閱用戶端以從您的 JavaScript 程式碼傳送通知時，您應提供公開金鑰。推送服務為裝置產生
endpoint時，會將提供的公開金鑰與endpoint建立關聯。 - 傳送網路推送通訊協定要求時，您必須使用私密金鑰簽署某些 JSON 資訊。
- 推送服務收到網路推送通訊協定要求時，會使用已儲存的公開金鑰驗證已簽署的資訊。如果簽章有效，推送服務就會知道要求來自有相符私密金鑰的伺服器。
自訂推送訊息的傳送方式
網路推送通訊協定要求規格也會定義一些參數，可讓您自訂推送服務嘗試向用戶端傳送推送訊息的方式。舉例來說，你可以自訂下列項目：
- 訊息的存留時間 (TTL)，定義推送服務嘗試傳送訊息的時間長度。
- 訊息的急迫性，這在推送服務只會傳送高優先順序訊息來保留用戶端的電池續航力時非常實用。
- 訊息主題，會將相同主題的所有待處理訊息替換為最新訊息。
接收推送的訊息並以通知形式顯示
將網路推送通訊協定要求傳送至推送服務後，推送服務會將要求排入佇列，直到發生下列其中一種事件：
- 用戶端已連上網路，推送服務會傳送推送訊息。
- 訊息過期。
用戶端瀏覽器收到已推送的訊息時，會解密推送訊息資料，並將 push 事件分派至服務工作站。Service Worker 基本上是指可在背景執行的 JavaScript 程式碼，即使網站並未開啟或瀏覽器關閉也一樣。在服務工作站的 push 事件處理常式中，您可以呼叫 ServiceWorkerRegistration.showNotification() 以顯示資訊做為通知。
