Web 推送通知

  點擊上方藍色文字關注我們吧

聲明

本文為閱文前端團隊 YFE 成員翻譯，請尊重翻譯成果，轉載請聯繫公眾號 ( id: yuewen_YFE ) 獲取授權，並註明作者、出處和連結。

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

任家樂：https://github.com/jennyrenjiale

楊芯芯：https://github.com/y2x33

劉文濤：https://github.com/HSDPA-wen

張卓：https://github.com/Zhangdroid

劉鵬：https://github.com/git-patrickliu

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

通過推送通知，即使用戶的瀏覽器沒有打開，我們也可以觸達用戶，讓用戶與我們的 Web 站點有更多的互動。在國外可以直接使用 Google 的推送服務進行推送，而國內也不要灰心，我們的國產瀏覽器廠商們也在補全國內的推送能力。去年 UC 就推出了國內首款支持推送通知的瀏覽器（https://www.w3ctech.com/topic/2085）。

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

文章目錄

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

（https://github.com/yued-fe/y-translation/blob/master/en/web-push-notifications/index.md）

推送是如何工作的

（https://github.com/yued-fe/y-translation/blob/master/en/web-push-notifications/how-push-works.md）

如何訂閱一個用戶

（https://github.com/yued-fe/y-translation/blob/master/en/web-push-notifications/subscribing-a-user.md）

請求權限的交互

（https://github.com/yued-fe/y-translation/blob/master/en/web-push-notifications/permission-ux.md）

通過 Web 推送庫來發送消息

（https://github.com/yued-fe/y-translation/blob/master/en/web-push-notifications/sending-messages-with-web-push-libraries.md）

Web 推送協議（https://github.com/yued-fe/y-translation/blob/master/en/web-push-notifications/web-push-protocol.md）

處理推送事件

（https://github.com/yued-fe/y-translation/blob/master/en/web-push-notifications/handling-messages.md）

顯示一個通知

（https://github.com/yued-fe/y-translation/blob/master/en/web-push-notifications/display-a-notification.md）

通知行為

（https://github.com/yued-fe/y-translation/blob/master/en/web-push-notifications/display-a-notification.md）

常用的通知模式

（https://github.com/yued-fe/y-translation/blob/master/en/web-push-notifications/common-notification-patterns.md）

FAQ

（https://github.com/yued-fe/y-translation/blob/master/en/web-push-notifications/faq.md）

常見問題以及錯誤反饋

（https://github.com/yued-fe/y-translation/blob/master/en/web-push-notifications/common-issues-and-reporting-bugs.md）

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

原文地址：https://developers.google.com/web/fundamentals/push-notifications/index

譯文地址：https://github.com/yued-fe/y-translation/edit/master/todo/push-notifications/index.md

譯者：劉鵬

校對者：任家樂、張卓

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

Example Notification

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

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

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

和 service worker 相關嗎?

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

兩種技術

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

推送連結：https://developer.mozilla.org/en-US/docs/Web/API/Push_API

通知連結：https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API

對通知的一點剖析

在下面的章節當中，我們直接用代碼來展示如何使用通知。在 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" }

 ]

}

Example Notification

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

我要怎樣才能試用它呢?

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

第一個是，查看 我們自己的示例

https://github.com/GoogleChrome/samples/tree/gh-pages/push-messaging-and-notifications

第二個是，Peter Beverloo 的 通知生成器

https://tests.peter.sh/notification-generator/

第三個是，Mozilla 的 推送 payload（有效載荷）示例

https://serviceworke.rs/push-payload_demo.html

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

本文譯者：劉鵬

轉載請向閱文前端團隊微信公眾號 ( id: yuewen_YFE) 獲取授權，並註明作者、出處和連結。