Implement subscriptions for mobile notifications

Author: MartinBraquet

backend/api/package.json

@@ -49,25 +49,27 @@
     "gcp-metadata": "6.1.0",
     "jsonwebtoken": "9.0.0",
     "lodash": "4.17.21",
+    "openapi-types": "12.1.3",
     "pg-promise": "11.4.1",
     "posthog-node": "4.11.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "resend": "4.1.2",
     "string-similarity": "4.0.4",
     "swagger-jsdoc": "6.2.8",
     "swagger-ui-express": "5.0.1",
     "tsconfig-paths": "4.2.0",
     "twitter-api-v2": "1.15.0",
+    "web-push": "3.6.7",
     "ws": "8.17.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "openapi-types": "12.1.3",
     "zod": "3.22.3"
   },
   "devDependencies": {
     "@types/cors": "2.8.17",
     "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@types/swagger-ui-express": "4.1.8",
+    "@types/web-push": "3.6.4",
     "@types/ws": "8.5.10"
   }
 }

backend/api/src/app.ts

@@ -1,6 +1,6 @@
 import {API, type APIPath} from 'common/api/schema'
 import {APIError, pathWithPrefix} from 'common/api/utils'
-import cors, {CorsOptions} from 'cors'
+import cors from 'cors'
 import * as crypto from 'crypto'
 import express, {type ErrorRequestHandler, type RequestHandler} from 'express'
 import {hrtime} from 'node:process'
@@ -59,6 +59,7 @@ import {getMessagesCount} from "api/get-messages-count";
 import {createVote} from "api/create-vote";
 import {vote} from "api/vote";
 import {contact} from "api/contact";
+import {saveSubscription} from "api/save-subscription";
 
 // const corsOptions: CorsOptions = {
 //   origin: ['*'], // Only allow requests from this domain
@@ -183,6 +184,7 @@ const handlers: { [k in APIPath]: APIHandler<k> } = {
   'set-channel-seen-time': setChannelLastSeenTime,
   'get-messages-count': getMessagesCount,
   'set-last-online-time': setLastOnlineTime,
+  'save-subscription': saveSubscription,
 }
 
 Object.entries(handlers).forEach(([path, handler]) => {

backend/api/src/junk-drawer/private-messages.ts

@@ -1,18 +1,19 @@
-import { Json } from 'common/supabase/schema'
-import { SupabaseDirectClient } from 'shared/supabase/init'
-import { ChatVisibility } from 'common/chat-message'
-import { User } from 'common/user'
-import { first } from 'lodash'
-import { log } from 'shared/monitoring/log'
-import { getPrivateUser, getUser } from 'shared/utils'
-import { type JSONContent } from '@tiptap/core'
-import { APIError } from 'common/api/utils'
-import { broadcast } from 'shared/websockets/server'
-import { track } from 'shared/analytics'
-import { sendNewMessageEmail } from 'email/functions/helpers'
+import {Json} from 'common/supabase/schema'
+import {SupabaseDirectClient} from 'shared/supabase/init'
+import {ChatVisibility} from 'common/chat-message'
+import {User} from 'common/user'
+import {first} from 'lodash'
+import {log} from 'shared/monitoring/log'
+import {getPrivateUser, getUser} from 'shared/utils'
+import {type JSONContent} from '@tiptap/core'
+import {APIError} from 'common/api/utils'
+import {broadcast} from 'shared/websockets/server'
+import {track} from 'shared/analytics'
+import {sendNewMessageEmail} from 'email/functions/helpers'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
+import webPush from 'web-push';
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -22,7 +23,7 @@ export const leaveChatContent = (userName: string) => ({
   content: [
     {
       type: 'paragraph',
-      content: [{ text: `${userName} left the chat`, type: 'text' }],
+      content: [{text: `${userName} left the chat`, type: 'text'}],
     },
   ],
 })
@@ -32,7 +33,7 @@ export const joinChatContent = (userName: string) => {
     content: [
       {
         type: 'paragraph',
-        content: [{ text: `${userName} joined the chat!`, type: 'text' }],
+        content: [{text: `${userName} joined the chat!`, type: 'text'}],
       },
     ],
   }
@@ -47,11 +48,14 @@ export const insertPrivateMessage = async (
 ) => {
   const lastMessage = await pg.one(
     `insert into private_user_messages (content, channel_id, user_id, visibility)
-    values ($1, $2, $3, $4) returning created_time`,
+     values ($1, $2, $3, $4)
+     returning created_time`,
     [content, channelId, userId, visibility]
   )
   await pg.none(
-    `update private_user_message_channels set last_updated_time = $1 where id = $2`,
+    `update private_user_message_channels
+     set last_updated_time = $1
+     where id = $2`,
     [lastMessage.created_time, channelId]
   )
 }
@@ -65,16 +69,17 @@ export const addUsersToPrivateMessageChannel = async (
     userIds.map((id) =>
       pg.none(
         `insert into private_user_message_channel_members (channel_id, user_id, role, status)
-                values
-                ($1, $2, 'member', 'proposed')
-                on conflict do nothing
-              `,
+         values ($1, $2, 'member', 'proposed')
+         on conflict do nothing
+        `,
         [channelId, id]
       )
     )
   )
   await pg.none(
-    `update private_user_message_channels set last_updated_time = now() where id = $1`,
+    `update private_user_message_channels
+     set last_updated_time = now()
+     where id = $1`,
     [channelId]
   )
 }
