Progressive Web App Web Push: 网站推播通知服务器实作入门 (23)

什麽是网站推播通知

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

网页推播通知服务器怎麽去实作

在还没实际看教学文件前，会发现如果要从零开始依照推播协议的标准开始实作流程是相对复杂:

1. 了解并按照协议去处理相关的内文传输格式
2. 了解什麽是 VAPID 金钥对的概念以及生成方式
3. 数据加解密流程

再来就是触发推播如果遇到问题，会较困难去排除问题。当然随着开发者工具的进步会慢慢改善，但还是建议使用现成的套件工具来处理推播，Google 提供的 Firebase 就是不错的方案，如果还是想要体验自行实作，也可以使用 web-push 这个套件，来缩短开发时间。

接下来就来示范用 web-push 实作推播服务器的主要步骤：

1. 透过现有的推播套件产生并配置相关的 VAPID 金钥对
2. 建立一个 API 接收网页的订阅请求
3. 从透过推播套件从後端针对刚刚的订阅请求推播消息

可以发现如果是使用套件，底层标准的部分就都不需要实作，可以着重在商业逻辑的开发，透过 node.js 最简单的版本推播实作程序码如下:

const express = require("express");
const webPush = require("web-push");

const app = express();
const webPush = require("web-push");

// 1. 透过现有的推播套件配置相关的 VAPID 金钥对
const publicVapidKey = process.env.PUBLIC_VAPID_KEY;
const privateVapidKey = process.env.PRIVATE_VAPID_KEY;
webPush.setVapidDetails(
  "mailto:[email protected]",
  publicVapidKey,
  privateVapidKey
);

// 2. 建立一个 API 接收网页的订阅请求
app.post("/subscribe", (req, res) => {
  // 收到订阅请求
  const subscription = req.body;

  res.status(201).json({});

  const payload = JSON.stringify({
    title: "推播讯息内容",
  });

  // 3. 从透过推播套件从後端针对刚刚的订阅请求推播消息
  webPush
    .sendNotification(subscription, payload)
    .catch((error) => console.error(error));
});

如果需要进阶一点的使用，可以多实作更多相关逻辑:

1. 实作订阅请求的储存分类等机制: 把每次订阅的 const subscription = req.body; 储存起来，方便後续进阶操作

• 举例来说订阅时可以多带参数 /subscribe?device=android&time=morning

2. 实做 API 去处理要推播讯息: 讯息可以针对装置或是用户做分众，或是取消推播等等

这次小编其实在後端也没有多做复杂的处理，目的是为了测试关闭页面後仍然可以推播，所以补上了一分钟後再多送一次的逻辑。

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

setTimeout(() => {
  webPush
    .sendNotification(subscription, payload30)
    .catch((error) => console.error(error));
}, 60 * 1000);