Implement Web Push notifications

.eslintrc

@@ -2,7 +2,8 @@
     "env": {
         "browser": true,
         "es2021": true,
-        "node": true
+        "node": true,
+        "serviceworker": true
     },
     "root": true,
     "parser": "vue-eslint-parser",

app/client/public/service-worker.js

@@ -0,0 +1,14 @@
+self.addEventListener('push', function (event) {
+    let data = {};
+    if (event.data) {
+        data = event.data.json();
+    }
+
+    const title = data.title ?? 'SkyChat Notification';
+    const options = {
+        body: data.body ?? 'New notification from SkyChat',
+        icon: '/favicon.png',
+    };
+
+    event.waitUntil(self.registration.showNotification(title, options));
+});

app/client/src/lib/WebPush.js

@@ -0,0 +1,39 @@
+export class WebPush {
+    static SERVICE_WORKER_URL = 'service-worker.js';
+
+    static urlBase64ToUint8Array(base64String) {
+        const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+        const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+        const rawData = window.atob(base64);
+        const outputArray = new Uint8Array(rawData.length);
+        for (let i = 0; i < rawData.length; ++i) {
+            outputArray[i] = rawData.charCodeAt(i);
+        }
+        return outputArray;
+    }
+
+    static async register(vapidPublicKey) {
+        if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
+            throw new Error('WebPush is not supported');
+        }
+
+        const registration = await navigator.serviceWorker.register(WebPush.SERVICE_WORKER_URL);
+        const permission = await Notification.requestPermission();
+
+        const subscription = await registration.pushManager.getSubscription();
+        if (subscription) {
+            return null;
+        }
+
+        if (permission !== 'granted') {
+            throw new Error('Permission denied');
+        }
+
+        const convertedVapidKey = WebPush.urlBase64ToUint8Array(vapidPublicKey);
+
+        return registration.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: convertedVapidKey,
+        });
+    }
+}

app/client/src/stores/client.js

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { useToast } from 'vue-toastification';
 import { SkyChatClient } from '../../../api/index.ts';
+import { WebPush } from '../lib/WebPush.js';
 
 // Connect to SkyChatClient
 const protocol = document.location.protocol === 'http:' ? 'ws' : 'wss';
@@ -84,6 +85,23 @@ export const useClientStore = defineStore('client', {
                 this.messages[messageIndex] = message;
             });
 
