《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 的。