无需第三方工具实现PWA后台推送通知的技术咨询

以下是完全符合你需求的独立PWA推送实现方案，不依赖任何第三方服务，包含后台推送、定时触发、极简后端三个核心模块：

一、核心实现：Service Worker + Push API + 极简Node.js后端 #

1. 前端配置（基于已完成的基础PWA） #

确保你的Service Worker已注册，添加以下代码处理推送订阅与通知展示：

请求权限 & 订阅推送（主页面脚本）

if ('serviceWorker' in navigator && 'PushManager' in window) {
  window.addEventListener('load', async () => {
    const registration = await navigator.serviceWorker.register('/sw.js');
    
    // 请求通知权限
    const permission = await Notification.requestPermission();
    if (permission !== 'granted') return;

    // 生成推送订阅端点，需传入VAPID公钥
    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true, // 浏览器强制要求：所有推送必须对用户可见
      applicationServerKey: urlBase64ToUint8Array('你的VAPID公钥')
    });

    // 将订阅信息发送到后端保存
    await fetch('http://localhost:3000/save-subscription', {
      method: 'POST',
      body: JSON.stringify(subscription),
      headers: { 'Content-Type': 'application/json' }
    });
  });
}

// 辅助函数：转换VAPID密钥格式
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处理推送事件（sw.js）

// 监听推送事件，仅在PWA不在前台时展示通知
self.addEventListener('push', (event) => {
  const data = event.data?.json() || { title: 'PWA通知', body: '新消息提醒' };
  
  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: false }).then(clientList => {
      // 判断PWA是否在前台
      const isForeground = clientList.some(client => client.focused);
      if (!isForeground) {
        return self.registration.showNotification(data.title, {
          body: data.body,
          icon: '/icons/icon-192x192.png', // 替换为你的PWA图标
          vibrate: [200, 100, 200], // 震动节奏
          sound: '/notification-sound.mp3' // 自定义铃声（可选）
        });
      }
    })
  );
});

// 点击通知打开PWA
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow('/'));
});

2. 极简后端脚本（Node.js，无框架依赖） #

不需要复杂服务器，一个简单脚本即可处理订阅存储与推送触发：

1. 安装依赖：npm install web-push
2. 创建push-server.js：

const webpush = require('web-push');
const http = require('http');

// 生成VAPID密钥（首次运行时执行，之后注释）
// const vapidKeys = webpush.generateVAPIDKeys();
// console.log(vapidKeys);

// 配置VAPID密钥（替换为你自己生成的）
const vapidKeys = {
  publicKey: '你的VAPID公钥',
  privateKey: '你的VAPID私钥'
};

webpush.setVapidDetails(
  'mailto:your-email@example.com', // 联系邮箱，浏览器会展示给用户
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

// 简单存储订阅信息（生产环境可替换为数据库）
let subscriptions = [];

const server = http.createServer(async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'POST, GET');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  // 处理订阅保存请求
  if (req.url === '/save-subscription' && req.method === 'POST') {
    let body = '';
    req.on('data', chunk => body += chunk);
    req.on('end', () => {
      subscriptions.push(JSON.parse(body));
      res.writeHead(200);
      res.end('订阅成功');
    });
  }

  // 手动触发推送的接口（浏览器访问或curl调用）
  if (req.url === '/send-push' && req.method === 'GET') {
    const payload = JSON.stringify({
      title: '自定义通知',
      body: '这是来自独立后端的推送！'
    });

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

    res.writeHead(200);
    res.end('推送已触发');
  }
});

server.listen(3000, () => console.log('后端运行在http://localhost:3000'));

3. 运行脚本：node push-server.js，访问http://localhost:3000/send-push即可触发推送。

二、Web Periodic Background Sync API 说明 #

• 是否适合定时推送：适合非紧急的定时场景（如每日提醒），但它不是精确定时器，浏览器会根据用户行为、设备电量调整同步频率（最小间隔12小时）。
• 浏览器支持：目前仅Chrome、Edge、Opera支持，Firefox和Safari暂不兼容。
• 可靠性：依赖浏览器后台调度，无法保证100%准时，不适合实时推送需求。

简单定时推送实现 #

主页面注册同步任务：

if ('PeriodicSyncManager' in window) {
  navigator.serviceWorker.ready.then(async registration => {
    try {
      await registration.periodicSync.register('daily-notification', {
        minInterval: 24 * 60 * 60 * 1000 // 最小间隔24小时
      });
    } catch (err) {
      console.error('注册定时同步失败:', err);
    }
  });
}

Service Worker监听同步事件：

self.addEventListener('periodicsync', event => {
  if (event.tag === 'daily-notification') {
    event.waitUntil(
      clients.matchAll({ type: 'window', includeUncontrolled: false }).then(clientList => {
        const isForeground = clientList.some(client => client.focused);
        if (!isForeground) {
          return self.registration.showNotification('每日提醒', {
            body: '记得打开PWA看看！',
            vibrate: [200, 100, 200]
          });
        }
      })
    );
  }
});

三、关键注意事项 #

• 仅向PWA推送：通过clients.matchAll({ includeUncontrolled: false })过滤掉普通浏览器标签页用户，只匹配你的PWA窗口。
• 权限处理：必须获得用户通知权限才能推送，代码中已包含权限请求逻辑。
• 极简服务器替代：如果不想用Node.js，也可以用Deno编写更轻量的脚本，或用Python的Flask/FastAPI实现类似逻辑。

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