Web 推送技术

时间  2019-11-16
标签 web 推送 技术 栏目 HTML 繁體版
原文   原文链接

腾讯云技术社区-掘金主页持续为你们呈现云计算技术文章，欢迎你们关注！javascript

做者：villainthrhtml

摘自 前端小吉米前端

伴随着今年 Google I/O 大会的召开，一个很火的概念--Progressive Web Apps 诞生了。这表明着咱们 web 端有了和原生 APP 媲美的能力。可是，有一个很重要的痛点，web 一直不能使用消息推送，虽然，后面提出了 Notification API，但这须要网页持续打开，这对于常规 APP 实现的推送，根本就不是一个量级的。因此，开发者一直在呼吁能不能退出一款可以在网页关闭状况下的 web 推送呢？
如今，Web 时代已经到来！
为了作到在网页关闭的状况下，还能继续发送 Notification，咱们就只能使用驻留进程。而如今 Web 的驻留进程就是如今正在大力普及的 Service Worker。换句话说，咱们的想要实现断线 Notification 的话，须要用的技术栈是：java

  • Push
  • Notification
  • Service Worker

这里，我先一个简单的 demo 样式。node

noti

说实在的，我其实 TM 很烦的这 Noti。通常使用 PC 端的，也没见有啥消息弹出来，可是，如今好了 Web 一搞，结果三端通用。你若是不由用的话，保不许每天弹。。。git

SW(Service Worker) 我已经在前一篇文章里面讲清楚了。这里主要探究一下另外两个技术 Push 和 Notification。首先，有一个问题，这两个技术是用来干吗的呢？github

Push && Notification

这两个技术，咱们能够理解为就是 server 和 SW 之间，SW 和 user 之间的消息通讯。web

  • push: server 将更新的信息传递给 SW
  • notification: SW 将更新的信息推送给用户

能够看出，两个技术是紧密链接到一块儿的。这里，咱们先来说解一下 notification 的相关技术。算法

Notification

那如今，咱们想给用户发送一个消息的话应该怎么发送呢？
代码很简单，我直接放了：chrome

self.addEventListener('push', function(event) {
  var title = 'Yay a message.';
  var body = 'We have received a push message.';
  var icon = '/images/icon-192x192.png';
  var tag = 'simple-push-demo-notification-tag';
  var data = {
    doge: {
        wow: 'such amaze notification data'
    }
  };
  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag,
      data: data
    })
  );
});复制代码

你们一开始看见这个代码，可能会以为有点陌生。实际上，这里是结合 SW 来完成的。push 是 SW 接收到后台的 push 信息而后出发。固然，咱们获取信息的主要途径也是从 event 中获取的。这里为了简便，就直接使用写死的信息了。大体解释一下 API。

  • event.waitUntil(promise): 该方法是用来延迟 SW 的结束。由于，SW 可能在任什么时候间结束，为了防止这样的状况，须要使用 waitUntil 监听 promise，使系统不会在 promise 执行时就结束 SW。
  • ServiceWorkerRegistration.showNotification(title, [options]): 该方法执行后，会发回一个 promise 对象。

不过，咱们须要记住的是 SW 中的 notification 只是很早之前就退出的桌面 notification 的继承对象。这意味着，你们若是想要尝试一下 notification，并不须要手动创建一个 notification，而只要使用 

// 桌面端
var not = new Notification("show note", { icon: "newsong.svg", tag: "song" });
not.onclick = function() { dosth(this); };

// 在 SW 中使用
self.registration.showNotification("New mail from Alice", {
  actions: [{action: 'archive', title: "Archive"}]
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  if (event.action === 'archive') {
    silentlyArchiveEmail();
  } else {
    clients.openWindow("/inbox");
  }
}, false);复制代码

不过，若是你想设置本身想要的 note 效果的话，则须要了解一下，showNotification 里面具体每次参数表明的含义，参考 Mozilla，咱们能够了解到基本的使用方式。如上，API 的基本格式为 showNotification(title, [options])

  • title: 很简单，就是该次 Not(Notification) 的标题
  • options: 这个而是一个对象，里面能够接受不少参数。
    • actions[Array]:该对象是一个数组，里面包含一个一个对象元素。每一个对象包含内容为：
      • action[String]: 表示该 Not 的行为。后面是经过监听 notificationclick 来进行相关处理
      • title[String]: 该 action 的标题
      • icon[URL]: 该 action 显示的 logo。大小一般为 24*24

actions 的上限值，一般根据 Notification.maxActions 肯定。经过在 Not 中定义好 actions 触发，最后咱们会经过，监听的 notificationclick 来作相关处理：

