解释 Web Push API 如何实现服务端的推送通知到浏览器，以及其在离线应用和用户召回中的作用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！我是今天的主讲人，咱们今天聊聊 Web Push API 这个神奇的东西。它能让你的网站像个称职的小秘书一样，即使浏览器关了，也能把重要消息推送到用户眼前，想想就觉得厉害吧？

咱们先来理理思路，Web Push API 到底是个啥玩意儿，它怎么运作的，以及它在离线应用和用户召回上能发挥什么作用。

一、Web Push API：你的私人信使

简单来说，Web Push API 就像一个邮递员，专门负责把你的网站的消息（信）送到用户（收件人）手中。不过这个邮递员有点特殊，它不用敲门，直接把信送到用户桌面上（浏览器通知）。

更学术一点的解释是：Web Push API 是一系列标准的 Web 技术，允许服务端通过推送服务（Push Service）向用户的浏览器发送消息，即使浏览器或者网页已经关闭。

二、Web Push 的三大主角

要理解 Web Push API 的工作原理，我们需要认识三个关键角色：

Service Worker (服务工作线程): 这是你的网站的代理人，一个运行在浏览器后台的 JavaScript 脚本。它负责监听推送事件，接收推送消息，然后展示通知。它就像你的私人管家，时刻待命，处理各种推送事务。
Push Service (推送服务): 这是一个中间人，负责接收来自你服务器的推送消息，并将其传递给用户的浏览器。不同的浏览器可能使用不同的 Push Service，例如 Chrome 使用 Google Cloud Messaging (FCM)，Firefox 使用 Mozilla Push Service。你可以把它想象成一个大型的邮局，负责邮件的中转和投递。
Application Server (应用服务器): 这是你的服务器，负责生成推送消息，并将其发送给 Push Service。它就像一个发件人，负责写信并寄出去。

三、Web Push 工作流程：信件的旅程

Web Push 的工作流程可以概括为以下几个步骤，我们用寄信的例子来类比一下：

订阅推送 (获得地址)：

用户访问你的网站，网站询问用户是否允许接收推送通知。
如果用户同意，浏览器会生成一个 Push Subscription (推送订阅) 对象，其中包含 Push Service 的 URL 和一些加密信息。这个 Push Subscription 就像用户的家庭住址，是服务器发送消息的必要条件。
网站将 Push Subscription 对象发送到你的应用服务器保存起来。

// 订阅推送
navigator.serviceWorker.ready.then(function(registration) {
  return registration.pushManager.subscribe({
    userVisibleOnly: true, // 必须设置为 true
    applicationServerKey: urlBase64ToUint8Array(publicVapidKey) // VAPID 公钥
  });
}).then(function(subscription) {
  console.log('订阅成功:', subscription);
  // 将 subscription 发送到服务器
  sendSubscriptionToServer(subscription);
}).catch(function(error) {
  console.error('订阅失败:', error);
});

// 将 Base64 编码的 URL 转换为 Uint8Array
function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

发送推送消息 (寄信)：

当你的应用服务器需要向用户发送推送消息时，它会使用之前保存的 Push Subscription 对象，构造一个 HTTP POST 请求，发送到 Push Service 的 URL。
推送消息通常包含标题、内容、图标等信息。
服务器需要使用 VAPID (自愿应用程序服务器识别) 密钥对请求进行签名，以证明其身份。VAPID 就像你的身份证，证明你是合法的发件人。

// 使用 web-push 库发送推送消息 (Node.js)
const webpush = require('web-push');

// VAPID 密钥
const publicVapidKey = '你的公钥';
const privateVapidKey = '你的私钥';

webpush.setVapidDetails(
  'mailto:[email protected]', // 你的邮箱
  publicVapidKey,
  privateVapidKey
);

// 推送订阅对象
const subscription = {
  endpoint: '推送服务的 URL',
  keys: {
    p256dh: '加密密钥',
    auth: '认证密钥'
  }
};

// 推送消息内容
const payload = JSON.stringify({
  title: '你好！',
  body: '这是一条推送消息',
  icon: 'icon.png'
});

// 发送推送
webpush.sendNotification(subscription, payload)
  .then(result => console.log('推送成功:', result))
  .catch(error => console.error('推送失败:', error));

接收推送消息 (收信)：

Push Service 接收到来自你服务器的推送消息后，会将其转发给用户的浏览器。
浏览器会唤醒 Service Worker，并触发 push 事件。

// Service Worker 中监听 push 事件
self.addEventListener('push', function(event) {
  console.log('收到推送消息:', event);

  // 解析推送消息内容
  const payload = event.data ? event.data.json() : {title: '默认标题', body: '默认消息'};

  // 展示通知
  event.waitUntil(
    self.registration.showNotification(payload.title, {
      body: payload.body,
      icon: payload.icon || 'default_icon.png'
    })
  );
});

展示通知 (阅读信件)：
- Service Worker 接收到 push 事件后，可以根据推送消息的内容，展示一个系统通知。
- 用户点击通知后，可以打开你的网站或者执行一些特定的操作。

四、VAPID：保护你的推送通道

VAPID (Voluntary Application Server Identification) 是一种机制，允许你的应用服务器证明其身份，防止恶意服务器冒充你的服务器发送推送消息。

VAPID 使用公钥和私钥对，公钥用于订阅推送时，私钥用于签名推送请求。就像给信件盖上你的私章，证明这封信确实是你发出的。

你可以使用一些在线工具或者 Node.js 库生成 VAPID 密钥对。

五、Web Push 的优点

