diff --git a/.gitignore b/.gitignore index 1af58a97..d0883737 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,6 @@ node_modules devAssets .DS_Store -.idea \ No newline at end of file +.idea + +.env \ No newline at end of file diff --git a/config.json b/config.json index de6015a1..dc03d487 100644 --- a/config.json +++ b/config.json @@ -10,6 +10,12 @@ ], "allowCustomHomeservers": true, + "pushNotificationDetails": { + "pushNotifyUrl": "https://cinny.cc/_matrix/push/v1/notify", + "vapidPublicKey": "BHLwykXs79AbKNiblEtZZRAgnt7o5_ieImhVJD8QZ01MVwAHnXwZzNgQEJJEU3E5CVsihoKtb7yaNe5x3vmkWkI", + "webPushAppID": "cc.cinny.web" + }, + "featuredCommunities": { "openAsDefault": false, "spaces": [ diff --git a/docs/Caddyfile b/docs/Caddyfile new file mode 100644 index 00000000..3d03c2f4 --- /dev/null +++ b/docs/Caddyfile @@ -0,0 +1,10 @@ +(tls_cloudflare) { + tls { + dns cloudflare {env.CLOUDFLARE_API_TOKEN} + } +} + + { + import tls_cloudflare + reverse_proxy sygnal:5000 +} diff --git a/docs/Dockerfile b/docs/Dockerfile new file mode 100644 index 00000000..6900bc67 --- /dev/null +++ b/docs/Dockerfile @@ -0,0 +1,9 @@ +FROM caddy:builder AS builder + +RUN xcaddy build \ + --with github.com/caddy-dns/cloudflare +FROM caddy:latest + +COPY --from=builder /usr/bin/caddy /usr/bin/caddy +COPY Caddyfile /etc/caddy/Caddyfile +COPY .env /etc/caddy/.env \ No newline at end of file diff --git a/docs/sample.env b/docs/sample.env new file mode 100644 index 00000000..dc3b650c --- /dev/null +++ b/docs/sample.env @@ -0,0 +1 @@ +CLOUDFLARE_API_TOKEN= \ No newline at end of file diff --git a/docs/sygnal-setup.md b/docs/sygnal-setup.md new file mode 100644 index 00000000..0a13fa43 --- /dev/null +++ b/docs/sygnal-setup.md @@ -0,0 +1,308 @@ +## Sygnal with Caddy & Cloudflare on Vultr + +This document walks you through setting up a [Sygnal](https://github.com/matrix-org/sygnal) push gateway for Matrix, running in a Docker container. We will use [Caddy](https://caddyserver.com/) as a reverse proxy, also in Docker, to handle HTTPS automatically using DNS challenges with [Cloudflare](https://www.cloudflare.com/). + +Now Cloudflare and Vultr have a deal in place where traffic from Cloudflare to Vultr and vice versa does not incur bandwidth usage. So you can pass endless amounts through without any extra billing. This is why the docs utilize Vultr, but you're free to use whatever cloud provider you want and not use Cloudflare if you so choose. + +### Prerequisites + +1. **Vultr Server**: A running server instance. This guide assumes a fresh server running a common Linux distribution like Debian, Ubuntu, or Alpine. +2. **Domain Name**: A domain name managed through Cloudflare. +3. **Cloudflare Account**: Your domain must be using Cloudflare's DNS. +4. **Docker & Docker Compose**: Docker and `docker-compose` must be installed on your Vultr server. +5. **A Matrix Client**: A client like [Cinny](https://github.com/cinnyapp/cinny) that you want to point to your new push gateway. + +--- + +### Step 1: Cloudflare Configuration + +Before touching the server, we need to configure Cloudflare. + +#### 1.1. DNS Record + +In your Cloudflare dashboard, create an **A** (for IPv4) or **AAAA** (for IPv6) record for the subdomain you'll use for Sygnal. Point it to your Vultr server's IP address. + +- **Type**: `A` or `AAAA` +- **Name**: `sygnal.your-domain.com` (or your chosen subdomain) +- **Content**: Your Vultr server's IP address +- **Proxy status**: **Proxied** (Orange Cloud). This is important for Caddy's setup. + +#### 1.2. API Token + +Caddy needs an API token to prove to Cloudflare that you own the domain so it can create the necessary DNS records for issuing an SSL certificate. + +1. Go to **My Profile** \> **API Tokens** in Cloudflare. +2. Click **Create Token**. +3. Use the **Edit zone DNS** template. +4. Under **Permissions**, ensure `Zone:DNS:Edit` is selected. +5. Under **Zone Resources**, select the specific zone for `your-domain.com`. +6. Continue to summary and create the token. +7. **Copy the generated token immediately.** You will not be able to see it again. We will use this as your `CLOUDFLARE_API_TOKEN`. + +--- + +### Step 2: Server Preparation + +#### 2.1. Connect to your Server (SSH) + +If your Vultr instance uses an IPv6 address, connecting via SSH can sometimes be tricky. You can create an alias in your local `~/.ssh/config` file to make it easier. + +Open or create `~/.ssh/config` on your local machine and add: + +``` +Host vultr-sygnal + # Replace with your server's IPv6 or IPv4 address + Hostname 2001:19f0:5400:1532:5400:05ff:fe78:fb25 + User root + # For IPv6, uncomment the line below + # AddressFamily inet6 +``` + +Now you can connect simply by typing `ssh vultr-sygnal`. + +#### 2.2. Install Docker and Docker Compose + +Follow the official Docker documentation to install the Docker Engine and Docker Compose for your server's operating system. + +#### 2.3. Configure Firewall + +We need to allow HTTP and HTTPS traffic so Caddy can obtain certificates and serve requests. If you are using `ufw`: + +```sh +sudo ufw allow 80/tcp +sudo ufw allow 443/tcp +sudo ufw enable +sudo ufw status +``` + +--- + +### Step 3: Project Structure and Configuration + +On your Vultr server, let's create a directory to hold all our configuration files. + +```sh +mkdir -p /opt/matrix-sygnal +cd /opt/matrix-sygnal +``` + +We will create all subsequent files inside this `/opt/matrix-sygnal` directory. + +#### 3.1. Sygnal VAPID Keys + +WebPush requires a VAPID key pair. The private key stays on your server, and the public key is given to clients. + +1. **Generate the Private Key**: + Use `openssl` to generate an EC private key. + + ```sh + # This command needs to be run in the /opt/matrix-sygnal directory + openssl ecparam -name prime256v1 -genkey -noout -out sygnal_private_key.pem + ``` + +2. **Extract the Public Key**: + Extract the corresponding public key from the private key. You will need this for your client configuration later. + + ```sh + # This command extracts the public key in the correct format + openssl ec -in sygnal_private_key.pem -pubout -outform DER | tail -c 65 | base64 | tr '/+' '_-' | tr -d '=' + ``` + + **Save the output of this command.** This is your `vapidPublicKey`. It should look similar to the one from the `cinny.cc` example. + +#### 3.2. Sygnal Configuration (`sygnal.yaml`) + +Create a file named `sygnal.yaml`. This file tells Sygnal how to run. + +```yaml +# /opt/matrix-sygnal/sygnal.yaml +http: + bind_addresses: ['0.0.0.0'] + port: 5000 + +# This is where we configure our push gateway app +apps: + # This app_id must match the one used in your client's configuration + cc.cinny.web: + type: webpush + # This path is *inside the container*. We will map our generated key to it. + vapid_private_key: /data/private_key.pem + # An email for VAPID contact details + vapid_contact_email: mailto:your-email@your-domain.com +``` + +#### 3.3. Caddy Configuration (`Caddyfile`) + +Create a file named `Caddyfile`. This tells Caddy how to proxy requests. + +**Replace `sygnal.your-domain.com`** with the domain you configured in Step 1. + +```caddyfile +# /opt/matrix-sygnal/Caddyfile + +# Reusable snippet for Cloudflare TLS +(tls_cloudflare) { + tls { + dns cloudflare {env.CLOUDFLARE_API_TOKEN} + } +} + +# Your public-facing URL +sygnal.your-domain.com { + # Get an SSL certificate from Let's Encrypt using the Cloudflare DNS challenge + import tls_cloudflare + + # Log requests to standard output + log + + # Reverse proxy requests to the sygnal container on port 5000 + # 'sygnal' is the service name we will define in docker-compose.yml + reverse_proxy sygnal:5000 +} +``` + +#### 3.4. Caddy Dockerfile + +While you can use the standard `caddy:latest` image, you need one with the Cloudflare DNS provider plugin. Create a file named `Dockerfile` for Caddy. + +```dockerfile +# /opt/matrix-sygnal/Dockerfile +FROM caddy:builder AS builder + +RUN xcaddy build \ + --with github.com/caddy-dns/cloudflare + +FROM caddy:latest + +COPY --from=builder /usr/bin/caddy /usr/bin/caddy +``` + +#### 3.5. Environment File (`.env`) + +Create a file named `.env` to securely store your Cloudflare API Token. + +```.env +# /opt/matrix-sygnal/.env +CLOUDFLARE_API_TOKEN=your-cloudflare-api-token-from-step-1 +``` + +--- + +### Step 4: Docker Compose + +Using `docker-compose` simplifies managing our multi-container application. Create a `docker-compose.yml` file. + +```yaml +# /opt/matrix-sygnal/docker-compose.yml +version: '3.7' + +services: + caddy: + # Build the Caddy image from our Dockerfile in the current directory + build: . + container_name: caddy + hostname: caddy + restart: unless-stopped + networks: + - matrix + ports: + # Expose standard web ports to the host + - '80:80' + - '443:443' + volumes: + # Mount the Caddyfile into the container + - ./Caddyfile:/etc/caddy/Caddyfile + # Create a volume for Caddy's data (certs, etc.) + - caddy_data:/data + # Load the Cloudflare token from the .env file + env_file: + - ./.env + + sygnal: + # Use the official Sygnal image + image: matrixdotorg/sygnal:latest + container_name: sygnal + hostname: sygnal + restart: unless-stopped + networks: + - matrix + volumes: + # Mount the Sygnal config file + - ./sygnal.yaml:/sygnal.yaml + # Mount the generated private key to the path specified in sygnal.yaml + - ./sygnal_private_key.pem:/data/private_key.pem + # Create a volume for any other data Sygnal might store + - sygnal_data:/data + command: ['--config-path=/sygnal.yaml'] + +volumes: + caddy_data: + sygnal_data: + +networks: + matrix: + driver: bridge +``` + +--- + +### Step 5: Launch the Services + +Your directory `/opt/matrix-sygnal` should now look like this: + +``` +/opt/matrix-sygnal/ +├── Caddyfile +├── docker-compose.yml +├── Dockerfile +├── .env +├── sygnal.yaml +└── sygnal_private_key.pem +``` + +Now, you can build and run everything with a single command: + +```sh +cd /opt/matrix-sygnal +sudo docker-compose up --build -d +``` + +- `--build` tells Docker Compose to build the Caddy image from your `Dockerfile`. +- `-d` runs the containers in detached mode (in the background). + +To check the status and logs: + +```sh +# See if containers are running +sudo docker-compose ps + +# View the live logs for both services +sudo docker-compose logs -f + +# View logs for a specific service (e.g., caddy) +sudo docker-compose logs -f caddy +``` + +Caddy will automatically start, obtain an SSL certificate for `sygnal.your-domain.com`, and begin proxying requests to the Sygnal container. + +--- + +### Step 6: Client Configuration + +The final step is to configure your Matrix client to use your new push gateway. In Cinny, for example, you would modify its `config.json` or use a homeserver that advertises these settings. + +Update the `pushNotificationDetails` section with the information from your server: + +```json +"pushNotificationDetails": { + "pushNotifyUrl": "https://sygnal.your-domain.com/_matrix/push/v1/notify", + "vapidPublicKey": "YOUR_VAPID_PUBLIC_KEY_FROM_STEP_3.1", + "webPushAppID": "cc.cinny.web" +} +``` + +- **`pushNotifyUrl`**: The public URL of your new Sygnal instance. +- **`vapidPublicKey`**: The public key you generated in step 3.1. +- **`webPushAppID`**: The application ID you defined in your `sygnal.yaml`. This must match exactly. + +After configuring your client, it will register for push notifications with your Sygnal instance, which will then handle delivering them. diff --git a/docs/sygnal.yaml b/docs/sygnal.yaml new file mode 100644 index 00000000..3f5613fc --- /dev/null +++ b/docs/sygnal.yaml @@ -0,0 +1,9 @@ +http: + bind_addresses: ['0.0.0.0'] + port: 5000 + +apps: + cc.cinny.web: + type: webpush + vapid_private_key: /data/private_key.pem + vapid_contact_email: help@cinny.cc diff --git a/package-lock.json b/package-lock.json index 3fc29010..c224dd7f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -102,7 +102,8 @@ "vite": "5.4.19", "vite-plugin-pwa": "0.20.5", "vite-plugin-static-copy": "1.0.4", - "vite-plugin-top-level-await": "1.4.4" + "vite-plugin-top-level-await": "1.4.4", + "workbox-precaching": "7.3.0" }, "engines": { "node": ">=16.0.0" @@ -12212,6 +12213,7 @@ "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-7.3.0.tgz", "integrity": "sha512-ckp/3t0msgXclVAYaNndAGeAoWQUv7Rwc4fdhWL69CCAb2UHo3Cef0KIUctqfQj1p8h6aGyz3w8Cy3Ihq9OmIw==", "dev": true, + "license": "MIT", "dependencies": { "workbox-core": "7.3.0", "workbox-routing": "7.3.0", diff --git a/package.json b/package.json index 81d0e20a..a33f8791 100644 --- a/package.json +++ b/package.json @@ -113,6 +113,7 @@ "vite": "5.4.19", "vite-plugin-pwa": "0.20.5", "vite-plugin-static-copy": "1.0.4", - "vite-plugin-top-level-await": "1.4.4" + "vite-plugin-top-level-await": "1.4.4", + "workbox-precaching": "7.3.0" } } diff --git a/src/app/features/settings/notifications/DeregisterPushNotifications.tsx b/src/app/features/settings/notifications/DeregisterPushNotifications.tsx new file mode 100644 index 00000000..bc6b65d4 --- /dev/null +++ b/src/app/features/settings/notifications/DeregisterPushNotifications.tsx @@ -0,0 +1,149 @@ +import React, { useState } from 'react'; +import FocusTrap from 'focus-trap-react'; +import { + Box, + Button, + color, + config, + Dialog, + Header, + Icon, + IconButton, + Icons, + Overlay, + OverlayBackdrop, + OverlayCenter, + Spinner, + Text, +} from 'folds'; +import { useAtom } from 'jotai'; +import { useMatrixClient } from '../../../hooks/useMatrixClient'; +import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback'; +import { useSetting } from '../../../state/hooks/settings'; +import { settingsAtom } from '../../../state/settings'; +import { pushSubscriptionAtom } from '../../../state/pushSubscription'; +import { deRegisterAllPushers } from './PushNotifications'; +import { SettingTile } from '../../../components/setting-tile'; + +type ConfirmDeregisterDialogProps = { + onClose: () => void; + onConfirm: () => void; + isLoading: boolean; +}; + +function ConfirmDeregisterDialog({ onClose, onConfirm, isLoading }: ConfirmDeregisterDialogProps) { + return ( + }> + + + +
+ + Reset All Push Notifications + + + + +
+ + + This will remove push notifications from all your sessions and devices. This action + cannot be undone. Are you sure you want to continue? + + + + + + + + + + + ); +} + +export function DeregisterAllPushersSetting() { + const mx = useMatrixClient(); + const [deregisterState] = useAsyncCallback(deRegisterAllPushers); + const [isConfirming, setIsConfirming] = useState(false); + const [usePushNotifications, setPushNotifications] = useSetting( + settingsAtom, + 'usePushNotifications' + ); + + const [pushSubscription, setPushSubscription] = useAtom(pushSubscriptionAtom); + + const handleOpenConfirmDialog = () => { + setIsConfirming(true); + }; + + const handleCloseConfirmDialog = () => { + if (deregisterState.status === AsyncStatus.Loading) return; + setIsConfirming(false); + }; + + const handleConfirmDeregister = async () => { + await deRegisterAllPushers(mx); + setPushNotifications(false); + setPushSubscription(null); + setIsConfirming(false); + }; + + return ( + <> + {isConfirming && ( + + )} + + + + This will remove push notifications from all your sessions/devices. You will need to + re-enable them on each device individually. + + {deregisterState.status === AsyncStatus.Error && ( + +
+ Failed to deregister devices. Please try again. + + )} + {deregisterState.status === AsyncStatus.Success && ( + +
+ Successfully deregistered all devices. + + )} + + } + after={ + + } + /> + + ); +} diff --git a/src/app/features/settings/notifications/PushNotifications.tsx b/src/app/features/settings/notifications/PushNotifications.tsx new file mode 100644 index 00000000..3b2382fa --- /dev/null +++ b/src/app/features/settings/notifications/PushNotifications.tsx @@ -0,0 +1,155 @@ +import { MatrixClient } from 'matrix-js-sdk'; +import { ClientConfig } from '../../../hooks/useClientConfig'; + +export async function requestBrowserNotificationPermission(): Promise { + if (!('Notification' in window)) { + return 'denied'; + } + try { + const permission: NotificationPermission = await Notification.requestPermission(); + return permission; + } catch (error) { + console.error('Error requesting notification permission:', error); + return 'denied'; + } +} + +export async function enablePushNotifications( + mx: MatrixClient, + clientConfig: ClientConfig, + pushSubscriptionAtom: Atom +): Promise { + if (!('serviceWorker' in navigator) || !('PushManager' in window)) { + throw new Error('Push messaging is not supported in this browser.'); + } + const [pushSubAtom, setPushSubscription] = pushSubscriptionAtom; + const registration = await navigator.serviceWorker.ready; + const currentBrowserSub = await registration.pushManager.getSubscription(); + + /* Self-Healing Check. Effectively checks if the browser has invalidated our subscription and recreates it + only when necessary. This prevents us from needing an external call to get back the web push info. + */ + if (currentBrowserSub && pushSubAtom && currentBrowserSub.endpoint === pushSubAtom.endpoint) { + console.error('Valid saved subscription found. Ensuring pusher is enabled on homeserver...'); + const pusherData = { + kind: 'http' as const, + app_id: clientConfig.pushNotificationDetails?.webPushAppID, + pushkey: pushSubAtom.keys!.p256dh!, + app_display_name: 'Cinny', + device_display_name: 'This Browser', + lang: navigator.language || 'en', + data: { + url: clientConfig.pushNotificationDetails?.pushNotifyUrl, + format: 'event_id_only' as const, + endpoint: pushSubAtom.endpoint, + p256dh: pushSubAtom.keys!.p256dh!, + auth: pushSubAtom.keys!.auth!, + }, + append: false, + }; + navigator.serviceWorker.controller?.postMessage({ + url: mx.baseUrl, + type: 'togglePush', + pusherData, + token: mx.getAccessToken(), + }); + return; + } + + console.error('No valid saved subscription. Performing full, new subscription...'); + + if (currentBrowserSub) { + await currentBrowserSub.unsubscribe(); + } + + const newSubscription = await registration.pushManager.subscribe({ + userVisibleOnly: true, + applicationServerKey: clientConfig.pushNotificationDetails?.vapidPublicKey, + }); + + setPushSubscription(newSubscription); + + const subJson = newSubscription.toJSON(); + const pusherData = { + kind: 'http' as const, + app_id: clientConfig.pushNotificationDetails?.webPushAppID, + pushkey: subJson.keys!.p256dh!, + app_display_name: 'Cinny', + device_display_name: + (await mx.getDevice(mx.getDeviceId() ?? '')).display_name ?? 'Unknown Device', + lang: navigator.language || 'en', + data: { + url: clientConfig.pushNotificationDetails?.pushNotifyUrl, + format: 'event_id_only' as const, + endpoint: newSubscription.endpoint, + p256dh: subJson.keys!.p256dh!, + auth: subJson.keys!.auth!, + }, + append: false, + }; + + navigator.serviceWorker.controller?.postMessage({ + url: mx.baseUrl, + type: 'togglePush', + pusherData, + token: mx.getAccessToken(), + }); +} + +/** + * Disables push notifications by telling the homeserver to delete the pusher, + * but keeps the browser subscription locally for a fast re-enable. + */ +export async function disablePushNotifications( + mx: MatrixClient, + clientConfig: ClientConfig, + pushSubscriptionAtom: Atom +): Promise { + const [pushSubAtom] = pushSubscriptionAtom; + + const pusherData = { + kind: null, + app_id: clientConfig.pushNotificationDetails?.webPushAppID, + pushkey: pushSubAtom?.keys?.p256dh, + }; + + navigator.serviceWorker.controller?.postMessage({ + url: mx.baseUrl, + type: 'togglePush', + pusherData, + token: mx.getAccessToken(), + }); +} + +export async function deRegisterAllPushers(mx: MatrixClient): Promise { + const response = await mx.getPushers(); + const pushers = response.pushers || []; + if (pushers.length === 0) return; + + const deletionPromises = pushers.map((pusher) => { + const pusherToDelete = { + kind: null, + app_id: pusher.app_id, + pushkey: pusher.pushkey, + }; + return mx.setPusher(pusherToDelete as any); + }); + + await Promise.allSettled(deletionPromises); +} + +export async function togglePusher( + mx: MatrixClient, + clientConfig: ClientConfig, + visible: boolean, + usePushNotifications: boolean, + pushSubscriptionAtom: Atom +): Promise { + if (usePushNotifications) { + if (visible) { + await disablePushNotifications(mx, clientConfig, pushSubscriptionAtom); + } else { + await enablePushNotifications(mx, clientConfig, pushSubscriptionAtom); + } + } +} diff --git a/src/app/features/settings/notifications/SystemNotification.tsx b/src/app/features/settings/notifications/SystemNotification.tsx index e0df06df..276b6421 100644 --- a/src/app/features/settings/notifications/SystemNotification.tsx +++ b/src/app/features/settings/notifications/SystemNotification.tsx @@ -1,6 +1,8 @@ -import React, { useCallback } from 'react'; +/* eslint-disable no-nested-ternary */ +import React, { useCallback, useEffect, useState } from 'react'; import { Box, Text, Switch, Button, color, Spinner } from 'folds'; import { IPusherRequest } from 'matrix-js-sdk'; +import { useAtom } from 'jotai'; import { SequenceCard } from '../../../components/sequence-card'; import { SequenceCardStyle } from '../styles.css'; import { SettingTile } from '../../../components/setting-tile'; @@ -10,6 +12,14 @@ import { getNotificationState, usePermissionState } from '../../../hooks/usePerm import { useEmailNotifications } from '../../../hooks/useEmailNotifications'; import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback'; import { useMatrixClient } from '../../../hooks/useMatrixClient'; +import { + requestBrowserNotificationPermission, + enablePushNotifications, + disablePushNotifications, +} from './PushNotifications'; +import { useClientConfig } from '../../../hooks/useClientConfig'; +import { pushSubscriptionAtom } from '../../../state/pushSubscription'; +import { DeregisterAllPushersSetting } from './DeregisterPushNotifications'; function EmailNotification() { const mx = useMatrixClient(); @@ -84,21 +94,93 @@ function EmailNotification() { ); } +function WebPushNotificationSetting() { + const mx = useMatrixClient(); + const clientConfig = useClientConfig(); + const [isLoading, setIsLoading] = useState(true); + const [usePushNotifications, setPushNotifications] = useSetting( + settingsAtom, + 'usePushNotifications' + ); + const pushSubAtom = useAtom(pushSubscriptionAtom); + + const browserPermission = usePermissionState('notifications', getNotificationState()); + useEffect(() => { + setIsLoading(false); + }, []); + const handleRequestPermissionAndEnable = async () => { + setIsLoading(true); + try { + const permissionResult = await requestBrowserNotificationPermission(); + if (permissionResult === 'granted') { + await enablePushNotifications(mx, clientConfig, pushSubAtom); + setPushNotifications(true); + } + } finally { + setIsLoading(false); + } + }; + + const handlePushSwitchChange = async (wantsPush: boolean) => { + setIsLoading(true); + + try { + if (wantsPush) { + await enablePushNotifications(mx, clientConfig, pushSubAtom); + } else { + await disablePushNotifications(mx, clientConfig, pushSubAtom); + } + setPushNotifications(wantsPush); + } finally { + setIsLoading(false); + } + }; + + return ( + + Permission blocked. Please allow notifications in your browser settings. + + ) : ( + 'Receive notifications when the app is closed or in the background.' + ) + } + after={ + isLoading ? ( + + ) : browserPermission === 'prompt' ? ( + + ) : browserPermission === 'granted' ? ( + + ) : null + } + /> + ); +} + export function SystemNotification() { - const notifPermission = usePermissionState('notifications', getNotificationState()); - const [showNotifications, setShowNotifications] = useSetting(settingsAtom, 'showNotifications'); + const [showInAppNotifs, setShowInAppNotifs] = useSetting(settingsAtom, 'useInAppNotifications'); const [isNotificationSounds, setIsNotificationSounds] = useSetting( settingsAtom, 'isNotificationSounds' ); - const requestNotificationPermission = () => { - window.Notification.requestPermission(); - }; - return ( - System + System & Notifications + + + - {'Notification' in window - ? 'Notification permission is blocked. Please allow notification permission from browser address bar.' - : 'Notifications are not supported by the system.'} - - ) : ( - Show desktop notifications when message arrive. - ) - } - after={ - notifPermission === 'prompt' ? ( - - ) : ( - - ) - } + title="In-App Notifications" + description="Show a notification when a message arrives while the app is open (but not focused on the room)." + after={} /> } /> @@ -153,6 +213,15 @@ export function SystemNotification() { > + + + + ); } diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts new file mode 100644 index 00000000..f53974c1 --- /dev/null +++ b/src/app/hooks/useAppVisibility.ts @@ -0,0 +1,45 @@ +import { useEffect } from 'react'; +import { MatrixClient } from 'matrix-js-sdk'; +import { useAtom } from 'jotai'; +import { togglePusher } from '../features/settings/notifications/PushNotifications'; +import { appEvents } from '../utils/appEvents'; +import { useClientConfig } from './useClientConfig'; +import { useSetting } from '../state/hooks/settings'; +import { settingsAtom } from '../state/settings'; +import { pushSubscriptionAtom } from '../state/pushSubscription'; + +export function useAppVisibility(mx: MatrixClient | undefined) { + const clientConfig = useClientConfig(); + const [usePushNotifications] = useSetting(settingsAtom, 'usePushNotifications'); + const pushSubAtom = useAtom(pushSubscriptionAtom); + + useEffect(() => { + const handleVisibilityChange = () => { + const isVisible = document.visibilityState === 'visible'; + appEvents.onVisibilityChange?.(isVisible); + if (!isVisible) { + appEvents.onVisibilityHidden?.(); + } + }; + + document.addEventListener('visibilitychange', handleVisibilityChange); + + return () => { + document.removeEventListener('visibilitychange', handleVisibilityChange); + }; + }, []); + + useEffect(() => { + if (!mx) return; + + const handleVisibilityForNotifications = (isVisible: boolean) => { + togglePusher(mx, clientConfig, isVisible, usePushNotifications, pushSubAtom); + }; + + appEvents.onVisibilityChange = handleVisibilityForNotifications; + // eslint-disable-next-line consistent-return + return () => { + appEvents.onVisibilityChange = null; + }; + }, [mx, clientConfig, usePushNotifications, pushSubAtom]); +} diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts index e5fc6cc6..4e9fb749 100644 --- a/src/app/hooks/useClientConfig.ts +++ b/src/app/hooks/useClientConfig.ts @@ -10,6 +10,12 @@ export type ClientConfig = { homeserverList?: string[]; allowCustomHomeservers?: boolean; + pushNotificationDetails?: { + pushNotifyUrl?: string; + vapidPublicKey?: string; + webPushAppID?: string; + }; + featuredCommunities?: { openAsDefault?: boolean; spaces?: string[]; diff --git a/src/app/hooks/useRoomEventReaders.ts b/src/app/hooks/useRoomEventReaders.ts index 6222bf92..f634e586 100644 --- a/src/app/hooks/useRoomEventReaders.ts +++ b/src/app/hooks/useRoomEventReaders.ts @@ -21,7 +21,6 @@ const getEventReaders = (room: Room, evtId?: string) => { export const useRoomEventReaders = (room: Room, eventId?: string): string[] => { const [readers, setReaders] = useState(() => getEventReaders(room, eventId)); - useEffect(() => { setReaders(getEventReaders(room, eventId)); @@ -46,6 +45,7 @@ export const useRoomEventReaders = (room: Room, eventId?: string): string[] => { room.on(RoomEvent.Receipt, handleReceipt); room.on(RoomEvent.LocalEchoUpdated, handleLocalEcho); + return () => { room.removeListener(RoomEvent.Receipt, handleReceipt); room.removeListener(RoomEvent.LocalEchoUpdated, handleLocalEcho); diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index ce952bfc..2a4b54ba 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -57,7 +57,11 @@ function FaviconUpdater() { useEffect(() => { let notification = false; let highlight = false; + let total = 0; roomToUnread.forEach((unread) => { + if (unread.from === null) { + total += unread.total; + } if (unread.total > 0) { notification = true; } @@ -71,6 +75,11 @@ function FaviconUpdater() { } else { setFavicon(LogoSVG); } + try { + navigator.setAppBadge(total); + } catch (e) { + // Likely Firefox/Gecko-based and doesn't support badging API + } }, [roomToUnread]); return null; @@ -83,7 +92,7 @@ function InviteNotifications() { const mx = useMatrixClient(); const navigate = useNavigate(); - const [showNotifications] = useSetting(settingsAtom, 'showNotifications'); + const [showNotifications] = useSetting(settingsAtom, 'useInAppNotifications'); const [notificationSound] = useSetting(settingsAtom, 'isNotificationSounds'); const notify = useCallback( @@ -134,7 +143,7 @@ function MessageNotifications() { const unreadCacheRef = useRef>(new Map()); const mx = useMatrixClient(); const useAuthentication = useMediaAuthentication(); - const [showNotifications] = useSetting(settingsAtom, 'showNotifications'); + const [showNotifications] = useSetting(settingsAtom, 'useInAppNotifications'); const [notificationSound] = useSetting(settingsAtom, 'isNotificationSounds'); const navigate = useNavigate(); @@ -187,6 +196,7 @@ function MessageNotifications() { ) => { if (mx.getSyncState() !== 'SYNCING') return; if (document.hasFocus() && (selectedRoomId === room?.roomId || notificationSelected)) return; + if ( !room || !data.liveEvent || diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx index 846d8ff3..82b2b294 100644 --- a/src/app/pages/client/ClientRoot.tsx +++ b/src/app/pages/client/ClientRoot.tsx @@ -37,6 +37,7 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; import { useSyncState } from '../../hooks/useSyncState'; import { stopPropagation } from '../../utils/keyboard'; import { SyncStatus } from './SyncStatus'; +import { useAppVisibility } from '../../hooks/useAppVisibility'; function ClientRootLoading() { return ( @@ -156,6 +157,7 @@ export function ClientRoot({ children }: ClientRootProps) { ); useLogoutListener(mx); + useAppVisibility(mx); useEffect(() => { if (loadState.status === AsyncStatus.Idle) { @@ -177,7 +179,6 @@ export function ClientRoot({ children }: ClientRootProps) { } }, []) ); - return ( {mx && } diff --git a/src/app/state/pushSubscription.ts b/src/app/state/pushSubscription.ts new file mode 100644 index 00000000..1f5f10e3 --- /dev/null +++ b/src/app/state/pushSubscription.ts @@ -0,0 +1,32 @@ +import { atom } from 'jotai'; +import { + atomWithLocalStorage, + getLocalStorageItem, + setLocalStorageItem, +} from './utils/atomWithLocalStorage'; + +const PUSH_SUBSCRIPTION_KEY = 'webPushSubscription'; + +const basePushSubscriptionAtom = atomWithLocalStorage( + PUSH_SUBSCRIPTION_KEY, + (key) => getLocalStorageItem(key, null), + (key, value) => { + setLocalStorageItem(key, value); + } +); + +export const pushSubscriptionAtom = atom< + PushSubscriptionJSON | null, + [PushSubscription | null], + void +>( + (get) => get(basePushSubscriptionAtom), + (get, set, subscription: PushSubscription | null) => { + if (subscription) { + const subscriptionJSON = subscription.toJSON(); + set(basePushSubscriptionAtom, subscriptionJSON); + } else { + set(basePushSubscriptionAtom, null); + } + } +); diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 799747ac..394f9c61 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -32,7 +32,8 @@ export interface Settings { showHiddenEvents: boolean; legacyUsernameColor: boolean; - showNotifications: boolean; + usePushNotifications: boolean; + useInAppNotifications: boolean; isNotificationSounds: boolean; developerTools: boolean; @@ -62,7 +63,8 @@ const defaultSettings: Settings = { showHiddenEvents: false, legacyUsernameColor: false, - showNotifications: true, + usePushNotifications: false, + useInAppNotifications: true, isNotificationSounds: true, developerTools: false, diff --git a/src/app/utils/appEvents.ts b/src/app/utils/appEvents.ts new file mode 100644 index 00000000..12f3f22b --- /dev/null +++ b/src/app/utils/appEvents.ts @@ -0,0 +1,6 @@ +export const appEvents = { + + onVisibilityHidden: null as (() => void) | null, + + onVisibilityChange: null as ((isVisible: boolean) => void) | null, +}; diff --git a/src/index.tsx b/src/index.tsx index 402a4c1b..f5118555 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,39 +1,79 @@ -/* eslint-disable import/first */ import React from 'react'; import { createRoot } from 'react-dom/client'; import { enableMapSet } from 'immer'; import '@fontsource/inter/variable.css'; import 'folds/dist/style.css'; import { configClass, varsClass } from 'folds'; +import './index.scss'; +import { trimTrailingSlash } from './app/utils/common'; +import App from './app/pages/App'; +import './app/i18n'; enableMapSet(); -import './index.scss'; - -import { trimTrailingSlash } from './app/utils/common'; -import App from './app/pages/App'; - -// import i18n (needs to be bundled ;)) -import './app/i18n'; - document.body.classList.add(configClass, varsClass); -// Register Service Worker if ('serviceWorker' in navigator) { - const swUrl = - import.meta.env.MODE === 'production' - ? `${trimTrailingSlash(import.meta.env.BASE_URL)}/sw.js` - : `/dev-sw.js?dev-sw`; + const isProduction = import.meta.env.MODE === 'production'; + const swUrl = isProduction + ? `${trimTrailingSlash(import.meta.env.BASE_URL)}/sw.js` + : `/dev-sw.js?dev-sw`; + + const swRegisterOptions: RegistrationOptions = {}; + if (!isProduction) { + swRegisterOptions.type = 'module'; + } + + const showUpdateAvailablePrompt = (registration: ServiceWorkerRegistration) => { + const DONT_SHOW_PROMPT_KEY = 'cinny_dont_show_sw_update_prompt'; + const userPreference = localStorage.getItem(DONT_SHOW_PROMPT_KEY); + + if (userPreference === 'true') { + return; + } + + if (window.confirm('A new version of the app is available. Refresh to update?')) { + if (registration.waiting) { + registration.waiting.postMessage({ type: 'SKIP_WAITING_AND_CLAIM' }); + } else { + window.location.reload(); + } + } + }; + + navigator.serviceWorker.register(swUrl, swRegisterOptions).then((registration) => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + if (installingWorker) { + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + showUpdateAvailablePrompt(registration); + } + } + }; + } + }; + }); - navigator.serviceWorker.register(swUrl); navigator.serviceWorker.addEventListener('message', (event) => { - if (event.data?.type === 'token' && event.data?.responseKey) { - // Get the token for SW. + if (!event.data || !event.source) { + return; + } + + if (event.data.type === 'token' && event.data.id) { const token = localStorage.getItem('cinny_access_token') ?? undefined; - event.source!.postMessage({ - responseKey: event.data.responseKey, - token, + event.source.postMessage({ + replyTo: event.data.id, + payload: token, }); + } else if (event.data.type === 'openRoom' && event.data.id) { + /* Example: + event.source.postMessage({ + replyTo: event.data.id, + payload: success?, + }); + */ } }); } diff --git a/src/sw.ts b/src/sw.ts index 2179dfcb..65700465 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -1,19 +1,61 @@ /// +import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching'; export type {}; declare const self: ServiceWorkerGlobalScope; -async function askForAccessToken(client: Client): Promise { - return new Promise((resolve) => { - const responseKey = Math.random().toString(36); - const listener = (event: ExtendableMessageEvent) => { - if (event.data.responseKey !== responseKey) return; - resolve(event.data.token); - self.removeEventListener('message', listener); - }; - self.addEventListener('message', listener); - client.postMessage({ responseKey, type: 'token' }); +const DEFAULT_NOTIFICATION_ICON = '/public/res/apple/apple-touch-icon-180x180.png'; +const DEFAULT_NOTIFICATION_BADGE = '/public/res/apple-touch-icon-72x72.png'; + +const pendingReplies = new Map(); +let messageIdCounter = 0; +function sendAndWaitForReply(client: WindowClient, type: string, payload: object) { + messageIdCounter += 1; + const id = messageIdCounter; + const promise = new Promise((resolve) => { + pendingReplies.set(id, resolve); }); + client.postMessage({ type, id, payload }); + return promise; +} + +async function fetchWithRetry( + url: string, + token: string, + retries = 3, + delay = 250 +): Promise { + let lastError: Error | undefined; + + /* eslint-disable no-await-in-loop */ + for (let attempt = 1; attempt <= retries; attempt += 1) { + try { + const response = await fetch(url, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + + return response; + } catch (error) { + lastError = error instanceof Error ? error : new Error(String(error)); + + if (attempt < retries) { + console.warn( + `Fetch attempt ${attempt} failed: ${lastError.message}. Retrying in ${delay}ms...` + ); + await new Promise((res) => { + setTimeout(res, delay); + }); + } + } + } + /* eslint-enable no-await-in-loop */ + throw new Error(`Fetch failed after ${retries} retries. Last error: ${lastError?.message}`); } function fetchConfig(token?: string): RequestInit | undefined { @@ -27,8 +69,39 @@ function fetchConfig(token?: string): RequestInit | undefined { }; } +self.addEventListener('message', (event: ExtendableMessageEvent) => { + if (event.data.type === 'togglePush') { + const token = event.data?.token; + const fetchOptions = fetchConfig(token); + event.waitUntil( + fetch(`${event.data.url}/_matrix/client/v3/pushers/set`, { + method: 'POST', + ...fetchOptions, + body: JSON.stringify(event.data.pusherData), + }) + ); + return; + } + const { replyTo } = event.data; + if (replyTo) { + const resolve = pendingReplies.get(replyTo); + if (resolve) { + pendingReplies.delete(replyTo); + resolve(event.data.payload); + } + } +}); + self.addEventListener('activate', (event: ExtendableEvent) => { - event.waitUntil(clients.claim()); + event.waitUntil( + (async () => { + await self.clients.claim(); + })() + ); +}); + +self.addEventListener('install', (event: ExtendableEvent) => { + event.waitUntil(self.skipWaiting()); }); self.addEventListener('fetch', (event: FetchEvent) => { @@ -42,11 +115,99 @@ self.addEventListener('fetch', (event: FetchEvent) => { } event.respondWith( (async (): Promise => { + if (!event.clientId) throw new Error('Missing clientId'); const client = await self.clients.get(event.clientId); - let token: string | undefined; - if (client) token = await askForAccessToken(client); - - return fetch(url, fetchConfig(token)); + if (!client) throw new Error('Client not found'); + const token = await sendAndWaitForReply(client, 'token', {}); + if (!token) throw new Error('Failed to retrieve token'); + const response = await fetchWithRetry(url, token); + return response; + })() + ); + event.waitUntil( + (async function () { + console.log('Ensuring fetch processing completes before worker termination.'); })() ); }); + +const onPushNotification = async (event: PushEvent) => { + let title = 'New Notification'; + const options: NotificationOptions = { + body: 'You have a new message!', + icon: DEFAULT_NOTIFICATION_ICON, + badge: DEFAULT_NOTIFICATION_BADGE, + data: { + url: self.registration.scope, + timestamp: Date.now(), + }, + // tag: 'cinny-notification-tag', // Optional: Replaces existing notification with same tag + // renotify: true, // Optional: If using tag, renotify will alert user even if tag matches + // silent: false, // Optional: Set to true for no sound/vibration. User can also set this. + }; + + if (event.data) { + try { + const pushData = event.data.json(); + title = pushData.title || title; + options.body = options.body ?? pushData.data.toString(); + options.icon = pushData.icon || options.icon; + options.badge = pushData.badge || options.badge; + + if (pushData.image) options.image = pushData.image; + if (pushData.vibrate) options.vibrate = pushData.vibrate; + if (pushData.actions) options.actions = pushData.actions; + options.tag = 'Cinny'; + if (typeof pushData.renotify === 'boolean') options.renotify = pushData.renotify; + if (typeof pushData.silent === 'boolean') options.silent = pushData.silent; + + if (pushData.data) { + options.data = { ...options.data, ...pushData.data }; + } + if (typeof pushData.unread === 'number') { + try { + self.navigator.setAppBadge(pushData.unread); + } catch (e) { + // Likely Firefox/Gecko-based and doesn't support badging API + } + } else { + await navigator.clearAppBadge(); + } + } catch (e) { + const pushText = event.data.text(); + options.body = pushText || options.body; + } + } + + return self.registration.showNotification(title, options); +}; + +self.addEventListener('push', (event: PushEvent) => event.waitUntil(onPushNotification(event))); + +self.addEventListener('notificationclick', (event: NotificationEvent) => { + event.notification.close(); + + /** + * We should likely add a postMessage back to navigate to the room the event is from + */ + const targetUrl = event.notification.data?.url || self.registration.scope; + + event.waitUntil( + self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => { + for (const client of clientList) { + if (client.url === targetUrl && 'focus' in client) { + return (client as WindowClient).focus(); + } + } + if (self.clients.openWindow) { + return self.clients.openWindow(targetUrl); + } + return Promise.resolve(); + }) + ); +}); + +if (self.__WB_MANIFEST) { + precacheAndRoute(self.__WB_MANIFEST); +} +cleanupOutdatedCaches();