here I have used the button to send web push notifications. using this button only on the same browser notification came. but I want to send the same push notification to all active users. below is my code.
let applicationServerPublicKey = ‘myKey’;
var pushButton = document.querySelector('.js-push-btn');
var pushNotiButton = document.querySelector('.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;
}
function updateBtn() {
if (isSubscribed) {
pushButton.textContent = 'Disable Push Messaging';
} else {
pushButton.textContent = 'Enable Push Messaging';
}
pushButton.disabled = false;
}
function updateSubscriptionOnServer(subscription) {
// TODO: Send subscription to application server
console.log('subscription'+JSON.stringify(subscription))
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');
}
}
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 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);
updateSubscriptionOnServer(subscription);
if (isSubscribed) {
console.log('User IS subscribed.');
} else {
console.log('User is NOT subscribed.');
}
updateBtn();
});
}
if ('serviceWorker' in navigator && 'PushManager' in window) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('{% url 'sw.js' %}').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
swRegistration = registration;
initializeUI();
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}else {
console.warn('Push messaging is not supported');
pushButton.textContent = 'Push Not Supported';
}
$(".push-btn").click(function(event) {
console.log('[Service Worker] Push Received.');
//console.log('[Service Worker] Push had this data: ');
const title = 'Push Codelab';
const options = {
body: 'Yay it works.',
//icon: 'images/icon.png',
//badge: 'images/badge.png'
};
navigator.serviceWorker.getRegistration().then(reg => {
reg.showNotification(title, options);
});
//event.waitUntil(ServiceWorkerRegistration.registration.showNotification(title, options));
});
let deferredPrompt;
let addBtn = document.querySelector('#add-home-screen-btn');
let homeScreenBlock = document.querySelector("#home-screen-btn-block")
homeScreenBlock.style.display = 'none';
window.addEventListener('beforeinstallprompt',(e)=>{
e.preventDefault();
deferredPrompt = e;
homeScreenBlock.style.display = 'block';
addBtn.addEventListener('click',(e)=>{
homeScreenBlock.style.display='none';
deferredPrompt.prompt();
deferredPrompt.userChoice
.then((choiceResult)=>{
if(choiceResult.outcome === 'accepted'){
console.log('Accepted A2SH')
}else {
console.log('user declined')
}
deferredPrompt = null;
})
})
});