登入 API 前，讓我們先從概略的層面開始，先從頭到尾完成。在後續說明個別主題或 API 的過程中，您將會瞭解這些主題與重要性。
推送功能的三個主要步驟如下：
- 新增用戶端邏輯，以訂閱使用者要推送的訊息 (也就是網頁應用程式中註冊使用者推送訊息的 JavaScript 和 UI)。
- 來自後端 / 應用程式的 API 呼叫，可觸發推送訊息至使用者裝置的 API。
- 推送裝置抵達裝置時，接收「推送事件」的 Service Worker JavaScript 檔案。這個 JavaScript 可讓您顯示通知。
讓我們仔細看看這些步驟的重點。
步驟 1：用戶端
第一步是「訂閱」使用者推送訊息。
訂閱使用者需要兩件事，首先，向使用者取得權限，以便傳送推送訊息。第二，從瀏覽器取得 PushSubscription。
PushSubscription 包含傳送推送訊息給使用者所需的所有資訊。您可以把這個 ID 想成使用者裝置的 ID。
這些動作全都在 JavaScript 中透過 Push API 完成。
訂閱使用者之前，您需要產生一組「應用程式伺服器金鑰」，我們會在稍後說明。
應用程式伺服器金鑰 (又稱為 VAPID 金鑰) 專屬於您的伺服器。如此一來，推送服務即可得知使用者訂閱的是哪個應用程式伺服器，並確保該伺服器是觸發推送訊息給使用者的相同伺服器。
訂閱使用者並擁有 PushSubscription 後，您必須將 PushSubscription 詳細資料傳送至後端 / 伺服器。在伺服器上，請將這個訂閱項目儲存至資料庫，並使用該資料庫傳送推送訊息給使用者。
步驟 2：傳送推送訊息
如要向使用者傳送推送訊息，您需要對推送服務發出 API 呼叫。這個 API 呼叫將包含要傳送哪些資料、要傳送訊息的對象，以及有關如何傳送訊息的條件。一般而言，這項 API 呼叫是透過您的伺服器完成。
您可能會問自己以下幾個問題：
- 推送服務的目標對象和內容為何？
- API 的外觀為何？它是 JSON、XML 等等嗎？
- API 可以提供哪些功能？
推送服務的目標對象和內容為何？
推送服務收到網路要求後，會進行驗證，並將推送訊息傳送至適當的瀏覽器。如果瀏覽器處於離線狀態，郵件會排入佇列，直到瀏覽器上線為止。
每個瀏覽器都可以使用想要的任何推送服務，開發人員無法控管這項服務。這不是問題，因為每個推送服務都預期每次呼叫「相同」的 API 呼叫。也就是說，您不必留意推送服務是誰。只要確認 API 呼叫有效即可。
如要取得觸發推送訊息的適當網址 (亦即推送服務的網址)，只需查看 PushSubscription 中的 endpoint 值即可。
以下範例說明可從 PushSubscription 中取得的值：
{
"endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
"keys": {
"p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
"auth": "tBHItJI5svbpez7KI4CCXg=="
}
}
在此情況下，端點為 [https://random-push-service.com/some-Kind-of-unique-id-1234/v2/]。推送服務為「random-push-service.com」，且每個端點都專屬於單一使用者，以「some-Kind-of-unique-id-1234」表示。開始使用推送功能時，您會發現這個模式。
我們稍後會介紹訂閱項目中的金鑰。
API 的外觀為何？
我曾提到每個網路推送服務預期都會使用相同的 API 呼叫。這個 API 就是網路推送通訊協定。這項 IETF 標準定義瞭如何呼叫推送服務上的 API。
進行 API 呼叫時，您必須設定特定標頭，並將資料設為位元組串流。我們將介紹可以替我們執行這個 API 呼叫的程式庫，以及自身執行方法。
API 可以提供哪些功能？
這個 API 能讓您在包含 / 的情況下傳送訊息給使用者，並提供有關如何傳送訊息的操作說明。
您透過推送訊息傳送的資料必須經過加密。這是因為這會阻止推送服務 (可能是任何人) 查看與推送訊息一併傳送的資料。這點非常重要，因為是由瀏覽器決定要使用的推送服務，因為這樣可能會使用不安全的推送服務，在瀏覽器開啟安全門號。
觸發推送訊息時，推送服務會收到 API 呼叫，並將訊息排入佇列。在使用者的裝置上線且推送服務能夠傳送訊息之前，這則訊息會一直排入佇列。您可以向推送服務提供的操作說明，定義推送訊息排入佇列的方式。
操作說明包含的詳細資料如下：
推送訊息的存留時間。此定義訊息在移除及未傳送前應排入佇列的時間長度。
定義訊息的急迫性。這項功能非常實用，可以在推送服務中只傳送高優先順序的訊息來保留使用者電池續航力。
為推送訊息輸入「主題」名稱，所有待處理的訊息都會以這則新訊息取代。
步驟 3：在使用者裝置上推送事件
送出推送訊息後，推送服務會將訊息保留在伺服器上，直到發生下列其中一種事件：
- 裝置已連上網路，推送服務會傳送訊息。
- 訊息過期。如果發生這種情況，推送服務會將訊息從佇列中移除，且一律不會傳送。
推送服務成功傳送訊息時，瀏覽器會收到訊息、解密任何資料，並在 Service Worker 中分派 push 事件。
Service Worker 是「特殊」的 JavaScript 檔案。瀏覽器可以在不開啟網頁的情況下執行這個 JavaScript。甚至在瀏覽器關閉時執行此 JavaScript。Service Worker 也有在網頁上沒有提供的 API (例如推送)，也就是無法透過 Service Worker 指令碼取得的 API。
而位於服務工作處理程序的「push」事件內，可供您執行任何背景工作。例如進行分析呼叫、離線快取頁面，以及顯示通知。
這是整個推送訊息流程。