self.addEventListener('notificationclick', function(event) {  
  var messageId = event.notification.data;

  event.notification.close();
    // 经过设置的 actions 来作适当的响应
  if (event.action === 'like') {  
    silentlyLikeItem();  
  }  
  else if (event.action === 'reply') {  
    clients.openWindow("/messages?reply=" + messageId);  
  }  
  else {  
    clients.openWindow("/messages?reply=" + messageId);  
  }  
}, false);复制代码
    • body[String]： Not 显示的主体信息
    • dir[String]： Not 显示信息的方向，一般能够取：auto, ltr, or rtl
    • icon[String]：Not 显示的 Icon 图片路径。
    • image[String]：Not 在 body 里面附带显示的图片 URL，大小最好是 4:3 的比例。
    • tag[String]：用来标识每一个 Not。方便后续对 Not 进行相关管理。
    • renotify[Boolean]：当重复的 Not 触发时，标识是否禁用振动和声音,默认为 false
    • vibrate[Array]：用来设置振动的范围。格式为:[振动,暂停,振动,暂停...]。具体取值单位为 ms。好比：[100,200,100]。振动 100ms，静止 200ms，振动 100ms。这样的话，咱们能够设置本身 APP 都有的振动提示频率。
    • sound[String]： 设置音频的地址。例如： /audio/notification-sound.mp3
    • data[Any]: 用来附带在 Not 里面的信息。咱们通常能够在 notificationclick 事件中，对回调参数进行调用event.notification.data。

针对于推送的图片来讲，可能会针对不一样的手机用到的图片尺寸会有所区别，例如，针对不一样的 dpi。

具体参照：

cut

看下 MDN 提供的 demo：

function showNotification() {
  Notification.requestPermission(function(result) {
    if (result === 'granted') {
      navigator.serviceWorker.ready.then(function(registration) {
        registration.showNotification('Vibration Sample', {
          body: 'Buzz! Buzz!',
          icon: '../images/touch/chrome-touch-icon-192x192.png',
          vibrate: [200, 100, 200, 100, 200, 100, 200],
          tag: 'vibration-sample'
        });
      });
    }
  });
}复制代码

固然，简单 API 的使用就是上面那样。可是，若是咱们不加克制的使用 Not，可能会让用户彻底屏蔽掉咱们的推送，得不偿失。因此，咱们须要遵循必定的原则去发送。

推送原则

  1. 推送必须简洁

遵循时间，地点，人物要素进行相关信息的设置。

  1. 尽可能不要让用户打开网页查看

虽然这看起来有点违背咱们最初的意图。不过，这样确实可以提升用户的体验。好比在信息回复中，直接显示：XX回复：... 这样的格式，能够彻底省去用户的打开网页的麻烦。

  1. 不要在 title 和 body 出现同样的信息

好比:
correct:

first

incorrect
此处输入图片的描述

  1. 不要推荐原生 APP

由于颇有可能形成推送信息重复

  1. 不要写上本身的网址

由于，Not 已经帮你写好了

website_name

  1. 尽可能让 icon 和推送有关联

没用的 icon:

icon

实用的 icon:
icon

推送权限

实际上，Not 并不全在 SW 中运行，对于设计用户初始权限，咱们须要在主页面中，作出相关的响应。固然，在设置推送的时候，咱们须要考虑到用户是否会禁用，这里影响仍是特别大的。
咱们，获取用户权限通常能够直接使用 Notification 上挂载的 permission 属性来获取的。

  • defualt: 表示须要进行询问。默认状况是不显示推送
  • denied: 不显示推送
  • granted: 显示推送

简单的来讲为：

function initialiseState() {
  if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
    return;
  }

  // 检查是否能够进行服务器推
  if (!('PushManager' in window)) {
    return;
  }

  // 是否被禁用
  if (Notification.permission === 'denied') {
    return;
  }

  if (Notification.permission === 'granted') {
    // dosth();
    return;
  }

  // 若是还处于默认状况下，则进行询问
  navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // 检查订阅
    serviceWorkerRegistration.pushManager.getSubscription()
      .then(function(subscription) {
        // 检查是否已经被订阅
        if (!subscription) {
          // 没有
          return;
        }
        // 有
        // doSth();
      })
      .catch(function(err) {
        window.Demo.debug.log('Error during getSubscription()', err);
      });
  });
}复制代码

咱们在加载的时候，须要先进行检查一遍，若是是默认状况，则须要发起订阅的请求。而后再开始进行处理。
那，咱们上面的那段代码该放在哪一个位置呢？首先，这里使用到了 SW，这意味着，咱们须要将 SW 先注册成功才行。实际代码应放在 SW 注册成功的回调中：

