shahryarjb
How to send push notification with Pigeon when we have subscriptions
Hi, I created a subscription with my service worker and pushManager in JavaScript side like this:
var vapidPublicKey = 'MY_PUBLIC_KEY';
var convertedVapidPublicKey = urlBase64ToUint8Array(vapidPublicKey);
return reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: convertedVapidPublicKey,
});
After that, I have something like this in my database:
{
"endpoint": "https://fcm.googleapis.com/fcm/send/USER_STUFF",
"keys": {
"auth": "AUTH_CODE",
"p256dh": "P256DH_CODE"
}
}
So I see the Pigeon support FCM, but when I want to send a notification as the document says, what is the TOKEN?
n = Pigeon.FCM.Notification.new({:token, "reg ID"}, %{"body" => "test message"})
YourApp.FCM.push(n)
My goal: I am creating a PWA application and I need to send push notification with service worker. It can be Chrome or Firefox, even in desktop or mobile. The user activates and adds the app to their operating system with a manifest. After that, I should be able to send notifications from the server to the user.
In JavaScript or node server I can send notification with web-push lib, but in elixir I need to send
Thank you in andvance
Most Liked
shahryarjb
Yes, sure.
First of all, I have used GitHub - danhper/elixir-web-push-encryption: Elixir implementation of Web Push Payload encryption..
I have a JavaScript file for service worker, sw.js
self.addEventListener('push', function(event) {
console.log('Push Notification received', JSON.parse(event.data.text()));
var data = {title: 'New!', content: 'Something new happened!', openUrl: '/'};
if (event.data) {
data = JSON.parse(event.data.text());
}
var options = {
body: data.content,
icon: '/src/images/icons/app-icon-96x96.png',
badge: '/src/images/icons/app-icon-96x96.png',
data: {
url: data.openUrl
}
};
event.waitUntil(
self.registration.showNotification(data.title, options)
);
});
This is a addEventListener with push event and my service worker is registered in my app.js
app.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function () {
console.log('Service worker registered!');
})
.catch(function (err) {
console.log(err);
});
}
After that, you need user permission, for example when he/her clicks on a button. Like this:
var enableNotificationsButtons = document.querySelectorAll('.enable-notifications');
if ('Notification' in window && 'serviceWorker' in navigator) {
for (var i = 0; i < enableNotificationsButtons.length; i++) {
enableNotificationsButtons[i].style.display = 'inline-block';
enableNotificationsButtons[i].addEventListener('click', askForNotificationPermission);
}
}
I got all the buttons with .enable-notifications class CSS and gave them addEventListener with click event.
You can see my app.js here: app.js · GitHub
finally, I use the elixir library:
body = ~s({"title":"New Post","content":"New Post added!","openUrl":"/help"})
subscription = %{
keys: %{
p256dh: "CODE_OF_p256dh",
auth: "CODE_OF_auth"
},
endpoint: "https://fcm.googleapis.com/fcm/send/FCM_TOKEN"
}
{:ok, response} = WebPushEncryption.send_web_push(body, subscription)
mayel
Thanks, much appreciated! I’ll give it another go ![]()







