《Web 推送通知》系列翻譯 | 引言&概覽

時間 2019-11-09

原文原文鏈接

引言

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

PWA 技術的流行，給了前端許多新的能力。之前不少前端作不到的事情，如今逐漸能夠作到了。本系列文章講述的的 Web 推送通知就是前端開發者最但願得到的能力之一。前端

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

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

文章目錄

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

原文地址：web-push-notificationsweb

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

譯者：劉鵬服務器

校對者：任家樂、張卓post

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

若是你問一屋子的開發者，有哪些功能是移動設備擁有而 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" }
  ]
}
複製代碼

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

我要怎樣才能試用它呢?

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

第一個是，查看咱們本身的示例；
第二個是，Peter Beverloo 的通知生成器；
第三個是，Mozilla 的推送 payload（有效載荷）示例。

提示: 除非你的頁面是 localhost，不然的話推送 API 必需要求頁面是 HTTPS 的。