WebPushError and UnauthorizedRegistration when try to send push notification to Chrome and Opera, Firefox is OK

Question

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

On Firefox - I get the notification with the payload.

On Chrome and Opera I get WebPushError: Received unexpected response code and furthermore - UnauthorizedRegistration and Error 400.

The server side code I'm using to send the stuff is:

// 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 have put MY_GCM_SENDER_ID as gcm_sender_id in manifest.json file.
I took it from https://console.firebase.google.com/ - created a project and got the Sender ID from Settings - Cloud Messaging.

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

So ... Could anyone help to identify what am I doing wrong?

Answer 1

I managed to figure it out. And now I'm sending PUSH with payload successfully :)

The problem was that when I was registering for PUSH - I was doing 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'm able to send normal PUSH or PUSH with payload, with no problems.

More info:

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/

And regarding all the tutorials that tells you to use only the userVisibleOnly property...that doesn't work. I don't know why they would be recommending this.

Answer 2

• One of situations you will meet this error described following:

  One will produce the wrong process

  And Google tutorial also mention 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 push notification with payload in website:

  Add applicationServerKey in when you subscribe

• If you add applicationServerKey in when 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.

• Workable keys generator: Workable keys generator

• Workable google tutorial: Workable google tutorial

Conclution

1. I add applicationServerKey and cause errors
2. I use Workable keys generator but still errors
3. I follow Google tutorial to update service worker to prevent some error
4. works