为Web Push Notification绑定唯一ID，解决同一设备重复数据库条目问题

这问题我之前做推送功能时也踩过坑，核心就是得给每个浏览器设备绑定一个稳定的唯一标识，用它来关联同一设备的多次订阅请求，避免重复插入数据库。下面是我验证过的可行方案：

1. 生成并持久化设备唯一ID #

首先在用户的浏览器里生成一个唯一ID，第一次访问时创建，之后一直复用。推荐用浏览器原生的crypto.randomUUID()生成，然后存在localStorage或者更持久的IndexedDB里（后者能避免用户清除缓存丢失ID）：

// 主页面中获取/生成设备唯一ID
async function getDeviceUniqueId() {
  // 先尝试从localStorage读取
  let deviceId = localStorage.getItem('web_push_device_uid');
  
  if (!deviceId) {
    // 生成新的UUID
    deviceId = crypto.randomUUID();
    // 持久化存储
    localStorage.setItem('web_push_device_uid', deviceId);
    // 可选：如果怕localStorage被清，同时存在IndexedDB里做备份
    await saveToIndexedDB('device_ids', { id: deviceId });
  }
  
  return deviceId;
}

// 简单的IndexedDB存储函数（可选）
async function saveToIndexedDB(storageName, data) {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('PushStorage', 1);
    request.onupgradeneeded = (e) => e.target.result.createObjectStore(storageName);
    request.onsuccess = (e) => {
      const db = e.target.result;
      const tx = db.transaction(storageName, 'readwrite');
      tx.objectStore(storageName).put(data);
      tx.oncomplete = () => { db.close(); resolve(); };
    };
    request.onerror = reject;
  });
}

2. 绑定ID与订阅数据，后端执行「插入或更新」 #

当用户开启通知、获取到Endpoint/auth/p256dh后，把设备唯一ID和这些订阅数据一起发给后端。后端数据库要给device_id字段加唯一索引，然后用「存在则更新，不存在则插入」的逻辑处理：

示例：MySQL语法 #

INSERT INTO push_subscriptions (device_id, endpoint, auth, p256dh, created_at)
VALUES (?, ?, ?, ?, NOW())
ON DUPLICATE KEY UPDATE 
  endpoint = VALUES(endpoint),
  auth = VALUES(auth),
  p256dh = VALUES(p256dh),
  updated_at = NOW();

示例：PostgreSQL语法 #

INSERT INTO push_subscriptions (device_id, endpoint, auth, p256dh, created_at)
VALUES ($1, $2, $3, $4, NOW())
ON CONFLICT (device_id) DO UPDATE SET
  endpoint = EXCLUDED.endpoint,
  auth = EXCLUDED.auth,
  p256dh = EXCLUDED.p256dh,
  updated_at = NOW();

这样不管页面刷新多少次，只要设备ID不变，数据库里只会保留一条该设备的最新订阅记录。

3. 处理Service Worker订阅变更事件 #

Service Worker更新时，可能会触发pushsubscriptionchange事件（订阅信息失效需要重新订阅），这时候也要复用设备ID去更新数据库，而不是插入新记录：

// 在Service Worker文件中
self.addEventListener('pushsubscriptionchange', async (event) => {
  // 获取新的订阅信息
  const newSubscription = await self.registration.pushManager.subscribe(event.oldSubscription.options);
  
  // 注意：Service Worker无法直接访问localStorage，需要从主页面通过postMessage传递设备ID
  // 或者提前把设备ID存在IndexedDB中，在这里读取
  const deviceId = await getDeviceIdFromIndexedDB();
  
  // 发送更新请求到后端
  await fetch('/api/update-push-sub', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      deviceId,
      endpoint: newSubscription.endpoint,
      auth: arrayBufferToBase64(newSubscription.getKey('auth')),
      p256dh: arrayBufferToBase64(newSubscription.getKey('p256dh'))
    })
  });
});

// 辅助函数：ArrayBuffer转Base64（适配推送订阅的密钥格式）
function arrayBufferToBase64(buffer) {
  return btoa(String.fromCharCode(...new Uint8Array(buffer)));
}

额外注意点 #

• 如果你的系统有用户登录态，可以把设备ID和用户ID绑定，这样即使用户换浏览器登录，也能区分不同设备的订阅记录。
• 定期清理数据库中长时间未更新的订阅记录（比如超过30天），避免无效数据堆积。

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