window.addEventListener('load', function() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./service-worker.js')
    .then(initialiseState);
  } else {
    window.Demo.debug.log('Service workers aren\'t supported in this browser.');
  }
});复制代码

为了更好的显示信息，咱们还能够将受权代码放到后面去。好比，将 subscribe 和 btn 的 click 事件进行绑定。这时候，咱们并不须要考虑 SW 是否已经注册好了，由于SW 的注册时间远远不及用户的反应时间。
例如：

var pushButton = document.querySelector('.js-push-button');
  pushButton.addEventListener('click', function() {
    if (isPushEnabled) {
      unsubscribe();
    } else {
      subscribe();
    }
  });复制代码

咱们具体看一下 subscribe 内容：

function subscribe() {
  var pushButton = document.querySelector('.js-push-button');
  pushButton.disabled = true;

  navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // 请求订阅
    serviceWorkerRegistration.pushManager.subscribe({userVisibleOnly: true})
      .then(function(subscription) {
        isPushEnabled = true;
        pushButton.textContent = 'Disable Push Messages';
        pushButton.disabled = false;
        return sendSubscriptionToServer(subscription);
      })
  });
}复制代码

说道这里，你们可能会看的云里雾里，这里咱们来具体看一下 serviceWorkerRegistration.pushManager 具体含义。该参数是从 SW 注册事件回调函数获取的。也就是说，它是咱们和 SW 交互的通道。该对象上，绑定了几个获取订阅相关的 API：

  • subscribe(options) [Promise]: 该方法就是咱们经常用来触发询问的 API。他返回一个 promise 对象.回调参数为 pushSubscription 对象。这里，咱们后面再进行讨论。这里主要说一下 options 里面有哪些内容
    • options[Object]
      • userVisibleOnly[Boolean]:用来表示后续信息是否展现给用户。一般设置为 true.
      • applicationServerKey: 一个 public key。用来加密 server 端 push 的信息。该 key 是一个 Uint8Array 对象。

例如：

registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: new Uint8Array([...])
    });复制代码
  • getSubscription() [Promise]: 用来获取已经订阅的 push subscription 对象。
  • permissionState(options) [Promise]: 该 API 用来获取当前网页消息推送的状态 'prompt', 'denied', 或 'granted'。里面的 options 和 subscribe 里面的内容一致。

为了更好的体验，咱们能够将二者结合起来，进行相关推送检查，具体的 load 中，则为：

window.addEventListener('load', function() {
  var pushButton = document.querySelector('.js-push-button');
  pushButton.addEventListener('click', function() {
    if (isPushEnabled) {
      unsubscribe();
    } else {
      subscribe();
    }
  });
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./service-worker.js')
    .then(initialiseState);
  } else {
    window.Demo.debug.log('Service workers aren\'t supported in this browser.');
  }
});复制代码

固然，这里面还会涉及其余的一些细节，我这里就不过多赘述了。详情能够查阅: Notification demo。

咱们开启一个 Not 询问很简单，但关键是，若是让用户赞成。若是咱们一开始就进行询问，这样成功性的可能性过低。咱们能够在页面加载后进行询问。这里，也有一些提醒原则：

  1. 经过具体行为进行询问
    好比，当我在查询车票时，就可让用户在退出时选择是否接受推送信息。好比，国外的飞机延迟通知网页：

    delay

  2. 让用户来决定是否进行推送
    由于用户不是技术人员，咱们须要将一些接口，暴露给用户。针对推送而言，咱们可让用户选择是否进行推送，而且，在提示的同时，显示的信息应该尽可能和用户相关。

    user

推送处理

web push 在实际协议中，会设计到两个 server，比较复杂，这里咱们先来看一下。client 是如何处理接受到的信息的。
当 SW 接受到 server 传递过来的信息时，会先触发 push 事件。咱们一般作以下处理：

self.addEventListener('push', function(event) { 
if (event.data) {
    console.log('This push event has data: ',event.data.text()); 
    } else {
    console.log('This push event has no data.');
  }
});复制代码

其中，咱们经过 server push 过来的 msg 一般是挂载到 event.data 里的。而且，该部署了 Response 的相关 API:

  • text(): 返回 string 的内容
  • json(): 返回 通过 json parse 的对象
  • blob(): 返回 blob 对象
  • arrayBuffer(): 返回 arrayBuffer 对象

咱们知道 Service Worker 并非常驻进程，有童鞋可能会问到，那怎么利用 SW 监听 push 事件呢？
这里就不用担忧了，由于浏览器本身会打开一个端口监听接受到的信息，而后唤起指定的 SW（若是你的浏览器是关闭的，那么你能够洗洗睡了）。并且，因为这样随机关闭的机制，咱们须要上述提到的 event.waitUntil API 来帮助咱们完成持续 alive SW 的效果，防止正在执行的异步程序被终止。针对于咱们的 notification 来讲，实际上就是一个异步，因此，咱们须要使用上述 API 进行包裹。

