引言

參與者（排名不分先後）：任家樂、楊芯芯、劉文濤、張卓、劉鵬。

PWA 技術的流行，給了前端許多新的能力。以前很多前端做不到的事情，現在逐漸可以做到了。本系列文章講述的的 Web 推送通知就是前端開發者最希望獲得的能力之一。

通過推送通知，即使使用者的瀏覽器沒有開啟，我們也可以觸達使用者，讓使用者與我們的 Web 站點有更多的互動。在國外可以直接使用 Google 的推送服務進行推送，而國內也不要灰心，我們的國產瀏覽器廠商們也在補全國內的推送能力。去年 UC 就推出了國內首款支援推送通知的瀏覽器。

本系列文章是翻譯自谷歌開發者網站，我們的主要目的，是讓對 Web 推送服務有興趣的開發者，能夠通過閱讀本系列的文章而初步掌握 Web 推送的一些基本原理和實現方式，從而在實際工作中可以應用起來。

文章目錄

1. 概覽 - Web 推送通知：及時、相關和準確
2. 推送是如何工作的
3. 如何訂閱一個使用者
4. 請求許可權的互動
5. 通過 Web 推送庫來傳送訊息
6. Web 推送協議
7. 處理推送事件
8. 顯示一個通知
9. 通知行為
10. 常用的通知模式
11. FAQ
12. 常見問題以及錯誤反饋

第一篇：概覽 - Web 推送通知：及時、相關和準確

原文地址：web-push-notifications

譯文地址：概覽 - Web 推送通知

譯者：劉鵬

校對者：任家樂、張卓

描述：推送通知是原生 APP 中最重要的能力之一。現在 Web 也有這個能力了。為了能讓使用者充分使用它們，通知必須能夠達到及時、準確和相關。

如果你問一屋子的開發者，有哪些功能是移動裝置擁有而 Web 缺失的，推送通知一定位居前列。

Web 推送通知允許使用者在他們喜歡的網站一有更新之後就選擇參與進來。同時允許開發者使用自定義的以及和使用者相關的內容來有效地吸引使用者。

推送 API 和通知 API 給予了開發者一系列全新的可能性去和使用者重修舊好。

和 service worker 相關嗎?

是的，推送是基於 service worker 的，因為 service worker 在後臺負責操作。這就是說只有使用者點選或者關掉通知的時候，相關程式碼才會執行（換另一句話說就是電池被消耗）。如果你現在還對這個不熟悉，請檢視 service worker introduction 章節。在後面的章節當中我們會使用 service worker 程式碼給大家展示如何實現推送和通知。

兩種技術

推送和通知是使用不同但是互補的 API。推送在伺服器提供給 service worker 資訊的時候被呼叫。通知是 service worker 或者網頁 script 展示資訊給使用者的一種方式。

對通知的一點剖析

在下面的章節當中，我們直接用程式碼來展示如何使用通知。在 service worker 註冊完成之後，我們可以在註冊成功的 service worker 物件上呼叫 showNotification 方法。

serviceWorkerRegistration.showNotification(title, options);
複製程式碼

title 參數列示的是通知的標題。options 引數是一個物件字面量，它用於設定通知的其它屬性。options 物件通常表示如下：

{
  "body": "Did you make a $1,000,000 purchase at Dr. Evil...",
  "icon": "images/ccard.png",
  "vibrate": [200, 100, 200, 100, 200, 100, 400],
  "tag": "request",
  "actions": [
    { "action": "yes", "title": "Yes", "icon": "images/yes.png" },
    { "action": "no", "title": "No", "icon": "images/no.png" }
  ]
}
複製程式碼

這些程式碼將生成一個如圖所示的通知。它通常會提供和原生應用一樣的能力。在深入到實現這些能力的細節之前，我將給你們展示如何有效地使用它們。我們將繼續講述實現推送通知的機制，包括如何處理許可權、訂閱、傳送訊息以及如何回應訊息等方面。

我要怎樣才能試用它呢?

在你完全瞭解它們是怎麼運作或者你必須實現這些功能之前，你可以嘗試下面幾種方式來試用這些特性。

1. 第一個是，檢視 我們自己的示例；
2. 第二個是，Peter Beverloo 的 通知生成器；
3. 第三個是，Mozilla 的 推送 payload（有效載荷）示例。

提示: 除非你的頁面是 localhost， 否則的話推送 API 必須要求頁面是 HTTPS 的。

更多分享，請關注YFE:

下一篇：《Web 推送通知》系列翻譯 | 第二篇：推送是怎麼工作的?