Web Push Notification not showing message in firefox broswer

By Harinder Singh

I am implementing Push Notification for web browser. Chrome/Firefox browser show permission popup and after allow its return token id in both browsers. When I send push notification its only show in Chrome not a Firefox browser. My code is:

window.addEventListener('load', function() {
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js').then(initialiseState);
    } else {
        console.warn('Service workers aren't supported in this browser.');
    }
});
function initialiseState()
{
    if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
        console.warn('Notifications aren't supported.');
        return;
    }
    if (Notification.permission === 'denied') {
        console.warn('The user has blocked notifications.');
        return;
    }
    if (!('PushManager' in window)) {
        console.warn('Push messaging isn't supported.');
        return;
    }
    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
        serviceWorkerRegistration.pushManager.getSubscription({
            userVisibleOnly: 1
        })
        .then(function(subscription) {
            if (!subscription) {
              return;
            }
        })
        .catch(function(err) {
            console.warn('Error during getSubscription()', err);
        });
    });
}
function subscribe()
{
    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
        serviceWorkerRegistration.pushManager.subscribe({
            userVisibleOnly: 1
        })
        .then(function(subscription) {
            console.log('subscribe', subscription.endpoint);
        })
        .catch(function(e) {
            if (Notification.permission === 'denied') {
              console.warn('Permission for Notifications was denied');
              pushButton.disabled = true;
            } else {
              console.error('Unable to subscribe to push.', e);
              pushButton.disabled = false;
              pushButton.textContent = 'Enable Push Messages';
            }
        });
    });
}

service-worker.js file code is:

self.addEventListener('push', function(event) {
     event.waitUntil(
        fetch('https://example.com/message')
        .then(function(response)
        {
            if (response.status !== 200)
            {
                console.log('Looks like there was a problem. Status Code: ' + response.status);
                throw new Error();
            }
            return response.json().then(function(data)
            {
                if (data.error || !data.notification) {
                  console.error('The API returned an error.', data.error);
                  throw new Error();
                }
                var title = data.notification.title;
                var message = data.notification.message;
                var icon = data.notification.icon;
                var notificationTag = data.notification.tag;
                return self.registration.showNotification(title, {
                    body: message,
                    icon: icon,
                    tag: notificationTag
                });
            });
        })
        .catch(function(err) {
            console.error('Unable to retrieve data', err);
            var title = 'An error occurred';
            var message = 'We were unable to get the information for this push message';
            var icon = URL_TO_DEFAULT_ICON;
            var notificationTag = 'notification-error';
            return self.registration.showNotification(title, {
                body: message,
                icon: icon,
                tag: notificationTag
            });
        })
    );
});
self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event.notification.tag);
    event.notification.close();
    event.waitUntil(
        clients.matchAll({
          type: "window"
        })
        .then(function(clientList) {
            for (var i = 0; i < clientList.length; i++) {
                var client = clientList[i];
                if (client.url == '/' && 'focus' in client)
                    return client.focus();
            }
            if (clients.openWindow) {
                return clients.openWindow('/');
            }
        })
    );
});

Send message using CURL:

$data = ["registration_ids" => ["token id"]];
$data_string = json_encode($data);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://fcm.googleapis.com/fcm/send');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_VERBOSE, 1);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
$headers = [
    'Content-Type: application/json',
    'Authorization: key= MY-GOOGLE-KEY'
];
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);
$result = curl_exec($ch);
curl_close ($ch);
$response = json_decode($result);

AND

curl --header "Authorization: key=KEY" --header "Content-Type: application/json" https://android.googleapis.com/gcm/send -d "{"registration_ids":["KEY"]}"

Why it is not working for Firefox browser.
THANKS :)

Source: Stack Overflow

    

Share it with your friends!

    Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/19/9652219/html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273