通知

本文将主要介绍 service worker 的功能之一：通知 (notification)，它允许服务器向用户提示一些信息，并根据用户不同的行为进行一些简单的处理。

通知比较常见的使用情景包括电商网站提醒用户一些关注商品的价格变化，或是在线聊天网站提醒用户收到了新消息等等。

如何使用？

使用 notification 本身非常简单，只需要一行代码，但在此之前需要一些准备工作。

  • 检测浏览器兼容性，获取通知权限。 execute() 方法后续会有介绍。
  1. window.addEventListener('load', () => {
  2.     if (!('serviceWorker' in navigator)) {
  3.         // Service Worker isn't supported on this browser, disable or hide UI.
  4.         return;
  5.     }
  7.     if (!('PushManager' in window)) {
  8.         // Push isn't supported on this browser, disable or hide UI.
  9.         return;
  10.     }
  12.     let promiseChain = new Promise((resolve, reject) => {
  13.         const permissionPromise = Notification.requestPermission(result => {
  14.             resolve(result);
  15.         });
  17.         if (permissionPromise) {
  18.             permissionPromise.then(resolve);
  19.         }
  20.     })
  21.     .then(result => {
  22.         if (result === 'granted') {
  23.             execute();
  24.         }
  25.         else {
  26.             console.log('no permission');
  27.         }
  28.     });
  29. });
  • 注册 service worker ，获取注册对象。（ service-worker.js 暂时不需要任何代码支持，空白文件也可）
  1. function registerServiceWorker() {
  2.     return navigator.serviceWorker.register('service-worker.js')
  3.     .then(registration => {
  4.         console.log('Service worker successfully registered.');
  5.         return registration;
  6.     })
  7.     .catch(err => {
  8.         console.error('Unable to register service worker.', err);
  9.     });
  10. }
  • 使用 showNotification 方法弹出通知。
  1. function execute() {
  2.     registerServiceWorker().then(registration => {
  3.         registration.showNotification('Hello World!');
  4.     });
  5. }

本文的其余部分将默认已经获得通知权限，并已经获得 registration 对象，前面两个步骤不再赘述了。

参数

showNotification 方法共有两个参数，分别为：

  • title - 必填 字符串类型 表示通知的标题
  • options - 选填 对象类型 集合众多配置项，可用项如下：
  1. {
  2.     // 视觉相关
  3.     "body": "<String>",
  4.     "icon": "<URL String>",
  5.     "image": "<URL String>",
  6.     "badge": "<URL String>",
  7.     "vibrate": "<Array of Integers>",
  8.     "sound": "<URL String>",
  9.     "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  11.     // 行为相关
  12.     "tag": "<String>",
  13.     "data": "<Anything>",
  14.     "requireInteraction": "<boolean>",
  15.     "renotify": "<Boolean>",
  16.     "silent": "<Boolean>",
  18.     // 视觉行为均会影响
  19.     "actions": "<Array of Strings>",
  21.     // 定时发送时间戳
  22.     "timestamp": "<Long>"
  23. }

RELAX!! 暂时我们还不需要关注这么多的配置项，下面会逐一讲述这些配置项及其产生的效果。

  • 视觉部分

    主要涉及通知的各类视觉相关的配置项，从而展现不同样式的通知，例如标题，内容，图标，图片等等。

  • 行为部分

    主要涉及通知的行为控制，例如点击通知，多个通知的折叠，通知弹出时的声音等等。

  • 常用实现

    主要介绍在实际使用场景中通知的常见实现方式，例如关闭通知，合并通知等等。