+            // Ask for push notification permission on user login
+            client.on('set-user', async (user) => {
+                if (!user.id) {
+                    return;
+                }
+
+                try {
+                    const subscription = await WebPush.register(import.meta.env.VAPID_PUBLIC_KEY);
+                    if (subscription) {
+                        client.sendMessage(`/push ${JSON.stringify(subscription)}`);
+                    }
+                } catch (error) {
+                    console.error(error);
+                    return;
+                }
+            });
+
             client.on('info', (info) => {
                 const toast = useToast();
                 toast.info(info);

app/server/plugins/core/CorePluginGroup.ts

@@ -20,6 +20,7 @@ import { ReactionPlugin } from './global/ReactionPlugin.js';
 import { SetRightPlugin } from './global/SetRightPlugin.js';
 import { StickerPlugin } from './global/StickerPlugin.js';
 import { VoidPlugin } from './global/VoidPlugin.js';
+import { WebPushPlugin } from './global/WebPushPlugin.js';
 import { WelcomePlugin } from './global/WelcomePlugin.js';
 import { XpTickerPlugin } from './global/XpTickerPlugin.js';
 import { HelpPlugin } from './room/HelpPlugin.js';
@@ -65,6 +66,7 @@ export class CorePluginGroup extends PluginGroup {
         SetRightPlugin,
         StickerPlugin,
         VoidPlugin,
+        WebPushPlugin,
         WelcomePlugin,
         XpTickerPlugin,
     ];

app/server/plugins/core/global/WebPushPlugin.ts

@@ -0,0 +1,136 @@
+import { Connection } from '../../../skychat/Connection.js';
+import { Logging } from '../../../skychat/Logging.js';
+import { RoomManager } from '../../../skychat/RoomManager.js';
+import { User } from '../../../skychat/User.js';
+import { UserController } from '../../../skychat/UserController.js';
+import { GlobalPlugin } from '../../GlobalPlugin.js';
+
+import webpush from 'web-push';
+
+type Subscription = {
+    endpoint: string;
+    expirationTime: number | null;
+    keys: {
+        auth: string;
+        p256dh: string;
+    };
+};
+
+export class WebPushPlugin extends GlobalPlugin {
+    static readonly ENDPOINTS_WHITELIST = ['fcm.googleapis.com', '.push.services.mozilla.com', '.windows.com'];
+
+    static readonly REPO_URL = 'https://github.com/skychatorg/skychat';
+
+    static readonly MAX_SUBSCRIPTIONS = 10;
+
+    static readonly commandName = 'push';
+
+    static readonly commandAliases = ['pushclear'];
+
+    readonly minRight = 0;
+
+    readonly rules = {
+        push: {
+            minCount: 1,
+            coolDown: 2000,
+        },
+    };
+
+    constructor(manager: RoomManager) {
+        super(manager);
+
+        webpush.setVapidDetails(WebPushPlugin.REPO_URL, process.env.VAPID_PUBLIC_KEY as string, process.env.VAPID_PRIVATE_KEY as string);
+    }
+
+    async run(alias: string, param: string, connection: Connection): Promise<void> {
+        if (alias === 'push') {
+            return this.handlePush(param, connection);
+        } else if (alias === 'pushclear') {
+            return this.handlePushClear(connection);
+        }
+    }
+
+    async handlePush(param: string, connection: Connection): Promise<void> {
+        const data = JSON.parse(param);
+        if (!data || typeof data !== 'object') {
+            throw new Error('Invalid data');
+        }
+
+        // Sanitize data
+        if (typeof data.endpoint !== 'string') {
+            throw new Error('Invalid endpoint');
+        }
+        const url = new URL(data.endpoint);
+        if (!url || !url.hostname || !WebPushPlugin.ENDPOINTS_WHITELIST.some((allowed) => url.hostname.endsWith(allowed))) {
+            throw new Error(`Endpoint ${url.hostname} not allowed for push notifications`);
+        }
+        if (typeof data.expirationTime !== 'number' && data.expirationTime !== null) {
+            throw new Error('Invalid expirationTime');
+        }
+        if (typeof data.keys !== 'object') {
+            throw new Error('Invalid keys');
+        }
+        if (typeof data.keys.auth !== 'string') {
+            throw new Error('Invalid keys.auth');
+        }
+        if (typeof data.keys.p256dh !== 'string') {
+            throw new Error('Invalid keys.p256dh');
+        }
+        const subscription: Subscription = {
+            endpoint: data.endpoint,
+            expirationTime: data.expirationTime,
+            keys: {
+                auth: data.keys.auth,
+                p256dh: data.keys.p256dh,
+            },
+        };
+
+        // Prepare to store the subscription
+        const user = connection.session.user;
+        if (!Array.isArray(user.storage[WebPushPlugin.commandName])) {
+            user.storage[WebPushPlugin.commandName] = [];
+        }
+
+        // Does the subscription already exist?
+        if (user.storage[WebPushPlugin.commandName].some((s: Subscription) => s.endpoint === subscription.endpoint)) {
+            return;
+        }
+
+        // Store the subscription & clean up old ones
+        user.storage[WebPushPlugin.commandName].push(subscription);
+        while (user.storage[WebPushPlugin.commandName].length > WebPushPlugin.MAX_SUBSCRIPTIONS) {
+            user.storage[WebPushPlugin.commandName].shift();
+        }
+        UserController.sync(user);
+    }
+
+    async handlePushClear(connection: Connection): Promise<void> {
+        const user = connection.session.user;
+        user.storage[WebPushPlugin.commandName] = [];
+        await UserController.sync(user);
+    }
+
+    send(user: User, data: { title: string; body: string; tag: string }): void {
+        const subscriptions = user.storage[WebPushPlugin.commandName] as Subscription[];
+        if (!subscriptions) {
+            return;
+        }
+
+        // We do not `await` not to block the main logic
+        Logging.info(`Sending push notification to ${user.username}`);
+        for (const subscription of subscriptions) {
+            webpush
+                .sendNotification(subscription, JSON.stringify(data))
+                .then(() => {
+                    Logging.info(`Push notification sent to ${user.username}`);
+                })
+                .catch(async (error) => {
+                    // We delete the subscription if it is not valid anymore (we assume it is not if we can't send a notification once)
+                    Logging.error(`Error sending push notification to ${user.username}`, error);
+                    // drop `subscription` from `subscriptions`
+                    user.storage[WebPushPlugin.commandName] = subscriptions.filter((s) => s !== subscription);
+                    await UserController.sync(user);
+                });
+        }
+    }
+}

app/server/plugins/core/room/MentionPlugin.ts

@@ -4,6 +4,7 @@ import { Message } from '../../../skychat/Message.js';
 import { Session } from '../../../skychat/Session.js';
 import { RoomPlugin } from '../../RoomPlugin.js';
 import { BlacklistPlugin } from '../global/BlacklistPlugin.js';
+import { WebPushPlugin } from '../global/WebPushPlugin.js';
 
 export class MentionPlugin extends RoomPlugin {
     static readonly commandName = 'mention';
@@ -25,7 +26,7 @@ export class MentionPlugin extends RoomPlugin {
 
         const mentions = message.content.match(/@[a-zA-Z0-9-_]+/g);
 
-        // Note quote detected
+        // No quote detected
         if (mentions === null) {
             return message;
         }
@@ -60,9 +61,18 @@ export class MentionPlugin extends RoomPlugin {
                 identifier: connection.session.identifier,
                 messageId: message.id,
             });
+
+            // Send push notification
+            const webPushPlugin = this.room.manager.getPlugin(WebPushPlugin.commandName) as WebPushPlugin;
+            if (webPushPlugin && session.user.id) {
+                webPushPlugin.send(session.user, {
+                    title: `Mention in #${this.room.name}`,
+                    body: `${connection.session.user.username} mentioned you in #${this.room.name}`,
+                    tag: 'mention',
+                });
+            }
         }
 
-        // For each quote
         return message;
     }
 }

app/template/.env.template

@@ -57,6 +57,10 @@ DOCKER_GID="$DOCKER_GID"
 # Container timezone.
 DOCKER_TZ="Europe/Paris"
 
+# VAPID keys for web push notifications.
+VAPID_PUBLIC_KEY=
+VAPID_PRIVATE_KEY=
+
 # Mailgun API key. If unset, you will not be able to send emails.
 MAILGUN_API_KEY=
 

docker-compose.yml

@@ -46,6 +46,8 @@ services:
       MAILGUN_API_KEY: "${MAILGUN_API_KEY}"
       MAILGUN_DOMAIN: "${MAILGUN_DOMAIN}"
       MAILGUN_FROM: "${MAILGUN_FROM}"
+      VAPID_PUBLIC_KEY: ${VAPID_PUBLIC_KEY}
+      VAPID_PRIVATE_KEY: ${VAPID_PRIVATE_KEY}
     volumes:
       - ./config:/workdir/config
       - ./backups:/workdir/backups