WebPushError and UnauthorizedRegistration when trying to send a push notification in Chrome and Opera, Firefox is fine

Question

I managed to run a working example for sending web push notifications - to subscribe a user to push notifications, get an endpoint, generate two browser keys from the subscription object - p256dh and auth . On the server side, I generate VAPID keys. So, with all this, I call sendNotification web-push Node.js, and also I sendNotification payload.

On Firefox - I get a notification with a payload.

In Chrome and Opera, I get WebPushError: Received unexpected response code and, what's more, UnauthorizedRegistration and Error 400 .

The server side code that I use to send stuff:

 // 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); }); 

I also put MY_GCM_SENDER_ID as gcm_sender_id in the manifest.json file.
I took it from https://console.firebase.google.com/ - created a project and got a Sender ID in Sender ID Settings - Cloud Messaging .

I read the instructions for this here: https://firebase.google.com/docs/cloud-messaging/js/client

So ... Can anyone help determine what I'm doing wrong?

Answer 1

I managed to find out. And now I am successfully sending PUSH with a payload :)

The problem was that when I registered on PUSH - I did it like this:

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

When I did it like this:

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

then it worked just fine. Now I can send normal PUSH or PUSH with payload, no problem.

More information:

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/

As for all tutorials that tell you to use only the userVisibleOnly property ... this doesn't work. I do not know why they would recommend this.

Answer 2

• In one of the situations you will encounter this error, described below:

  The result will be the wrong process

  The Google tutorial also mentions the following:

  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.

• If you want to send a notice using useful information on the website:

  Add applicationServerKey when you subscribe

• If you add applicationServerKey when subscribe

  • The keys generated by openssl do not work for me.
  • The keys created by vapid do not work for me.
  • The keys created by the website specified in the google tutorial work.

• Healthy Key Generator : Healthy Key Generator

• A working Google tutorial: A working Google tutorial

Conclution

• I add applicationServerKey and cause errors
• I use Workable keys generator , but still errors
• I am following the Google tutorial to update the service to prevent some error.
• working