@@ -90,9 +95,9 @@ export const createPrivateUserMessageMain = async (
   // Normally, users can only submit messages to channels that they are members of
   const authorized = await pg.oneOrNone(
     `select 1
-       from private_user_message_channel_members
-       where channel_id = $1
-         and user_id = $2`,
+     from private_user_message_channel_members
+     where channel_id = $1
+       and user_id = $2`,
     [channelId, creator.id]
   )
   if (!authorized)
@@ -108,10 +113,12 @@ export const createPrivateUserMessageMain = async (
   }
 
   const otherUserIds = await pg.map<string>(
-    `select user_id from private_user_message_channel_members
-        where channel_id = $1 and user_id != $2
-        and status != 'left'
-        `,
+    `select user_id
+     from private_user_message_channel_members
+     where channel_id = $1
+       and user_id != $2
+       and status != 'left'
+    `,
     [channelId, creator.id],
     (r) => r.user_id
   )
@@ -133,10 +140,12 @@ const notifyOtherUserInChannelIfInactive = async (
   pg: SupabaseDirectClient
 ) => {
   const otherUserIds = await pg.manyOrNone<{ user_id: string }>(
-    `select user_id from private_user_message_channel_members
-        where channel_id = $1 and user_id != $2
-        and status != 'left'
-        `,
+    `select user_id
+     from private_user_message_channel_members
+     where channel_id = $1
+       and user_id != $2
+       and status != 'left'
+    `,
     [channelId, creator.id]
   )
   // We're only sending notifs for 1:1 channels
@@ -150,11 +159,12 @@ const notifyOtherUserInChannelIfInactive = async (
     .startOf('day')
     .toISOString()
   const previousMessagesThisDayBetweenTheseUsers = await pg.one(
-    `select count(*) from private_user_messages
-            where channel_id = $1
-            and user_id = $2
-            and created_time > $3
-            `,
+    `select count(*)
+     from private_user_messages
+     where channel_id = $1
+       and user_id = $2
+       and created_time > $3
+    `,
     [channelId, creator.id, startOfDay]
   )
   log('previous messages this day', previousMessagesThisDayBetweenTheseUsers)
@@ -166,16 +176,63 @@ const notifyOtherUserInChannelIfInactive = async (
   console.debug('otherUser:', otherUser)
   if (!otherUser) return
 
-  await createNewMessageNotification(creator, otherUser, channelId)
+  await createNewMessageNotification(creator, otherUser, channelId, pg)
 }
 
 const createNewMessageNotification = async (
   fromUser: User,
   toUser: User,
-  channelId: number
+  channelId: number,
+  pg: SupabaseDirectClient
 ) => {
   const privateUser = await getPrivateUser(toUser.id)
   console.debug('privateUser:', privateUser)
   if (!privateUser) return
+
+  webPush.setVapidDetails(
+    'mailto:[email protected]',
+    process.env.VAPID_PUBLIC_KEY!,
+    process.env.VAPID_PRIVATE_KEY!
+  );
+
+  // Retrieve subscription from your database
+  const subscriptions = await getSubscriptionsFromDB(toUser.id, pg);
+
+  for (const subscription of subscriptions) {
+    try {
+      console.log('Sending notification to:', subscription.endpoint);
+      await webPush.sendNotification(subscription, JSON.stringify({
+        title: `Message from ${fromUser.name}`,
+        body: 'You have a new message!',
+        url: `/messages/${channelId}`,
+      }));
+    } catch (err) {
+      console.error('Failed to send notification', err);
+      // optionally remove invalid subscription from DB
+    }
+  }
+
   await sendNewMessageEmail(privateUser, fromUser, toUser, channelId)
 }
+
+
+export async function getSubscriptionsFromDB(
+  userId: string,
+  pg: SupabaseDirectClient
+) {
+  try {
+    const subscriptions = await pg.manyOrNone(`
+      select endpoint, keys from push_subscriptions
+      where user_id = $1
+      `, [userId]
+    );
+
+    return subscriptions.map(sub => ({
+      endpoint: sub.endpoint,
+      keys: sub.keys,
+    }));
+  } catch (err) {
+    console.error('Error fetching subscriptions', err);
+    return [];
+  }
+}

backend/api/src/save-subscription.ts

@@ -0,0 +1,41 @@
+import {APIError, APIHandler} from './helpers/endpoint'
+import {createSupabaseDirectClient} from 'shared/supabase/init'
+
+export const saveSubscription: APIHandler<'save-subscription'> = async (body, auth) => {
+  const {subscription} = body
+
+  if (!subscription?.endpoint || !subscription?.keys) {
+    throw new APIError(400, `Invalid subscription object`)
+  }
+
+  const userId = auth?.uid
+
+  try {
+    const pg = createSupabaseDirectClient()
+    // Check if a subscription already exists
+    const exists = await pg.oneOrNone(
+      'select id from push_subscriptions where endpoint = $1',
+      [subscription.endpoint]
+    );
+
+    if (exists) {
+      // Already exists, optionally update keys and userId
+      await pg.none(
+        'update push_subscriptions set keys = $1, user_id = $2 where id = $3',
+        [subscription.keys, userId, exists.id]
+      );
+    } else {
+      await pg.none(
+        `insert into push_subscriptions(endpoint, keys, user_id) values($1, $2, $3)
+         on conflict(endpoint) do update set keys = excluded.keys
+        `,
+        [subscription.endpoint, subscription.keys, userId]
+      );
+    }
+
+    return {success: true};
+  } catch (err) {
+    console.error('Error saving subscription', err);
+    throw new APIError(500, `Failed to save subscription`)
+  }
+}

backend/supabase/push_subscriptions.sql

@@ -0,0 +1,10 @@
+create table push_subscriptions (
+    id serial primary key,
+    user_id TEXT references users(id), -- optional if per-user
+    endpoint text not null unique,
+    keys jsonb not null,
+    created_at timestamptz default now()
+);
+
+-- Row Level Security
+ALTER TABLE push_subscriptions ENABLE ROW LEVEL SECURITY;

common/src/api/schema.ts

@@ -572,6 +572,15 @@ export const API = (_apiTypeCheck = {
     props: z.object({}),
     returns: {} as { count: number },
   },
+  'save-subscription': {
+    method: 'POST',
+    authed: true,
+    rateLimited: true,
+    returns: {} as any,
+    props: z.object({
+      subscription: z.record(z.any())
+    }),
+  },
 } as const)
 
 export type APIPath = keyof typeof API

common/src/util/parse.ts

@@ -2,7 +2,6 @@ import {
   getText,
   getSchema,
   getTextSerializersFromSchema,
-  Node,
   JSONContent,
 } from '@tiptap/core'
 import { Node as ProseMirrorNode } from '@tiptap/pm/model'
@@ -77,3 +76,10 @@ export function richTextToString(text?: JSONContent) {
 export function parseJsonContentToText(content: JSONContent | string) {
   return typeof content === 'string' ? content : richTextToString(content)
 }
+
+export function urlBase64ToUint8Array(base64String: string) {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
+  const rawData = window.atob(base64);
+  return new Uint8Array([...rawData].map(c => c.charCodeAt(0)));
+}