fix: send FCM notifications with click links matching client hosts

api/src/chat.js

@@ -121,12 +121,18 @@ exports.onMessageCreate = async (snap, context) => {
     await Promise.all(
       pushRegistrations
         .filter((pR) => pR.status === 'active')
-        .map((pR) =>
-          sendNotification({
+        .map(({ host, fcmToken }) => {
+          return sendNotification({
             ...commonPayload,
-            fcmToken: pR.fcmToken
-          })
-        )
+            // Override the messageUrl with the host from the push registration, so it also works for beta.welcometomygarden.org.
+            // Firebase's JS SDK filters out non-matching hosts on click events in their service worker code
+            // probably with reason, because: https://developer.mozilla.org/en-US/docs/Web/API/Clients/openWindow#parameters :
+            //   > A string representing the URL of the client you want to open in the window.
+            //   > **Generally this value must be a URL from the same origin as the calling script.**
+            messageUrl: `https://${host}/chat/${normalizeName(nameParts[0])}/${chatId}`,
+            fcmToken
+          });
+        })
     );
   } catch (ex) {
     console.log(ex);

src/lib/types/PushRegistration.ts

@@ -43,6 +43,7 @@ export type FirebasePushRegistration = {
   /** The host that this subscription was created for. This could be useful when we have multiple apps
    * connecting to the same Firestore. Format without protocol.
    * On localhost testing, it seems that the port matters for Web Push registrations.
+   * This does not include the protocol! Also, no trailing slash.
    */
   host: string;
   /**

src/service-worker.ts

@@ -150,6 +150,11 @@ const messaging = getMessaging(firebaseApp);
 // Probably this internally does: self.addEventListener('push', ... ), and then
 // it check if the app is in the foreground or background. If it is in the foreground,
 // it will forward the data to the onMessage() handler on the main app instead.
+//
+// NOTE: THIS TAKES OVER CERTAIN LISTENERS, AND BLOCKS THEM FROM BEING LISTENED TO HERE
+// If we register our own listeners above this (or possibly getMessaging()), then we can get the notificationclick event (tested).
+// https://github.com/firebase/quickstart-js/issues/194#issuecomment-361353318
+// https://github.com/firebase/firebase-js-sdk/blob/cbfd14cfb27cda8a6de74be5d138ea9e6de09fe9/packages/messaging/src/listeners/sw-listeners.ts#L128
 onBackgroundMessage(messaging, (payload) => {
   console.log('[service worker] Received background message ', payload);
   // Firebase will already send the notification.