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,34 @@
+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();
+
+        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,21 @@ 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);
+                    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,96 @@
+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';
+
+export class WebPushPlugin extends GlobalPlugin {
+    static readonly commandName = 'push';
+
+    static readonly commandAliases = [];
+
+    static readonly ENDPOINTS_WHITELIST = ['fcm.googleapis.com', 'updates.push.services.mozilla.com', 'windows.com'];
+
+    readonly minRight = 0;
+
+    readonly rules = {
+        push: {
+            minCount: 1,
+            coolDown: 2000,
+        },
+    };
+
+    constructor(manager: RoomManager) {
+        super(manager);
+
+        console.log('VAPID_PUBLIC_KEY', process.env.VAPID_PUBLIC_KEY as string);
+        console.log('VAPID_PRIVATE_KEY', process.env.VAPID_PRIVATE_KEY as string);
+        webpush.setVapidDetails(
+            `https://github.com/skychatorg/skychat`,
+            process.env.VAPID_PUBLIC_KEY as string,
+            process.env.VAPID_PRIVATE_KEY as string,
+        );
+    }
+
+    async run(alias: string, param: string, connection: Connection): Promise<void> {
+        const data = JSON.parse(param);
+        if (!data || typeof data !== 'object') {
+            throw new Error('Invalid 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 user = connection.session.user;
+        user.storage[WebPushPlugin.commandName] = {
+            endpoint: data.endpoint,
+            expirationTime: data.expirationTime,
+            keys: {
+                auth: data.keys.auth,
+                p256dh: data.keys.p256dh,
+            },
+        };
+        UserController.sync(user);
+    }
+
+    send(user: User, data: { title: string; body: string; tag: string }): void {
+        const subscription = user.storage[WebPushPlugin.commandName];
+        if (!subscription) {
+            return;
+        }
+
+        // We do not `await` not to block the main logic
+        Logging.info(`Sending push notification to ${user.username}`);
+        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);
+                user.storage[WebPushPlugin.commandName] = null;
+                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