WebPushError和UnauthorizedRegistration当试图向Chrome和Opera发送推送通知时，火狐是可以的

Question

我成功地运行了一个用于发送web推送通知-订阅用户推送通知，获取端点，从订阅对象生成两个browser键- p256dh和auth的工作示例。在服务器端，我生成VAPID密钥。因此，有了所有这些，我在web-push Node.js包上调用了Node.js，并且-我传递了一个有效负载。

在Firefox上-我收到了带有有效负载的通知。

在Chrome和Opera上，我得到了WebPushError: Received unexpected response code，还有- UnauthorizedRegistration和Error 400。

我用来发送这些东西的服务器端代码是：

// import our web-push package ..
var webPush = require('web-push');

webPush.setGCMAPIKey('MY_GCM_SENDER_ID');

// we generated the VAPID keys ..
var vapidKeys = {
    "publicKey": "...",
    "privateKey": "..."
};

// set our VAPID credentials ..
webPush.setVapidDetails(
  'mailto:{my email}',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

var device_endpoint = "https://android.googleapis.com/gcm/send/...";
var device_key = "...";
var device_auth = "...";


/*
 * Sending the notification ..
 */
webPush.sendNotification(
    {
        endpoint: device_endpoint,
        keys: {
            p256dh: device_key,
            auth: device_auth
        }
    },
    'My payload',
    {
        TTL: 86400, // 24 hours ..
    }
)
.then(function() {
    console.log('SUCCESS');
})
.catch(function(err) {
    console.log('Unsuccessful');
    console.log(err);
});

我还将MY_GCM_SENDER_ID作为gcm_sender_id放在manifest.json文件中。

我从https://console.firebase.google.com/那里获得了它--创建了一个项目，并从Settings - Cloud Messaging获得了Sender ID。

我在这里阅读过的说明：https://firebase.google.com/docs/cloud-messaging/js/client

所以..。有人能帮我找出我做错了什么吗？

Answer 1

我设法弄明白了。现在，我成功地发送了带有有效负载的PUSH :)

问题是，当我注册PUSH时，我是这样做的：

reg.pushManager.subscribe({
    userVisibleOnly: true
})

当我这样做的时候：

reg.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: new urlBase64ToUint8Array([VAPID public key)
})

然后一切都很顺利。现在我可以发送正常的推送或有效载荷的推送，没有问题。

更多信息：

1. https://rossta.net/blog/using-the-web-push-api-with-vapid.html
2. https://web-push-book.gauntface.com/chapter-02/01-subscribing-a-user/

对于所有告诉您只使用userVisibleOnly property...that的教程，它都不起作用。我不知道他们为什么要推荐这个。

Answer 2

• 将遇到以下错误的情况之一： 一个人会产生错误的过程 Google教程还提到了以下内容： open DevTools (Right Click > Inspect) and go to the Application panel, click the Service Workers tab and check the Update on Reload checkbox. When this checkbox is enabled the service worker is forcibly updated every time the page reloads.
• 如果要在网站中推送包含有效负载的通知： 将applicationServerKey添加到subscribe中
• 如果在applicationServerKey中添加subscribe

1. Keys generated by openssl not work for me.
2. Keys generated by vapid not work for me.
3. **Keys generated by website mentioned in google tutorial works.**

• 可操作的密钥生成器：可工作键发生器
• 可行的谷歌教程：可行的google教程

结论

1. 我添加applicationServerKey并导致错误
2. 我使用Workable keys generator，但仍然是错误
3. 我遵循Google tutorial更新服务工作人员以防止某些错误。
4. 作品