self.addEventListener('push', function(event) {
const promiseChain = self.registration.showNotification('Hello, World.');
  event.waitUntil(promiseChain);
});复制代码

固然，若是你想在 SW 里面作更多的异步事情的话，可使用 Promise.all 进行包裹。

self.addEventListener('push', function(event) {
    const promiseChain = Promise.all([ async1,async2 ]);
  event.waitUntil(promiseChain);
});复制代码

以后，就是将具体信息展现推送给用户了。上面已经将了具体 showNotification 里面的参数有哪些。不过，这可能不够直观，咱们可使用一张图来感觉一下：

cur

（左：firefox，右：Chrome）

另外，在 showNotification options 里面，还有一些属性须要咱们额外注意。

属性注意

tag

对于指定的 Not 咱们可使用 tag 来代表其惟一性，这表明着当咱们在使用相同 tag 的 Not 时，上一条 Not 会被最新拥有同一个 tag 的Not 替换。即：

const title = 'First Notification';
    const options = {
      body: 'With \'tag\' of \'message-group-1\'',
      tag: 'message-group-1'
    };
    registration.showNotification(title, options);复制代码

显示样式为：

first

接着，我显示一个不一样 tag 的 Not:

const title = 'Second Notification';
const options = {
     body: 'With \'tag\' of \'message-group-2\'',
     tag: 'message-group-2'
};
registration.showNotification(title, options);复制代码

结果为：

second

而后，我使用一个一样 tag 的 Not：

const title = 'Third Notification';
      const options = {
        body: 'With \'tag\' of \'message-group-1\'',
        tag: 'message-group-1'
      };
      registration.showNotification(title, options);复制代码

则相同的 tag 会被最新 tag 的 Not 替换：

last

Renotify

该属性是 Not 里面又一个比较尴尬的属性，它的实际应用场景是当有重复 Not 被替换时，震动和声音能不能被重复播放，但默认为 false。
那何为重复呢？
就是，上面咱们提到的 tag 被替换。通常应用场景就是和同一个对象聊天时，发送多个信息来时，咱们不可能推送多个提示信息，通常就是把已经存在的 Not 进行替换就 ok，那么这就是上面提到的由于重复，被替换的 Not。
通常咱们对于这样的 Not 能够设置为:

const title = 'Second Notification';
      const options = {
        body: 'With "renotify: true" and "tag: \'renotify\'".',
        tag: 'renotify',
        renotify: true
      };
      registration.showNotification(title, options);复制代码

而且，若是你设置了 renotify 而没有设置 tag 的话，这是会报错的 !!!

silent

防止本身推送的 Not 发出任何额外的提示操做（震动，声音）。默认为 false。不过，咱们能够在须要的时候，设置为 true:

const title = 'Silent Notification';
    const options = {
      body: 'With "silent: \'true\'".',
      silent: true
    };
    registration.showNotification(title, options);复制代码

requireInteraction

对于通常的 Not 来讲，当展现必定时间事后，就能够自行消失。不过，若是你的 Not 必定须要用户去消除的话，可使用 requireInteraction 来进行长时间留存。通常它的默认值为 false。

const title = 'Require Interaction Notification';
    const options = {
      body: 'With "requireInteraction: \'true\'".',
      requireInteraction: true
    };
    registration.showNotification(title, options);复制代码

交互响应

如今，你的 Not 已经显示给用户，不过，默认状况下，Not 自己是不会作任何处理的。咱们须要监听用户，对其的相关操做（其实就是 click 事件）。

self.addEventListener('notificationclick', function(event) {
    // do nothing
});复制代码

另外，经过咱们在 showNotification 里面设置的 action，咱们能够根据其做出不一样的响应。

self.addEventListener('notificationclick', function(event) {
if (event.action) {
    console.log('Action Button Click.', event.action);
} else {
    console.log('Notification Click.');
}
});复制代码

关闭推送

这是应该算是最经常使用的一个，只是用来提示用户的相关信息：

self.addEventListener('notificationclick', function(event) {
  event.notification.close();

  // Do something as the result of the notification click
});复制代码

打开一个新的窗口

这里，须要使用到咱们的 service 里面的一个新的 API clients。

event.waitUntil(
  // examplePage 就是当前页面的 url
    clients.openWindow(examplePage)
  );复制代码

这里须要注意的是 examplePage 必须是和当前 SW 同域名才行。不过，这里有两种状况，须要咱们考虑：

  1. 指定的网页已经打开？
  2. 当前没网？

聚焦已经打开的页面

