如何在 Web-push 中向特定用户发送推送通知？

Posted 2023-02-24

【中文标题】如何在 Web-push 中向特定用户发送推送通知？

【英文标题】：How to send push notification to Specific user in Web-push?

【发布时间】：2019-12-12 10:49:44

【问题描述】：

我有一个现有的网站，我只需要将通知推送到该网站，因为我正在使用 Nodejs web-push 包，我可以接收通知，但我需要将其更改为 User Specific，

例如，我想根据国家/地区为用户发送通知

这是我的代码

client.js

const publicVapidKey = 'xxxxxx';

if ('serviceWorker' in navigator) 
  console.log('Registering service worker');

  run().catch(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;


async function run() 
  console.log('Registering service worker');
  const registration = await navigator.serviceWorker.
    register('worker.js');
  console.log('Registered service worker');

  console.log('Registering push');
  const subscription = await registration.pushManager.
    subscribe(
      userVisibleOnly: true,
      // The `urlBase64ToUint8Array()` function is the same as in
      // https://www.npmjs.com/package/web-push#using-vapid-key-for-applicationserverkey
      applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
    );
    // subscription.user = $('.header-user-name').find('span').text();
  console.log('Registered push');

  console.log('Sending push');
  await fetch('http://localhost:3000/subscribe?user='+$('.header-user-name').find('span').text(), 
    method: 'POST',
    body: JSON.stringify(subscription),
    headers: 
      'content-type': 'application/json'
    
  );
  console.log('Sent push');

Worker.js

console.log('Loaded service worker!');

self.addEventListener('push', ev => 
  const data = ev.data.json();
  console.log('Got push', data);

  ev.waitUntil(self.registration.showNotification(data.title, 
    body: 'Hello, World!',
    registration_ids: [$('.header-user-name').find('span').text()]
    icon: 'http://mongoosejs.com/docs/images/mongoose5_62x30_transparent.png'
  ));

);

服务器代码（localhost:3000/push）

app.get('/push',function(req,res) 

  const payload = JSON.stringify( title: 'Hello '+ user.name +' ' + req.query.title,  );

  console.log(req.query);
  console.log("yahooooooooooooooooooooooooooooooooo");

  webpush.sendNotification(newSubscription, payload).catch(error => 
    console.error(error.stack);
  );
  res.send(result : 'Success');
);

【参考方案1】：

经过长时间的差距，我找到了解决这个问题的方法。

要遵循的步骤：

创建一个 ExpressJs api 以将用户订阅存储到数据库中。 根据国家/地区从数据库中获取用户（您可以使用自己的后端语言，我选择了 Nodejs）。 创建一个可以使用给定参数（例如（国家、用户等）发送推送通知的 API。

快乐编码。

【讨论】：

请您详细说明一下。

@AnuragGupta 当您想向已订阅的用户发送通知时，您必须将 Web 推送订阅存储在数据库中以供将来参考。现在 Gopinath 说的是，你必须添加一个例如订阅条目的“国家”字段，然后您可以执行以下操作：从“国家=德国”的数据库中获取所有用户，然后向他们发送通知。

@AnuragGupta 每个订阅都是独一无二的吗？

【参考方案2】：

您可以使用ip-api.com 之类的服务，使用用户的 IP 来查找他们的国家/地区。获得国家信息后，您可以将其与推送订阅对象一起包含在请求正文中并发送到您的后端。因此，您将有机会细分您的订阅者并向他们发送具有不同内容的推送通知。