引言

参与者（排名不分先后）：任家乐、杨芯芯、刘文涛、张卓、刘鹏。

PWA 技术的流行，给了前端许多新的能力。以前很多前端做不到的事情，现在逐渐可以做到了。本系列文章讲述的的 Web 推送通知就是前端开发者最希望获得的能力之一。

通过推送通知，即使用户的浏览器没有打开，我们也可以触达用户，让用户与我们的 Web 站点有更多的互动。在国外可以直接使用 Google 的推送服务进行推送，而国内也不要灰心，我们的国产浏览器厂商们也在补全国内的推送能力。去年 UC 就推出了国内首款支持推送通知的浏览器。

本系列文章是翻译自谷歌开发者网站，我们的主要目的，是让对 Web 推送服务有兴趣的开发者，能够通过阅读本系列的文章而初步掌握 Web 推送的一些基本原理和实现方式，从而在实际工作中可以应用起来。

文章目录

第一篇：概览 - 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" }
  ]
}

这些代码将生成一个如图所示的通知。它通常会提供和原生应用一样的能力。在深入到实现这些能力的细节之前，我将给你们展示如何有效地使用它们。我们将继续讲述实现推送通知的机制，包括如何处理权限、订阅、发送消息以及如何回应消息等方面。

我要怎样才能试用它呢?

在你完全了解它们是怎么运作或者你必须实现这些功能之前，你可以尝试下面几种方式来试用这些特性。

第一个是，查看我们自己的示例；
第二个是，Peter Beverloo 的通知生成器；
第三个是，Mozilla 的推送 payload（有效载荷）示例。

提示: 除非你的页面是 localhost，否则的话推送 API 必须要求页面是 HTTPS 的。

更多分享，请关注YFE:

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