How to send push notification with Pigeon when we have subscriptions

Questions / Help
1

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

2

This library works for now. But I could not be able to use pigeon:

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)

Screen Shot 2022-10-12 at 00.19.59

Based on: Web Push Payload Encryption  |  Blog  |  Chrome for Developers

3

@shahryarjb could you share the working code? last time I looked at webpush I couldn’t quite get it working… my attempt is at GitHub - bonfire-networks/bonfire_notify: Web push notifications

4

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)
1 Like
5

Thanks, much appreciated! I’ll give it another go :grinning:

1 Like