离线推送: 即使浏览器或者网页已经关闭，只要 Service Worker 还在运行，就能接收推送消息。
实时性: 推送消息可以实时到达用户，无需用户主动刷新网页。
用户召回: 可以通过推送消息提醒用户，提高用户活跃度。
跨平台: 可以在不同的浏览器和操作系统上使用。

六、Web Push 的缺点

权限请求: 需要用户授权才能发送推送通知，如果用户拒绝授权，就无法使用 Web Push。
兼容性: 虽然 Web Push 已经得到了广泛的支持，但仍然有一些旧版本的浏览器不支持。
推送配额: 推送服务可能会对推送消息的数量和频率进行限制。
可靠性: 推送消息的传递可能会受到网络状况的影响，无法保证 100% 的可靠性。

七、Web Push 在离线应用中的作用

Web Push 在离线应用中扮演着重要的角色，它可以：

同步数据: 当网络恢复时，可以通过推送消息通知 Service Worker 同步数据。
提醒用户: 即使应用处于离线状态，也可以通过推送消息提醒用户，例如提醒用户有新的消息或者任务。
更新缓存: 当应用有更新时，可以通过推送消息通知 Service Worker 更新缓存。

八、Web Push 在用户召回中的作用

Web Push 是一个强大的用户召回工具，它可以：

提醒用户: 可以通过推送消息提醒用户，例如提醒用户有新的内容或者活动。
个性化推荐: 可以根据用户的兴趣和行为，推送个性化的内容。
促成转化: 可以通过推送消息引导用户完成购买或者注册等操作。

九、Web Push 的最佳实践

尊重用户: 不要滥用推送通知，只发送用户真正关心的内容。
个性化推送: 根据用户的兴趣和行为，推送个性化的内容。
提供价值: 推送通知应该对用户有价值，例如提供有用的信息或者提醒。
测试和优化: 不断测试和优化推送通知，提高推送的点击率和转化率。
错误处理: 妥善处理推送失败的情况，例如记录错误日志或者重试发送。

十、代码示例：一个简单的 Web Push 应用

为了帮助大家更好地理解 Web Push API，我们来创建一个简单的 Web Push 应用。

1. HTML (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>Web Push Demo</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <h1>Web Push Demo</h1>
  <button id="subscribeBtn">订阅推送</button>
  <script src="main.js"></script>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('sw.js')
        .then(function(registration) {
          console.log('Service Worker 注册成功:', registration);
        })
        .catch(function(error) {
          console.error('Service Worker 注册失败:', error);
        });
    }
  </script>
</body>
</html>

2. Manifest (manifest.json):

{
  "name": "Web Push Demo",
  "short_name": "Push Demo",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000"
}

3. Service Worker (sw.js):

self.addEventListener('push', function(event) {
  console.log('收到推送消息:', event);

  const payload = event.data ? event.data.json() : {title: '默认标题', body: '默认消息'};

  event.waitUntil(
    self.registration.showNotification(payload.title, {
      body: payload.body,
      icon: payload.icon || 'icon.png'
    })
  );
});

self.addEventListener('notificationclick', function(event) {
  console.log('通知被点击:', event);
  event.notification.close();
  event.waitUntil(
    clients.openWindow('https://www.example.com') // 替换成你的网站地址
  );
});

4. JavaScript (main.js):

const subscribeBtn = document.getElementById('subscribeBtn');

subscribeBtn.addEventListener('click', function() {
  subscribePush();
});

function subscribePush() {
  navigator.serviceWorker.ready.then(function(registration) {
    return registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(publicVapidKey) // 替换成你的 VAPID 公钥
    });
  }).then(function(subscription) {
    console.log('订阅成功:', subscription);
    sendSubscriptionToServer(subscription); // 将 subscription 发送到服务器
  }).catch(function(error) {
    console.error('订阅失败:', error);
  });
}

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

function sendSubscriptionToServer(subscription) {
  // TODO: 将 subscription 发送到你的服务器
  console.log('将 subscription 发送到服务器:', subscription);
}

5. 服务器端代码 (Node.js)：

const webpush = require('web-push');
const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

const publicVapidKey = '你的公钥'; // 替换成你的 VAPID 公钥
const privateVapidKey = '你的私钥'; // 替换成你的 VAPID 私钥

webpush.setVapidDetails(
  'mailto:[email protected]', // 替换成你的邮箱
  publicVapidKey,
  privateVapidKey
);

app.post('/subscribe', (req, res) => {
  const subscription = req.body;

  console.log('收到订阅请求:', subscription);

  // TODO: 将 subscription 保存到数据库

  res.status(201).json({ message: '订阅成功' });
});

app.post('/push', (req, res) => {
  const subscription = {
    endpoint: '推送服务的 URL', // 从数据库中获取
    keys: {
      p256dh: '加密密钥', // 从数据库中获取
      auth: '认证密钥' // 从数据库中获取
    }
  };

  const payload = JSON.stringify({
    title: '你好！',
    body: '这是一条来自服务器的推送消息',
    icon: 'icon.png'
  });

  webpush.sendNotification(subscription, payload)
    .then(result => {
      console.log('推送成功:', result);
      res.status(200).json({ message: '推送成功' });
    })
    .catch(error => {
      console.error('推送失败:', error);
      res.status(500).json({ message: '推送失败' });
    });
});

const port = 3000;
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

十一、总结

Web Push API 是一项强大的技术，可以帮助你与用户建立更紧密的联系，提高用户活跃度和转化率。希望今天的讲座能帮助大家更好地理解 Web Push API 的工作原理，并在实际项目中应用它。记住，不要滥用推送通知，尊重用户，提供有价值的内容，才能真正发挥 Web Push API 的威力。

今天的讲座就到这里，谢谢大家！祝大家编码愉快！

发表回复 取消回复

发表回复取消回复