这里，咱们能够利用 cilents 提供的相关 API 获取，当前浏览器已经打开的页面 URLs。不过这些 URLs 只能是和你 SW 同域的。而后，经过匹配 URL，经过 matchingClient.focus() 进行聚焦。没有的话，则新打开页面便可。

const urlToOpen = self.location.origin + examplePage;

  const promiseChain = clients.matchAll({
    type: 'window',
    includeUncontrolled: true
  })
  .then((windowClients) => {
    let matchingClient = null;

    for (let i = 0; i < windowClients.length; i++) {
      const windowClient = windowClients[i];
      if (windowClient.url === urlToOpen) {
        matchingClient = windowClient;
        break;
      }
    }

    if (matchingClient) {
      return matchingClient.focus();
    } else {
      return clients.openWindow(urlToOpen);
    }
  });

  event.waitUntil(promiseChain);复制代码

检测是否须要推送

另外，若是用户已经停留在当前的网页，那咱们可能就不须要推送了，那么针对于这种状况，咱们应该怎么检测用户是否正在网页上呢？

const promiseChain = ({
    type: 'window',
    includeUncontrolled: true
  })
  .then((windowClients) => {
    let mustShowNotification = true;

    for (let i = 0; i < windowClients.length; i++) {
      const windowClient = windowClients[i];
      if (windowClient.focused) {
        mustShowNotification = false;
        break;
      }
    }

    return mustShowNotification;
  })
  .then((mustShowNotification) => {
    if (mustShowNotification) {
      return self.registration.showNotification('Had to show a notification.');
    } else {
      console.log('Don\'t need to show a notification.');
    }
  });

  event.waitUntil(promiseChain);复制代码

固然，若是你本身的网页已经被用户打开，咱们一样也能够根据推送信息直接将信息传递给对应的 window。咱们经过 clients.matchAll 得到的 windowClient 对象，调用 postMessage 来进行消息的推送。

windowClient.postMessage({
          message: 'Received a push message.',
          time: new Date().toString()
        });复制代码

合并消息

该场景的主要针对消息的合并。好比，聊天消息，当有一个用户给你发送一个消息时，你能够直接推送，那若是该用户又发送一个消息呢？
这时候，比较好的用户体验是直接将推送合并为一个，而后替换便可。
那么，此时咱们就须要得到当前已经展现的推送消息，这里主要经过 registration.getNotifications() API 来进行获取。该 API 返回的也是一个 Promise 对象。
固然，咱们怎么肯定两个消息是同一我的发送的呢？这里，就须要使用到，上面提到的 Not.data 的属性。这是咱们在 showNotification 里面附带的，能够直接在 Notification 对象中获取。

return registration.getNotifications()
    .then(notifications => {
      let currentNotification;

      for(let i = 0; i < notifications.length; i++) {
      // 检测已经存在的 Not.data.userName 和新消息的 userName 是否一致
        if (notifications[i].data &&
          notifications[i].data.userName === userName) {
          currentNotification = notifications[i];
        }
      }

      return currentNotification;
    })
    // 而后，进行相关的逻辑处理，将 body 的内容进行更替
    .then((currentNotification) => {
      let notificationTitle;
      const options = {
        icon: userIcon,
      }

      if (currentNotification) {
        // We have an open notification, let's so something with it.
        const messageCount = currentNotification.data.newMessageCount + 1;

        options.body = `You have ${messageCount} new messages from ${userName}.`;
        options.data = {
          userName: userName,
          newMessageCount: messageCount
        };
        notificationTitle = `New Messages from ${userName}`;

        currentNotification.close();
      } else {
        options.body = `"${userMessage}"`;
        options.data = {
          userName: userName,
          newMessageCount: 1
        };
        notificationTitle = `New Message from ${userName}`;
      }

      return registration.showNotification(
        notificationTitle,
        options
      );
    });复制代码

至关于从:

one

变为：

two

上面提到了在 SW 中使用，clients 获取窗口信息，这里咱们先补充一下相关的知识。

Clients Object

咱们能够将 Clients 理解为咱们如今所在的浏览器，不过特殊的地方在于，它是遵照同域规则的，即，你只能操做和你域名一致的窗口。一样，Clients 也只是一个集合，用来管理你当前全部打开的页面，实际上，每一个打开的页面都是使用一个 cilent object 进行表示的。这里，咱们先来探讨一下 cilent object:

  • Client.postMessage(msg[,transfer]): 用来和指定的窗口进行通讯
  • Client.frameType: 代表当前窗口的上下文。该值能够为: auxiliary, top-level, nested, 或者 none.
  • Client.id[String]: 使用一个惟一的 id 表示当前窗口
  • Client.url: 当前窗口的 url。
  • WindowClient.focus()： 该方法是用来聚焦到当前 SW 控制的页面。下面几个也是 Client，不过是专门针对 type=window 的client。
  • WindowClient.navigate(url): 将当前页面到想到指定 url
  • WindowClient.focused[boolean]: 表示用户是否停留在当前 client
  • WindowClient.visibilityState: 用来表示当前 client 的可见性。实际和 focused 没太大的区别。可取值为: hidden, visible, prerender, or unloaded。

