Web App Push Notification, Unable to Push the notification on browser - node.js

Question

I have been trying to push notification on my web app.
I have been following google's codelabs for assistance and I have been successful until I reached 'Handle a Push Event' part.
I did exactly what they had mentioned, where could I possibly go wrong?
I am new to this so please help and thanking everyone, who bothered to answer, in advance
My main script code is as follows:
'use strict';
const applicationServerPublicKey = 'BEEbOQcOmPNlAHvkHCdVGPehs3y45L-30_71yyrRbxNRp7Q3bCEGWoCnq5dxeiB2nwGWfTc5BOrbEWsU2FGXgtk';
const pushButton = document.querySelector('.js-push-btn');
let isSubscribed = false;
let swRegistration = null;
function urlB64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
if ('serviceWorker' in navigator && 'PushManager' in window) {
console.log('Service Worker and Push is supported');
navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
console.log('Service Worker is registered', swReg);
swRegistration = swReg;
})
.catch(function(error) {
console.error('Service Worker Error', error);
});
} else {
console.warn('Push messaging is not supported');
pushButton.textContent = 'Push Not Supported';
}
function initializeUI() {
pushButton.addEventListener('click', function() {
pushButton.disabled = true;
if (isSubscribed) {
// TODO: Unsubscribe user
} else {
subscribeUser();
}
});
// Set the initial subscription value
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
isSubscribed = !(subscription === null);
if (isSubscribed) {
console.log('User IS subscribed.');
} else {
console.log('User is NOT subscribed.');
}
updateBtn();
});
}
function updateBtn() {
if (Notification.permission === 'denied') {
pushButton.textContent = 'Push Messaging Blocked.';
pushButton.disabled = true;
updateSubscriptionOnServer(null);
return;
}
if (isSubscribed) {
pushButton.textContent = 'Disable Push Messaging';
} else {
pushButton.textContent = 'Enable Push Messaging';
}
pushButton.disabled = false;
}
function subscribeUser() {
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})
.then(function(subscription) {
console.log('User is subscribed.');
updateSubscriptionOnServer(subscription);
isSubscribed = true;
updateBtn();
})
.catch(function(err) {
console.log('Failed to subscribe the user: ', err);
updateBtn();
});
}
function updateSubscriptionOnServer(subscription) {
// TODO: Send subscription to application server
const subscriptionJson = document.querySelector('.js-subscription-json');
const subscriptionDetails =
document.querySelector('.js-subscription-details');
if (subscription) {
subscriptionJson.textContent = JSON.stringify(subscription);
subscriptionDetails.classList.remove('is-invisible');
} else {
subscriptionDetails.classList.add('is-invisible');
}
}
navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
console.log('Service Worker is registered', swReg);
swRegistration = swReg;
initializeUI();
})
My sw.js code is
'use strict';
self.addEventListener('push', function(event) {
console.log('[Service Worker] Push Received.');
console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
const title = 'Push Codelab';
const options = {
body: 'Yay it works.',
icon: 'images/icon.png',
badge: 'images/badge.png'
};
event.waitUntil(self.registration.showNotification(title, options));
});
I am getting the following error message in my console :
Service Worker termination by a timeout timer was canceled because DevTools is attached.

Answer 1

'use strict';
const applicationServerPublicKey = 'BKqJnZ7e-r7DMOqpx2mm-BCWDCm1Urvt2KnwwmFe7v5QEfMMl139SlNGi6T6FSUmcNVJhXEI6_uLiauw1AFuMJc';
//BKqJnZ7e+r7DMOqpx2mm+BCWDCm1Urvt2KnwwmFe7v5QEfMMl139SlNGi6T6FSUmcNVJhXEI6/uLiauw1AFuMJc=
const pushButton = document.querySelector('.js-push-btn');
let isSubscribed = false;
let swRegistration = null;
function urlB64ToUint8Array(base64String)
{
const padding = '='.repeat((4 - base64String.length % 4) % 4);
//console.log(padding + base64String.length);
const base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
const rawData = window.atob(base64);
//console.log(base64);
//console.log(rawData);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i)
{
outputArray[i] = rawData.charCodeAt(i);
}
console.log(outputArray);
return outputArray;
}
//1
if ('serviceWorker' in navigator && 'PushManager' in window)
{
console.log('Service Worker and Push is supported');
navigator.serviceWorker.register('sw.js').then
(
function(swReg)
{
//console.log(swReg);
console.log('Service Worker is registered', swReg);
swRegistration = swReg;
//console.log(swRegistration);
}
)
.catch
(
function(error)
{
console.error('Service Worker Error', error);
}
);
}
else
{
console.warn('Push messaging is not supported');
pushButton.textContent = 'Push Not Supported';
}
//2
function updateBtn()
{
if (Notification.permission === 'denied')
{
pushButton.textContent = 'Push Messaging Blocked.';
pushButton.disabled = true;
updateSubscriptionOnServer(null);
return;
}
if (isSubscribed)
{
pushButton.textContent = 'Disable Push Messaging';
}
else
{
pushButton.textContent = 'Enable Push Messaging';
}
pushButton.disabled = false;
}
navigator.serviceWorker.register('sw.js').then
(
function(swReg)
{
console.log('Service Worker is registered', swReg);
swRegistration = swReg;
initializeUI();
}
)
//3
function initializeUI()
{
pushButton.addEventListener
(
'click', function()
{
pushButton.disabled = true;
if (isSubscribed)
{
unsubscribeUser();
}
else
{
subscribeUser();
}
}
);
// Set the initial subscription value
swRegistration.pushManager.getSubscription().then
(
function(subscription)
{
isSubscribed = !(subscription === null);
updateSubscriptionOnServer(subscription);
if (isSubscribed)
{
console.log('User IS subscribed.');
}
else
{
console.log('User is NOT subscribed.');
}
updateBtn();
}
);
}
//4
function subscribeUser()
{
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe
(
{
userVisibleOnly: true,
applicationServerKey: applicationServerKey
}
)
.then
(
function(subscription)
{
console.log('User is subscribed.');
updateSubscriptionOnServer(subscription);
isSubscribed = true;
updateBtn();
}
)
.catch
(
function(err)
{
console.log('Failed to subscribe the user: ', err);
updateBtn();
}
);
}
//5
function updateSubscriptionOnServer(subscription)
{
// TODO: Send subscription to application server
const subscriptionJson = document.querySelector('.js-subscription-json');
const subscriptionDetails = document.querySelector('.js-subscription-details');
if (subscription)
{
subscriptionJson.textContent = JSON.stringify(subscription);
subscriptionDetails.classList.remove('is-invisible');
}
else
{
subscriptionDetails.classList.add('is-invisible');
}
}
//6
function unsubscribeUser() {
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
return subscription.unsubscribe();
}
})
.catch(function(error) {
console.log('Error unsubscribing', error);
})
.then(function() {
updateSubscriptionOnServer(null);
console.log('User is unsubscribed.');
isSubscribed = false;
updateBtn();
});
}