推送通知未发送到 chrome（桌面级）答案

【问题标题】：Push notification is not being sent to chrome(desktop level)推送通知未发送到 chrome（桌面级）
【发布时间】：2017-02-23 20:43:21
【问题描述】：

这是我的 server.js 代码，它使用 web-push 模块发送通知。

exports.sendWelcomePushNotification = function (req, res) {
   var details = {
      endpoint: req.body.endpoint,
      key: req.body.key,
      secret: req.body.authSecret
   }
   webPush.sendNotification(details.endpoint, {TTL: 0, payload: 'You have subscribed to Pushnotification.', userPublicKey: details.key, userAuth: details.secret}).then(function () {
      res.sendStatus(200).json({message: 'User successfully subscribed'});
   });
};

这是我的浏览器客户端代码，用于捕获端点、身份验证和密钥：

 endpoint = subscription.endpoint;
 var rawKey = subscription.getKey ? subscription.getKey('p256dh') : '';
 key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : '';
 var rawAuthSecret = subscription.getKey ? subscription.getKey('auth') : '';
 authSecret = rawAuthSecret ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawAuthSecret))) : '';

这是监听通知的 service-worker 代码：

self.addEventListener('push', function (event) {
  var payload = event.data ? event.data.text() : 'No Text Body';
  console.log(payload,'payload');
  event.waitUntil(
    self.registration.showNotification('Notify Message', {
        lang: 'la',
        body: 'You have subscribed to Pushnotification.',
        icon: 'https://pushover.net/images/icon-256.png',
        requireInteraction: true
    })
  );
});

此代码适用于 firefox.i.e；当我允许通知时，将发送 api 请求并且网络推送正在将推送通知发送到端点并且我能够获得欢迎推送通知。但是chrome中的相同代码不起作用。 IE;它没有给出任何错误，同时也没有给出欢迎推送通知。

有人可以帮我解决这个问题吗？任何形式的帮助都将受到高度赞赏。谢谢。

【问题讨论】：

这通常是由于您的 GCM api 密钥和您的发件人 ID（在清单中声明）不匹配造成的。检查它们，然后从浏览器取消订阅并重新订阅以推送通知
我已将项目编号作为发件人 ID，将服务器密钥作为 GCM API 密钥。
您查看过软件日志吗？你在 chrome 中得到了什么吗？
没有。我什么也没得到。

标签： node.js google-chrome notifications service-worker web-push

【解决方案1】：

如果您使用 web-push，它可能与您的加密数据有关。试试下面的 server.js 代码：

var webPush = require('web-push');

const VALID_SUBSCRIPTION = {
  endpoint: 'your-endpoint-id',
  keys: {
    p256dh: 'userPublicKey',
    auth: 'your-auth-secret'
 }
};

var payload = {
   title: "This is a title",
   body: "this is the body",
   icon: "images/someImageInPath.png"
}

webPush.setGCMAPIKey("your-gcmapikey");

webPush.sendNotification(VALID_SUBSCRIPTION.endpoint, {
    TTL: 10,
    payload: JSON.stringify(payload),
    userPublicKey: VALID_SUBSCRIPTION.keys.p256dh,
    userAuth: VALID_SUBSCRIPTION.keys.auth,
  })
  .then(function() {
    console.log(JSON.stringify(payload));
  });

【讨论】：

VALID_SUBSCRIPTION.keys.p256dh, VALID_SUBSCRIPTION.keys.auth 是订阅密钥和身份验证值对吗？我在网络推送中给出了相同的值。

【解决方案2】：

对于 Chrome，您需要设置 GCM API 密钥 (https://github.com/web-push-libs/web-push#setgcmapikeyapikey) 或使用 VAPID (https://github.com/web-push-libs/web-push#using-vapid-key-for-applicationserverkey)。

我建议同时支持它们，因为 Opera 不支持 VAPID，但可以与 GCM 一起使用。

【讨论】：

gcm_sender_id 和 GCM API 密钥是否相同？
不，它们是两个不同的值。发件人 ID 是应用清单中的值。
我已将项目编号作为发件人 ID，将服务器密钥作为 GCM API 密钥。