HTML5 Push API实现消息推送全攻略：Service Worker + VAPID密钥实战

HTML5的Push API有什么用？如何实现消息推送？

在现代Web开发中，实时性与用户参与度是衡量应用体验的重要指标。HTML5的Push API（推送API）正是为此而生，它赋予了Web应用原生App般的能力——即使在用户没有打开网页的情况下，也能接收并显示服务器推送的消息。

一、Push API有什么用？

Push API的核心作用是实现服务器向客户端的主动、实时消息推送。它的主要应用场景包括：

1. 提升用户留存与活跃度：当有重要更新、新闻提醒、聊天消息或促销活动时，通过推送通知唤起用户注意，引导用户重新回到网站。

2. 后台数据同步提醒：当后台任务完成（如视频转码完毕、报表生成完毕），及时通知用户，而无需用户一直停留在页面上刷新等待。

3. 节省设备资源：传统的轮询方式需要客户端不断向服务器发送请求，极其消耗流量和电量；Push API由浏览器底层和推送服务维护长连接，应用进程甚至可以完全关闭，大幅节省资源。

二、Push API的工作原理

Push API的实现并非单一技术，而是依赖于Service Worker、Push API和Notification API三者的协同工作。其核心流程如下：

1. 注册Service Worker：Push API必须在Service Worker中运行，因为Service Worker可以独立于网页在后台运行。

2. 申请权限并订阅：向用户请求通知权限，成功后调用 pushManager.subscribe() 生成一个订阅对象，该对象包含一个唯一的终端URL。

3. 发送订阅信息给后端：将订阅对象发送给应用的后端服务器保存。

4. 后端触发推送：当需要推送消息时，后端服务器按照特定格式携带数据，向第三方推送服务（如FCM、Mozilla的推送服务）发送请求。

5. 浏览器接收并展示：第三方推送服务将消息推送到用户浏览器，浏览器唤醒对应的Service Worker，触发 push 事件，进而弹出系统通知。

三、如何实现消息推送？

下面将分步骤展示如何实现一个完整的Web推送功能。

1. 注册Service Worker并申请权限

在主页面中，我们需要检查浏览器支持情况，注册Service Worker，并在注册成功后请求通知权限。

// main.js
if ('serviceWorker' in navigator && 'PushManager' in window) {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
        console.log('Service Worker 注册成功');
        // 请求通知权限
        Notification.requestPermission().then(function(permission) {
            if (permission === 'granted') {
                console.log('通知权限已授予');
                subscribeUserToPush(registration);
            } else {
                console.warn('通知权限被拒绝');
            }
        });
    }).catch(function(error) {
        console.error('Service Worker 注册失败:', error);
    });
}

2. 订阅推送服务

获得权限后，使用 pushManager.subscribe() 订阅推送。这里需要配置 applicationServerKey（即VAPID公钥），用于确保只有你的服务器能向该用户推送消息。

// main.js
function subscribeUserToPush(registration) {
    const applicationServerKey = 'YOUR_PUBLIC_VAPID_KEY_HERE'; // 替换为你的VAPID公钥
    registration.pushManager.subscribe({
        userVisibleOnly: true, // 必须为true，表示推送必须显示通知
        applicationServerKey: applicationServerKey
    }).then(function(subscription) {
        console.log('用户订阅成功:', JSON.stringify(subscription));
        // 将订阅对象发送给后端服务器保存
        sendSubscriptionToBackEnd(subscription);
    }).catch(function(error) {
        console.error('订阅失败:', error);
    });
}

function sendSubscriptionToBackEnd(subscription) {
    // 将订阅信息发送给后端接口
    fetch('https://www.ipipp.com/api/save-subscription', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(subscription)
    }).then(function(response) {
        if (!response.ok) {
            throw new Error('发送订阅信息失败');
        }
        console.log('订阅信息已发送至后端');
    }).catch(function(error) {
        console.error(error);
    });
}

3. 在Service Worker中监听推送事件

当推送消息到达时，浏览器会唤醒Service Worker并触发 push 事件。我们需要在 sw.js 中监听该事件并展示通知。

// sw.js
self.addEventListener('push', function(event) {
    let data = {};
    if (event.data) {
        try {
            data = event.data.json();
        } catch (e) {
            data = { title: '默认标题', body: event.data.text() };
        }
    } else {
        data = { title: '默认标题', body: '没有携带数据' };
    }

    const title = data.title || '收到新消息';
    const options = {
        body: data.body || '点击查看详情',
        icon: '/images/icon.png',
        badge: '/images/badge.png'
    };

    // 使用 waitUntil 确保Service Worker在通知显示前保持活跃
    event.waitUntil(self.registration.showNotification(title, options));
});

// 监听通知点击事件
self.addEventListener('notificationclick', function(event) {
    event.notification.close(); // 关闭通知
    // 打开或聚焦网站窗口
    event.waitUntil(
        clients.openWindow('https://www.ipipp.com')
    );
});

4. 后端触发推送（以Node.js为例）

后端需要使用Web推送库向第三方推送服务发送请求。这里以Node.js的 web-push 库为例。

// server.js (Node.js 后端示例)
const webpush = require('web-push');
const express = require('express');
const app = express();
app.use(express.json());

// 配置VAPID密钥
const publicVapidKey = 'YOUR_PUBLIC_VAPID_KEY_HERE';
const privateVapidKey = 'YOUR_PRIVATE_VAPID_KEY_HERE';
webpush.setVapidDetails('mailto:your-email@ipipp.com', publicVapidKey, privateVapidKey);

// 假设从数据库中获取了之前保存的订阅对象
let savedSubscription = null;

app.post('/api/save-subscription', (req, res) => {
    savedSubscription = req.body;
    res.status(201).json({});
});

app.post('/api/trigger-push', (req, res) => {
    const payload = JSON.stringify({ title: '后端推送', body: '这是一条来自服务器的推送消息！' });
    
    if (savedSubscription) {
        webpush.sendNotification(savedSubscription, payload).then(() => {
            res.status(200).json({ message: '推送成功' });
        }).catch(err => {
            console.error('推送发送失败:', err);
            res.sendStatus(500);
        });
    } else {
        res.status(404).json({ error: '未找到订阅信息' });
    }
});

app.listen(3000, () => console.log('服务器运行在3000端口'));

四、注意事项

1. HTTPS环境：出于安全考虑，Service Worker和Push API只能在HTTPS环境下运行（本地localhost除外）。

2. VAPID密钥：你需要生成一对VAPID（Voluntary Application Server Identification）密钥，它用于验证你的服务器身份，防止他人冒充向你用户发送推送。

3. 用户隐私：推送必须经过用户明确授权，且 userVisibleOnly 参数目前主流浏览器强制要求为 true，即不允许静默推送，必须显示通知。

通过以上步骤，你就可以在Web应用中实现类似原生App的消息推送功能，极大地提升应用的实时交互能力。

Push APIService Worker消息推送VAPID密钥通知权限