而后，Clients Object 就是用来管理每一个窗口的。经常使用方法有：

  • Clients.get(id): 用来得到某个具体的 client object
self.clients.get(id).then(function(client) {
  // 打开具体某个窗口
  self.clients.openWindow(client.url); 
});复制代码
  • Clients.matchAll(options): 用来匹配当前 SW 控制的窗口。因为 SW 是根据路径来控制的，有可能只返回一部分，而不是同域。若是须要返回同域的窗口，则须要设置响应的 options。
    • includeUncontrolled[Boolean]: 是否返回全部同域的 client。默认为 false。只返回当前 SW 控制的窗口。
    • type: 设置返回 client 的类型。一般有：window, worker, sharedworker, 和 all。默认是 all。
// 经常使用属性为：
clients.matchAll({
    type: 'window',
    includeUncontrolled: true
  }).then(function(clientList) {
  for(var i = 0 ; i < clients.length ; i++) {
    if(clientList[i].url === 'index.html') {
      clients.openWindow(clientList[i]);
    }
  }
});复制代码
  • Clients.openWindow(url): 用来打开具体某个页面
  • Clients.claim(): 用来设置当前 SW 和同域的 cilent 进行关联。

Push

先贴一张 google 关于 web push 的详解图：

web push

上述图，简单阐述了从 server 产生信息，最终到手机生成提示信息的一系列过程。
先说一下中间那个 Message Server。这是独立于咱们经常使用的 Server -> Client 的架构，浏览器能够本身选择 push service，开发者通常也不用关心。不过，若是你想使用本身定制的 push serivce 的话，只须要保证你的 service 可以提供同样的 API 便可。上述过程为：

  1. 用于打开你的网页，而且，已经生成好用来进行 push 的 applicationServerKey。而后，phone 开始初始化 SW
  2. 用户订阅该网页的推送，此时会给 message server 发送一个请求，建立一个订阅，而后返回 message server 的相关信息。
  3. 浏览器得到 message server 的相关信息后，而后在发送一个请求给该网页的 server。
  4. 若是 server 这边检测到有新的信息须要推送，则它会想 message server 发送相关请求便可。

这里，咱们能够预先看一下 message server 返回来的内容：

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh" : "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth"   : "tBHItJI5svbpez7KI4CCXg=="
  }
}复制代码

endpoint 就是浏览器订阅的 message server 的地址。这里的 keys 咱们放到后面讲解，主要就是用来进行 push message 的加密。
根据官方解释，Message Server 与用户将的通讯，借用的是 HTTP/2 的 server push 协议。上面的图，其实能够表达为：

+-------+           +--------------+       +-------------+
    |  UA   |           | Push Service |       | Application |
    +-------+           +--------------+       |   Server    |
        |                      |               +-------------+
        |      Subscribe       |                      |
        |--------------------->|                      |
        |       Monitor        |                      |
        |<====================>| | | | | | Distribute Push Resource | |-------------------------------------------->| | | | : : : | | Push Message | | Push Message |<---------------------| |<---------------------| | | | |复制代码

接下来，咱们就须要简单的来看一下使用 Web Push 的基本原则。

Push 基本原则

  1. 首先，server 发送的 push msg 必须被加密，由于这防止了中间的 push service 去查看咱们的推送的信息。
  2. 经过 server 发送的 msg 须要设置一个失效时间，觉得 Web Push 真正可以做用的时间是当用户打开浏览器的时候，若是用户没有打开浏览器，那么 push service 会一直保存该信息直到该条 push msg 过时。

那么若是咱们想让用户订阅咱们的 push service 咱们首先须要获得用户是否进行提示的许可。固然，一开始咱们还须要判断一下，该用户是否已经受权，仍是拒绝，或者是还未处理。这里，能够参考上面提到的推送权限一节中的 initialiseState 函数方法。
这里咱们主要研究一下具体的订阅环节（假设用户已经赞成推送）。基本格式为：

navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    const subscribeOptions = {
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(
        'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U'
      )
    };

    return registration.pushManager.subscribe(subscribeOptions);
    )}
      .then(function(subscription) {
        return subscription
      })复制代码

这里有两个参数 userVisibleOnly 和 applicationServerKey。这两个属性值具体表明什么意思呢？

