CODEWITHSUNDEEP
javascriptfirefoxpush-notificationservice-workerfirefox-android
Arduinefier
Arduinefier

Reputation: 21

PushManager subscription fails on Firefox for Android

I'm working on integrating web-push notifications in my web-application. Everything works fine for Chrome and Firefox on desktop and Chrome on Android, but not for Firefox for Android. This question seems to discuss the same issue but has no responses.

I used this tutorial as a base for the service worker registration script. I have added some more prints/checks but it is mostly the same.

So, when calling the registerServiceWorker method from a button press on FF Android, the serviceWorker is installed, the subscribeUser function is called, but the pushManager.subscribe method will fail with the following error message:

DOMException: User denied permission to use the Push API.

This is not correct, even while paused on the error print line Notification.permission will return "granted".

Doing the same thing on the nightly build results in slightly different, but still incorrect behaviour. The pushManager.subscribe method does not throw an error. Instead the callback is ran but with a null value for the subscription argument. Therefore, the process still fails.

Service worker registration script:

'use strict';

function updateSubscriptionOnServer(subscription, apiEndpoint) {
  return fetch(apiEndpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      subscription_json: JSON.stringify(subscription)
    })
  });

}

function subscribeUser(swRegistration, applicationServerPublicKey, apiEndpoint) {
  // It seems browsers can take the base64 string directly.
  // const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  console.log(`Subscribing pushManager with appkey ${applicationServerPublicKey}`);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerPublicKey
  })
  .then(function(subscription) {
    console.log('User is subscribed.');
    console.log(`Sending subscription data to server (${apiEndpoint})`, subscription);

    return updateSubscriptionOnServer(subscription, apiEndpoint);

  })
  .then(function(response) {
    if (!response.ok) {
      throw new Error('Bad status code from server.');
    }
    return response.json();
  })
  .then(function(responseData) {
    console.log(responseData);
    if (responseData.status!=="success") {
      throw new Error('Bad response from server.');
    }
  })
  .catch(function(err) {
    // FF Android says "User denied permission to use the Push API."
    console.log('Failed to subscribe the user: ', err);
    console.log(err.stack);
  });
}

function registerServiceWorker(serviceWorkerUrl, applicationServerPublicKey, apiEndpoint){
  let swRegistration = null;
  if ('serviceWorker' in navigator && 'PushManager' in window) {
    console.log('Service Worker and Push is supported');
    console.log(`Current Notification.permission = ${Notification.permission}`);

    swRegistration = navigator.serviceWorker.register(serviceWorkerUrl)
    .then(function(swReg) {
      console.log('Service Worker is registered', swReg);
      console.log(`Current Notification.permission = ${Notification.permission}`); // Will give "granted"
      subscribeUser(swReg, applicationServerPublicKey, apiEndpoint);
    })
    .catch(function(error) {
      console.error('Service Worker Error', error);
    });
  } else {
    console.warn('Push messaging is not supported');
    return false;
  }
  return swRegistration;
}

I cannot figure out how to get a working push-subscription. As said before, all other browsers that I have tried work fine. I hope someone can point me in the right direction. Is this a bug in Firefox Android or in my code?

Showing notifications manually using

new Notification("Hi there!");

does work, proving in principle that permissions are not the issue.

Upvotes: 2

Views: 1654

Answers (1)

Mikhail Andrianov
Mikhail Andrianov

Reputation: 169

UPDATE: This issue is still on. Feel free check the progress on Bugzilla :

https://bugzilla.mozilla.org/show_bug.cgi?id=1807379

UPDATE: FF Fenix team confirmed a bug while displaying the notifications

Feel free to track it here

Got curious regarding service worker support for Firefox mobile browser. Tried hard to find a debug tool for Mobile Firefox as plugin or a 3rd party tool with no luck.

However, I've tested my web push application on Mobile Firefox and may totally confirm there is an issue with Service Worker Registration state.

In order to discard any issues within my code, I've used Matt Gaunt's Webpush Book

And I can tell Matt's service worker returns registration as simply as that:

 async function registerSW() {
  await navigator.serviceWorker.register('/demos/notification-examples/service-worker.js');
}

function getSW() {
  return navigator.serviceWorker.getRegistration('/demos/notification-examples/service-worker.js');
}

Firefox for Android successfully requests permission for notification, but it doesn't display push whenever you launch the .showNotification function.

Here's an example of showNotification method within the Badge example in Matt's website:

 async function onBadgeClick() {
            const reg = await getSW();
            /**** START badgeNotification ****/
            const title = 'Badge Notification';
            const options = {
                badge: '/demos/notification-examples/images/badge-128x128.png'
            };
            reg.showNotification(title, options);
            /**** END badgeNotification ****/
        }

Looks fine and should be working fine, but for Firefox Mobile it doesn't work at all. I guess this issue should be escalated to Mozilla.

UPDATE New bug report was created on Github:

Upvotes: 1

Related Questions