I have an existing web site , i just need to push notification to the site, for that i am using Nodejs web-push package , I can able to receive notifications but i need to change it to User Specific,
For Example i want to send the notifications for the users based on the country
This is my code
client.js
const publicVapidKey = 'xxxxxx';
if ('serviceWorker' in navigator) {
console.log('Registering service worker');
run().catch(error => console.error(error));
}
function urlBase64ToUint8Array(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;
}
async function run() {
console.log('Registering service worker');
const registration = await navigator.serviceWorker.
register('worker.js');
console.log('Registered service worker');
console.log('Registering push');
const subscription = await registration.pushManager.
subscribe({
userVisibleOnly: true,
// The `urlBase64ToUint8Array()` function is the same as in
// https://www.npmjs.com/package/web-push#using-vapid-key-for-applicationserverkey
applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
});
// subscription.user = $('.header-user-name').find('span').text();
console.log('Registered push');
console.log('Sending push');
await fetch('http://localhost:3000/subscribe?user='+$('.header-user-name').find('span').text(), {
method: 'POST',
body: JSON.stringify(subscription),
headers: {
'content-type': 'application/json'
}
});
console.log('Sent push');
}
Worker.js
console.log('Loaded service worker!');
self.addEventListener('push', ev => {
const data = ev.data.json();
console.log('Got push', data);
ev.waitUntil(self.registration.showNotification(data.title, {
body: 'Hello, World!',
registration_ids: [$('.header-user-name').find('span').text()]
icon: 'http://mongoosejs.com/docs/images/mongoose5_62x30_transparent.png'
}));
});
Server Code (localhost:3000/push)
app.get('/push',function(req,res) {
const payload = JSON.stringify({ title: 'Hello '+ user.name +' ' + req.query.title, });
console.log(req.query);
console.log("yahooooooooooooooooooooooooooooooooo");
webpush.sendNotification(newSubscription, payload).catch(error => {
console.error(error.stack);
});
res.send({result : 'Success'});
});
After long gap, I got a solution for this problem.
Steps to be followed:
Happy Coding.