userVisibleOnly

该属性能够算是强制属性（你必须填，并且只能填 true）。由于，一开始 Notification 的设计是 能够在用户拒绝的状况下继续在后台执行推送操做，这形成了另一种状况，开发者能够在用户关闭的状况下，经过 web push 获取用户的相关信息。因此，为了安全性保证，咱们通常只能使用该属性，而且只能为 true（若是，不呢？浏览器就会报错）。

applicationServerKey

前面说过它是一个 public key。用来加密 server 端 push 的信息。该 key 是一个 Uint8Array 对象，并且它 须要符合 VAPID 规范实际，因此咱们通常能够叫作 application server keys 或者 VAPID keys，咱们的 server 其实有私钥和公钥两把钥匙，这里和 TLS/SSL 协商机制相似，不过不会协商出 session key，直接经过 pub/pri key 进行信息加/解密。不过，它还有其余的用处：

  • 对于信息
    • 进行加密/解密，加强安全性
  • 对于 push service
    • 保证惟一性，由于 subscribe 会将该 key 发送过去。在 push service 那边，会根据该 key 针对每次发送生成独一无二的 endpoint，而后根据该 endpoint 给某些指定用户信息 push message。

整个流程图为：

server push

另外，该 key 还有一个更重要的用途是，当在后台 server 须要进行 push message，向 push service 发送请求时，会有一个 Authorization 头，该头的内容时由 private key 进行加密的。而后，push service 接受到以后，会根据配套的 endpoint 的 public key 进行解密，若是解密成功则表示该条信息是有效信息（发送的 server 是合法的）。

流程图为：

servcer key

经过 subscribe() 异步调用返回的值 subscription 的具体格式为：

{
  "endpoint": "https://some.pushservice.com/something-unique",
  "keys": {
    "p256dh": "BIPUL12DLfytvTajnryr2PRdAgXS3HGKiLqndGcJGabyhHheJYlNGCeXl1dn18gSJ1WAkAPIxr4gK0_dQds4yiI=",
    "auth":"FPssNDTKnInHVndSTdbKFw=="
  }
}复制代码

简单说一下参数，endpoint 就是 push service 的 URL，咱们的 server 若是有消息须要推送，就是想该路由发送请求。而 keys 就是用来对信息加密的钥匙。获得返回的 subscription 以后，咱们须要发送给后台 server 进行存储。由于，每一个用户的订阅都会产生独一无二的 endpoint，因此，咱们只须要将 endpoint 和关联用户存储起来就 ok 了。

fetch('/api/save-subscription/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(subscription)
  })复制代码

接下来就到了 server 推送 msg 的环节了。

服务器推送信息

当服务器有新的消息须要推送时，就须要向 push service 发送相关的请求进行 web push。不过，这里咱们须要了解，从服务器到 push service的请求，实际上就是 HTTP 的 post method。咱们看一个具体的请求例子：

POST /push-service/send/dbDqU8xX10w:APA91b... HTTP/1.1  
Host: push.example.net  
Push-Receipt: https://push.example.net/r/3ZtI4YVNBnUUZhuoChl6omU 
TTL: 43200  
Content-Type: text/plain;charset=utf8  
Content-Length: 36  
Authorization: WebPush
eyJ0eXAiOiJKV1QiLCJErtm.ysazNjjvW2L9OkSSHzvoD1oA  
Crypto-Key:
p256ecdsa=BA1Hxzyi1RUM1b5wjxsn7nGxAszw2u61m164i3MrAIxHF6YK5h4SDYic-dRuU\_RCPCfA5aq9ojSwk5Y2EmClBPsiChYuI3jMzt3ir20P8r\_jgRR-dSuN182x7iB复制代码

固然，变化的是里面推送的具体的 Headers 和 body 内容。咱们能够看一下具体头部表明的意思:

头部参考

Header Content
Authorization 能够理解该头是一个 JSON Web Token，用来验证是不是真实的订阅 server
Crypto-Key 用来表示加密的 key。它由两部分组成:dh=publicKey,p256ecdsa=applicationServerKey。其中 p256ecdsa 就是由 pub key 加密的 base64 的 url
Encryption 它用来放置加盐秘钥。用来加密 payload
Content-Type 若是你没发送 payload 的话，那么就不用发送该头。若是发送了，则须要将其设置为 application/octet-stream。这是为了告诉浏览器我发送的是 stream data
Content-Length 用来描述 payload 的长度（没有 payload 的不用）
Content-Encoding 该头必须一直是 aesgcm 不论你是否发送 payload
TTL (Time to Live) 表示该 message 能够在 push service 上停留多长时间（为何停留？由于用户没有打开指定浏览器，push service 发布过去）。若是 TTL 为 0，表示当有推送信息时，而且此时 push service 可以和用户的浏览器创建联系，则第一时间发送过去。不然当即失效
Topic 该头实际上和 Notification 中的 tag 头相似。若是 server 前后发送了两次拥有相同 Topic 的 message 请求，若是前一条 topic 正在 pending 状态，则会被最新一条 topic 代替。不过，该 Topic 必须 <= 32 个字符
Urgency[实验特性] 表示该消息的优先级，优先级高的 Notification 会优先发送。默认值为: default。可取值为: "very-low" "low" "normal" "high"

