404 error sending push with web-push

[alchematrix0]

Setup

Operating System: OS X 10.13.6 Node Version: 8+ web-push Version: ^3.3.3

Browsers

• [ ] Chrome
• [ ] Firefox
• [ X ] Brave for Android
• [ X ] Firefox for Android
• [ ] Opera for Android
• [ ] Samsung Internet Browser
• [ ] Other

Tested with

FF dev edition: 69.0b13 Firefox for Android: latest Chromium: 75.0.3770.80 Brave: 1.0.92 chromium 73.0.3683

Problem

Failing to receive push notifications on mobile browsers but am 100% successful when it comes to desktop chrome and desktop Firefox. Mobile Firefox times out at the call to retrieve the subscription, not sure what's uo there. Error below is what I see in my server logs trying to send to Brave (chrome) on Android.

Expected

Expecting to receive push notifications in mobile browsers.

Features Used

• [ X ] VAPID Support
• [ X ] GCM API Key
• [ X ] Sending with Payload

Example / Reproduce Case

sendPush is passed a subscription:

{"endpoint":"https://android.googleapis.com/gcm/send/APA91bFUe9TBIeqs9WrkcBhVa4rXfl5O2kiuzZwO6W-pkEY8SqOfvWydppOObv4ujXsqrn0w3bVIt8PUz5W2I9Yd2oAc91z3UUVi9ISd3p51-87S0Qdi6ZUYgGWTXk4Ut3I0NGbC-WtG","expirationTime":null,"keys":{"p256dh":"BBv_KznIPvyOvLcSFQC0lrgUfH1O-RznjkL9tlZKJp7nY6P5gjC21Xh3aUH_3sqNc71rPjDzUI5aL8bzu6vYp_c","auth":"FvPaHA_0pXkbXUbWpvFMZQ"}}

and a payload which is just a string. Server side code:

const webPush = require("web-push")
webPush.setGCMAPIKey(process.env.GCMAPIKey)
webPush.setVapidDetails(
  'mailto:[email protected]',
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
)

module.exports = {
  sendPush: function (subscription, payload, options = {}) {
    try {
      if (!process.env.VAPID_PUBLIC_KEY || !process.env.VAPID_PRIVATE_KEY) {
        console.log("You must set the VAPID_PUBLIC_KEY and VAPID_PRIVATE_KEY "+
        "environment variables. You can use the following ones:")
        console.log(webPush.generateVAPIDKeys())
        return
      }
      return webPush.sendNotification(subscription, payload)
      .then(function(data) {
        return data
      })
    } catch (error) {
      console.error(error)
      return error
    }
  }
}

As for the front end, I am using:

    const applicationServerKey = "longstring"
    const subscribeOptions = {
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(applicationServerKey)
    }

return navigator.serviceWorker.ready.then(async (swreg) => {
    let subscription = await swreg.pushManager.getSubscription()
    let isSubscribed = !(subscription === null)
    if (!isSubscribed) {
        return swRegistration.pushManager.subscribe(subscribeOptions).then(subscription => ...)
    }
    // and either way send subscription to the server for use later
}

I have tried with a server key I got from google FCM console with the matching sender ID in my manifest, have tried without the sender ID as well. The exact same code works perfectly on desktop. I believe I'm just really mixed up when it comes to VAPID GCM/FCM and how to navigate all of that, I don't understand why code that works perfectly on desktop triggers to many errors on mobile browsers:

Firefox mobile never makes it passed here: await swreg.pushManager.getSubscription(), it just times out I really don't understand that one.

Brave returns the error detailed below, 404 from webPush.sendNotification call.

Other

Error returned from this call is:

Error sending push message: 
{ WebPushError: Received unexpected response code
    at IncomingMessage.<anonymous> (/Users/new/.nvm/versions/node/v10.0.0/lib/node_modules/web-push/src/web-push-lib.js:317:20)
    at IncomingMessage.emit (events.js:187:15)
    at endReadableNT (_stream_readable.js:1091:14)
    at process._tickCallback (internal/process/next_tick.js:174:19)
  name: 'WebPushError',
  message: 'Received unexpected response code',
  statusCode: 404,
  headers: 
   { 'content-type': 'text/plain; charset=utf-8',
     'x-content-type-options': 'nosniff',
     'x-frame-options': 'SAMEORIGIN',
     'x-xss-protection': '0',
     date: 'Tue, 13 Aug 2019 20:38:49 GMT',
     'content-length': '135',
     'alt-svc': 'quic=":443"; ma=2592000; v="46,43,39"',
     connection: 'close' },
  body: 'A valid push subscription endpoint should be specified in the URL as such: https://fcm.googleapis.com/wp/dHIoDxE7Hdg:APA91bH1Zj0kNa...\n',
  endpoint: 'https://android.googleapis.com/gcm/send/APA91bES_PMZ9P6fqOHYoIc059yEcjRT_5x32SptsrUx8Gbw3FmHaWaJ1bvb-kj1Updw5T9ChWlg9r5ihkmp5XimhmmKEbPKMm6coXo14YJMxqkVCMYrpBdR7X1ZWEmh87O_ZX7AzunN' }