Progressive Web App 推播通知: 网站推播通知用户端实作入门 (24)

什麽是网站推播通知

推播通知不管对 App 或是网站来说都是一种重新吸引用户来使用 App 的方法，所以目标是即使网站、App 关闭时也要能在背景接收推播。推播的目的是为了增加 engagement，在行销领域中 engagement 这个常见的指标就是指用户在网站或 APP 上的互动程度或者参与度。

网页推播通知用户端怎麽去实作

後端可以选择自己实作也可以直接串接使用现有的服务，程序撰写上相关操作的 JavaScript API 也相对简单，接下来就来一步步完成最基本的推播吧。

1. 检查支援度，然後针对支援的部分做渐进式增强

• serviceWorker: 背景也要可以收资料
• PushManager: 串接推播

if (!("serviceWorker" in navigator)) {
  // Service Worker 不支援
  return;
}

if (!("PushManager" in window)) {
  // Push API 不支援
  return;
}

2. 请求权限，浏览器需要允许推播通知

function askPermission() {
  return new Promise(function (resolve, reject) {
    const permissionResult = Notification.requestPermission(function (result) {
      resolve(result);
    });

    if (permissionResult) {
      permissionResult.then(resolve, reject);
    }
  }).then(function (permissionResult) {
    if (permissionResult !== "granted") {
      throw new Error("We weren't granted permission.");
    }
  });
}

3. 注册 serviceWorker: 相关处理会写在这边
4. 使用 PushManager 订阅推播: 其中的参数 userVisibleOnly 目前 Chrome 只支援每次收到推送时显示通知，这代表没有办法在背景偷偷做事情，applicationServerKey 则是会用到後端给的 Public Vapid Key，产生出来的 subscription 可以看成是 client 端的 ID。
5. 向 Sever 发送订阅: 把刚刚产生的 subscription 传送到後端

if ("serviceWorker" in navigator) {
  // 3. 注册 serviceWorker
  const register = await navigator.serviceWorker.register("/sw.js", {
    scope: "/",
  });

  // 4. 使用 PushManager 订阅推播
  const subscription = await register.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicVapidKey),
  });

  // 5. 向 Sever 发送订阅
  await fetch("/subscribe", {
    method: "POST",
    body: JSON.stringify(subscription),
    headers: {
      "Content-Type": "application/json",
    },
  });
}

6. 在 serviceWorker 中依照资料格式处理 push 事件，这里的例子为显示通知

• 字串: event.data.text()
• JSON: event.data.json()
• blob: event.data.blob()
• arrayBuffer: event.data.arrayBuffer()

7. 透过 event.waitUntil() 等待通知执行完成

self.addEventListener("push", (event) => {
  const data = event.data.json();

  const promiseChain = self.registration.showNotification(data.title, {
    body: "Yay it works!",
  });

  event.waitUntil(promiseChain);
});

这次的 Demo 连结如下也欢迎各位大大试玩看看:
https://linyencheng-push-notification.herokuapp.com/