PWA notifications delivery for ios and Android(stub)

[sachben91]

Description

Notifications created as part of #6617 should be delivered to the user on both ios and Android OS devices.

Project Owner

No response

Bucket ID

6617

User Stories / Acceptance Criteria

• User receives notifications in the format that has been designed in Knock
• On clicking the notification, the user is taken to the right place in the PWA, which is specified on the notification
• User is able to receive notifications on both IoS and Android

Design Devlink

Prototypes

Design Screenshot

Additional Context

No response

[ForestMars]

Tee'd for Cycle 4 (Subscriptions is prioritized / soft blocker.)

[burtonator]

Starting to work on this now... but here are the initial notes:

https://docs.knock.app/integrations/push/firebase https://firebase.google.com/docs/cloud-messaging/js/client

• we need to import the firebase/messaging lib on the client
• when the user grants permissions we can THEN get their key but I need to use our vapidKey with it.
• That token then needs to be sent to the backend and the knock SDK can be used to send the notifications

... I think this is the general overview and I'm still tracking this down.

Oh! Also, the Knock team will give us access to a 'combined channel group' so that we can use Apple and FCM as one object in their workflow. We have to ask and I already requested it.

• We need to get the vapid key from the Firebase console.

[burtonator]

Here's another resource... I'm unclear what's up with the vapid certificate now though:

https://developer.chrome.com/blog/web-push-interop-wins#introducing_vapid_for_server_identification

[burtonator]

Update. I have the vapid keys and I know the general flow. There are a number of moving parts here. I should have something working by next week. I have all the credentials I need too including the keys needed in the frontend and backend.

One downside is that our service worker has to be in .js. It can't be in typescript. I went down a rabbit hole and the ServiceWorker types are incorrect for TS plus it means DOM types will be available in TS. To do it with correct types means we need our own repository which isn't really what we want.

[burtonator]

The general flow looks like this:

• [x] on the frontend, the user clicks a button which calls Notification.requestPermission() which then brings up a dialog in the bowser in the top left (on the desktop). If the user clicks "yes" then they are "granted" that permission.
• [x] On the frontend, once we are 'granted', we have to call the FCM function to get the user device ID - https://firebase.google.com/docs/cloud-messaging/js/client#access_the_registration_token
• [x] We send that device ID to the server via trpc
• [x] On the frontend - make certain we register our service worker and that it is used properly.
• [ ] on the backend we have to call setChannelData via the Knock SDK: https://docs.knock.app/integrations/push/firebase#using-fcm-with-knock
• [x] Configure the service worker code on the fronted.
• [x] Configure the FCM channel with our firebase config (need help from @timolegros due to permissions here)
• [x] Test sending a message from Knock and make sure it makes it to the client.

We also have to figure out:

• [ ] how to handle stale registration tokens : https://firebase.google.com/docs/cloud-messaging/manage-tokens

[dillchen]

wanted to confirm that this is part of the flow that's on demo?

[ForestMars]

@burtonator Looks like you have multiple tickets that may have PR, but the PR is not linked on the issue. (Please update all)

[ForestMars]

Seems like this issue also is an orphan with no branch?

[burtonator]

This is related directly to this ticket:

https://github.com/hicommonwealth/commonwealth/issues/6622#issuecomment-2266243915

And we're first waiting for in-app notifications on the client to be shipped.