返回的响应码

一般，push service 接受以后，会返回相关的状态码，来表示具体操做结果：

statusCode Description
201 表示推送消息在 push service 中已经成功建立
429 此时，push service 有太多的推送请求，没法响应你的请求。而且，push service 会返回 Retry-After 的头部，表示你下次重试的时间。
400 无效请求，表示你的请求中，有不符合规范的头部
413 你的 payload 过大。最小的 payload 大小为 4kb

发送过程

能够从上面头部看出，push service 须要的头很复杂，若是咱们纯原生手写的话，估计很快就写烦了。这里推荐一下 github 里面的库，能够直接根据 app server key 来生成咱们想要的请求头。这里，咱们打算细节的了解一下每一个头部内容产生的相关协议。

applicationServerKey

首先，这个 key 是怎么拿到的？须要申请吗？
答案是：不须要。这个 key 只要你符合必定规范就 ok。不过一旦生成以后，不要轻易改动，由于后面你会一直用到它进行信息交流。规则简单来讲为：

  • 它是 server 端生成 pub/pri keys 的公钥
  • 它是能够经过 crypto 加密库，依照 P-256 曲线，生成｀ECDSA｀ 签名方式。
  • 该 key 须要是一个 8 位的非负整型数组（Unit8Array）

简单 demo 为:

function generateVAPIDKeys() {
  var curve = crypto.createECDH('prime256v1');
  curve.generateKeys();

  return {
    publicKey: curve.getPublicKey(),
    privateKey: curve.getPrivateKey(),
  };
}

// 也能够直接根据 web-push 库生成
const vapidKeys = webpush.generateVAPIDKeys();复制代码

具体头部详细信息以下：

头部参考

Authorization

Authorization 头部的值（上面也提到了）是一个 JSON web token（简称为 JWT）。基本格式为：

Authorization: WebPush <JWT Info>.<JWT Payload>.<Signature>复制代码

实际上，该头涵盖了不少信息（手写很累的。。。）。因此，咱们这里能够利用现有的一些 github 库，好比 jsonwebtoken。专门用来生成，JWT 的。咱们看一下它显示的例子：

demo

简单来讲，上面 3 部分都是将对象经过 private key 加密生成的字符串。
info 表明：

{  
  "typ": "JWT",  
  "alg": "ES256"  
}复制代码

用来表示 JWT 的加密算法是啥。
Payload 表明：

{  
  "aud": "https://some-push-service.org",
  "exp": "1469618703",
  "sub": "mailto:example@web-push-book.org"  
}复制代码

其中

  • aud 表示，push service 是谁
  • exp（expire）表示过时时间，而且是以秒为单位，最多只能是一天。
  • sub 用来表示 push service 的联系方式。

Signature 表明：
它是用来验证信息安全性的头。它是前面两个，JWT.info + '.' + JWT.payload 的字符串经过私有 key 加密的生成的结果。

Crypto-Key

这就是咱们公钥的内容，简单格式为：

Crypto-Key: dh=<URL Safe Base64 Encoded String>, p256ecdsa=<URL Safe Base64 Public Application Server Key>

// 两个参数分别表明：

dh=publicKey,p256ecdsa=applicationServerKey复制代码

Content-Type, Length & Encoding

这几个头是涉及 payload 传输时，须要用到的。基本格式为:

Content-Length: <Number of Bytes in Encrypted Payload> Content-Type: 'application/octet-stream' Content-Encoding: 'aesgcm'复制代码

其中，只有 Content-Length 是可变的，用来表示 payload 的长度。

TTL,Topic & Urgency

这几个头上面已经说清楚了，我这里就不赘述了。

最后放一张关于 SW 的总结图：

Service+Worker.svg-44kB

原文连接：ivweb.io/topic/58764…

相关推荐
WEB开发性能优化--核心定义介绍篇（1）
页面性能优化的利器 — Timeline
前端识别验证码思路分析

此文已由做者受权腾讯云技术社区发布，转载请注明文章出处
原文连接：www.qcloud.com/community/a…
获取更多腾讯海量技术实践干货，欢迎你们前往腾讯云技术社区

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程