Windows IIS环境下PWA推送通知实现入门求助

1. 先搞定基础环境：在Windows服务器装Node.js #

• 下载Windows版Node.js（选LTS稳定版），安装时务必勾选「Add to PATH」，确保命令行能直接调用node和npm。
• 验证安装：打开CMD/PowerShell，输入node -v和npm -v，能显示版本号就算成功。

2. 生成VAPID密钥对（推送身份验证必备） #

VAPID是Web推送的标准身份机制，跨平台通用，和Linux/Windows无关：

• 全局安装web-push工具：npm install -g web-push
• 生成密钥：输入web-push generate-vapid-keys，会得到公钥和私钥，把这俩存好，后面全要用到。

3. 前端集成VAPID并存储用户订阅信息 #

用户授权通知后，要获取并保存他们的推送订阅信息到你的IIS后端：

// 把VAPID公钥转成浏览器API要求的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);
  return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)));
}

// 注册Service Worker后请求推送订阅
navigator.serviceWorker.ready.then(async (registration) => {
  const publicKey = '你的VAPID公钥';
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicKey)
  });
  // 把订阅信息发送到后端存储（比如存到SQL Server/MySQL/JSON文件）
  await fetch('/save-subscription', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription)
  });
});

• 后端需要写一个接口（用ASP.NET、PHP或者Node.js都行）来接收并保存所有用户的subscription数据。

4. 搭建Windows环境的推送触发服务 #

用Node.js写一个简单的推送脚本，或者做个Web接口，方便你从本地页面触发推送：

1. 新建文件夹pwa-push-service，进入后初始化npm：npm init -y
2. 安装依赖：npm install web-push express
3. 新建push-server.js：

const webpush = require('web-push');
const express = require('express');
const fs = require('fs');
const app = express();
app.use(express.json());

// 配置VAPID密钥
const vapidKeys = {
  publicKey: '你的VAPID公钥',
  privateKey: '你的VAPID私钥'
};

webpush.setVapidDetails(
  'mailto:你的邮箱地址', // 推送服务商用于联系你的邮箱
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

// 读取存储的用户订阅列表（假设存在subscriptions.json）
const getSubscriptions = () => {
  try {
    return JSON.parse(fs.readFileSync('./subscriptions.json', 'utf8'));
  } catch (e) {
    return [];
  }
};

// 触发推送的接口
app.post('/trigger-push', (req, res) => {
  const payload = JSON.stringify(req.body.payload || {
    title: '应用更新通知',
    body: '你的PWA有新内容啦！',
    icon: '/icons/icon-192x192.png'
  });

  const subscriptions = getSubscriptions();
  subscriptions.forEach(sub => {
    webpush.sendNotification(sub, payload)
      .catch(err => console.error('推送失败:', err.endpoint));
  });

  res.status(200).send(`已向${subscriptions.length}个用户触发推送`);
});

// 启动服务，监听端口3000
app.listen(3000, () => {
  console.log('推送服务运行在 http://你的服务器IP:3000');
});

4. 启动服务：node push-server.js，之后你就可以通过POST请求http://你的服务器IP:3000/trigger-push（带自定义payload参数）来给所有用户发推送。

5. （可选）把Node.js推送服务托管到IIS #

如果想让推送服务和你的IIS站点整合，更稳定运行：

• 安装IIS的「URL Rewrite」和「Node.js Handler」模块（微软官方可下载）。
• 在IIS新建网站，指向pwa-push-service文件夹，应用程序池设为「无托管代码」。
• 配置URL重写规则，把请求转发到Node.js服务的3000端口。

6. 测试验证 #

• 安装PWA到设备，授权通知权限，确认订阅信息已存入后端。
• 调用推送接口，检查设备是否收到通知（不管应用是否打开）。

注意事项 #

• 必须用HTTPS环境（本地localhost例外），Web Push只支持HTTPS。
• 订阅信息会过期，后端要处理推送失败的情况，删除无效订阅。
• 免费服务器资源有限，推送大量用户时建议分批处理。

内容的提问来源于stack exchange，提问作者TonyC