Unable to send push to browser(firefox, chrome) always getting InvalidRegistration

[souvickcse]

Expected Behaviour

Unable to send push notifiction to browser. For example

{
  multicast_id: 3474356041305334000,
  success: 1,
  failure: 0,
  canonical_ids: 0,
  results: [ { error: null } ]
}

Actual Behaviour

I am getting this :

{
  multicast_id: 3474356041305334000,
  success: 0,
  failure: 1,
  canonical_ids: 0,
  results: [ { error: 'InvalidRegistration' } ]
}

Reproduce Scenario (including but not limited to)

Every time.

Steps to Reproduce

Add push functionality in ionic app:

import { Push, PushObject, PushOptions } from '@ionic-native/push/ngx';
  pushObject;
  constructor(
    public alertController: AlertController,
    private push: Push,
    ) {
  }

setupPush() {
    this.pushObject = this.push.init({
      android: {
      },
      browser: {
        pushServiceURL: 'http://push.api.phonegap.com/v1/push',
      },
      ios: {
        alert: "true",
        badge: "false",
        sound: "true"
      },
      windows: {}
    });
    console.log("Push Init Called");
    this.pushObject.on('registration').subscribe((data: any) => {
      console.log('device token -> ' + data.registrationId);
    });
    this.pushObject.on('error').subscribe(error => console.error('Error with Push plugin' + error));
  }

Platform and Version (eg. Android 5.0 or iOS 9.2.1)

Firefox 77.0.1

Cordova CLI version and cordova platform version

cordova --version  9.0.0 (cordova-lib@9.0.1)
cordova platform version browser  6.0.0

Plugin version

phonegap-plugin-push 2.3.0 "PushPlugin"

Sample Push Data Payload

var gcm = require('node-gcm');
var sender = new gcm.Sender(firebaseKey);

module.exports = {
  sendPush(deviceIds, title, body) {
    var message = new gcm.Message();
    message.addNotification({
      title: 'Alert!!!',
      body: 'Abnormal data access',
      icon: 'ic_launcher'
    });
    // Actually send the message
    sender.send(message, { registrationTokens: deviceIds }, function (err, response) {
      if (err) console.error(err);
      else console.log(response);
    });

  },
};

Sample Code that illustrates the problem

{
  multicast_id: 1564376416527500000,
  success: 0,
  failure: 1,
  canonical_ids: 0,
  results: [ { error: 'InvalidRegistration' } ]
}

[eladnava]

@souvickcse It appears phonegap-plugin-push supports Web Push for Firefox and Chrome but the registration ID returned is not an FCM registration token.

It is a VAPID Web Push subscription token which you can only send to each browser vendor's Web Push API and not through FCM, nor node-gcm.

Therefore closing this as it is not related to FCM.

[souvickcse]

Hi, Can you please suggest me any npm(both for client and server) through which I can avail the push functionalities for web, iOS, and android? Thank You.

[eladnava]

You can keep using node-gcm for iOS and Android (through FCM), but for Web Push, just on your backend side, use another package such as web-push: https://github.com/web-push-libs/web-push

const webpush = require('web-push');

// VAPID keys should only be generated only once.
const vapidKeys = webpush.generateVAPIDKeys();

webpush.setGCMAPIKey('<Your GCM API Key Here>');
webpush.setVapidDetails(
  'mailto:example@yourdomain.org',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

// This is the same output of calling JSON.stringify on a PushSubscription
const pushSubscription = {
  endpoint: '.....',
  keys: {
    auth: '.....',
    p256dh: '.....'
  }
};

webpush.sendNotification(pushSubscription, 'Your Push Payload Text');

[souvickcse]

Ok Thank You.