Push notifications to web client

[CeciliaHinga]

From tenfour-archive created by mackers: ushahidi/tenfour-archive#1386

• [ ] Credits have been adjusted or topped up.
• [ ] Subscription changed
• [ ] Check-ins updated or added

Inspect Tero / Notific.io as a service option

See also #1334

[CeciliaHinga]

@dalezak Any way to use FCM notifications on the web PWA client?

[CeciliaHinga]

@dalezak Can you please reply to my comments above if you can. This is a critical issue and is causing a lot of bugs.

[CeciliaHinga]

@dalezak Do FCM notifications work on the web PWA client?

[CeciliaHinga]

@dalezak Can you revisit this? We need the web client to receive push and refresh

[CeciliaHinga]

https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications

[CeciliaHinga]

I just checked the Firebase console and looks like push notifications are being sent from that side, so that's good news.

[CeciliaHinga]

Ugg, sorry for letting this sit for so long 😞

[CeciliaHinga]

@mackers can we start sending push notifications from staging as well?

This would help with fixing them, plus will need a way to test them prior to going to prod.

[CeciliaHinga]

Ok @mackers, I'm on it! What server environments are currently broadcasting the push notifications? Prod? Staging? Develop?

Also is there anyway to verify the push notifications are being sent correctly? And manually trigger sending a push notification from backend, so I can listen in the client?

[CeciliaHinga]

@dalezak Perhaps, but something is telling me that there could be an issue. The firebase API tells our API which tokens to delete when they are invalid. So there could be a case where we delete valid tokens.

I think it should be trivial to add a new tenfour-staging project to our firebase account.

[CeciliaHinga]

@dalezak Yes, I think we will need a different firebase account for staging so that they are not sent to production instances.

And then we just have to update the env variables with the firebase credentials

[CeciliaHinga]

@mackers I think we might be ok sharing the same firebase for production and staging, since the users on different environments should have different firebase tokens.

For example, we only send notification for users with registered device tokens, so any non-Ushahidi users should never receive notifications from staging since they never logged in there.

We'd need to confirm this first though, but should be ok in theory.

[CeciliaHinga]

@dalezak I believe it's only production at the moment.

You can trigger a push notification by doing any action on the client, such as updating a check-in description.

[CeciliaHinga]

@mackers I'm trying to debug notifications against production, however it doesn't appear that anything is getting sent from the backend?

Using the Chrome tools I can send a test notification, and handle the click event in the service worker.

But nothing appears to be coming from the backend. Can you confirm what the FCM_SENDER_ID and FCM_SERVER_KEY environment variables are?

[CeciliaHinga]

Ah, yes that's a good point, probably safest to setup a separate firebase project under our account :+1:

[CeciliaHinga]

@mackers I'm trying to debug notifications against production, however it doesn't appear that anything is getting sent from the backend?

Using the Chrome tools I can send a test notification, and handle the click event in the service worker. But nothing appears to be coming from the backend. Can you confirm what the FCM_SENDER_ID and FCM_SERVER_KEY environment variables are?

[CeciliaHinga]

FCM_SENDER_ID: 804609537189

[CeciliaHinga]

Seems to be working for me. I get push notifications on the android app

[CeciliaHinga]

@dalezak Feel free to enable push on local dev environments while you are debugging this.

We may need to integrate another service to get push to web clients. Do some investigation on some of the other push libraries to complement FCM push

[CeciliaHinga]

@mackers making some progress on push notifications, although still can't receive anything from the PROD backend?

I did discover you can test sending notifications by posting:

OST https://fcm.googleapis.com/fcm/send Content-Type: application/json Authorization: key=AAAAu1Z3NKU:APA91bECA2veS4a2U2p8fzfdr93AQ-VVXev6bmUI19zAcNBkZxDO4LZ9EYbFiuNkMzdKK55rA8H8CcBSAkNLT_DL2ZDZJBTFgaReH7IC4rohm5Q586o1oeS8cOFZQ-nocAvQG7ZDxqQ5 { "notification": { "title": "TenFour", "body": "TenFour Notification", "click_action": "http://localhost:8100/#/checkins", "icon": "http://localhost:8100/assets/images/logo-dots.png" }, "to": "fVs2FSwOYCw:APA91bE7TCpIsrCaEZmTuEwUkRARqSfBjRgP9ECb9ysdE9TGJamQbraMJmE8u3UGe6w-EWAD5xGgBpBi3Y3IirLxONym5P_pvUgPFebuHEWl6Ec2LZ4pXqoeHr0XUSGEJ4f0_cVDwQOj" } Question, how are push notifications being sent on the backend? Does the component we're using support web push

[CeciliaHinga]

@dalezak can you confirm you receive push to mobile on production.

My android app receives push notifications.

[CeciliaHinga]

@dalezak We are using this package to send push notifications on the backend:

https://github.com/brozot/Laravel-FCM

It's unclear if it supports web push