pigui/task-stream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: push notifications on each device (Web Push)

Browse Source 
- What reaches the bell also reaches the devices where the person
  turned «Avisos en este dispositivo» on, with TaskStream closed: the
  Notifier sends each new notification encrypted (aes128gcm) and signed
  with VAPID, and forgets subscriptions the push service dropped
  (404/410). A failure never blocks the event stream.
- The API keeps one subscription per device (push_subscriptions) and
  exposes the VAPID public key in the notification settings; GraphQL
  subscribePush/unsubscribePush, REST /me/push-subscriptions. Without
  VAPID_PUBLIC_KEY and VAPID_PRIVATE_KEY push is off.
- The web registers /push-sw.js, a service worker that only shows the
  notification and opens its ticket on a tap (no caching, served
  without cache by nginx), and a manifest that makes it installable,
  which iPhones need for push.
- The bell's toggles show their text next to them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Josep Piguillem
2026-10-15 08:38:07 +02:00
parent 5ee627e689
commit 233c46e9fa
50 changed files with 1577 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
libs/web/tracker/infrastructure/src/lib/adapters/browser-push.device.ts Normal file
View File

@@ -0,0 +1,81 @@
import { Injectable } from '@angular/core';
import {
PushDevice,
PushDeviceSubscription,
} from '@task-stream/web/tracker/domain';
/** The service worker that shows the notifications (apps/web/public). */
const WORKER = '/push-sw.js';
/** Push through this browser's service worker and PushManager. */
@Injectable()
export class BrowserPushDevice extends PushDevice {
get supported(): boolean {
return (
typeof window !== 'undefined' &&
'serviceWorker' in navigator &&
'PushManager' in window &&
'Notification' in window
);
}
async current(): Promise<PushDeviceSubscription | null> {
if (!this.supported) return null;
const registration = await navigator.serviceWorker.getRegistration(WORKER);
const subscription = await registration?.pushManager.getSubscription();
return subscription ? toDevice(subscription) : null;
}
async subscribe(publicKey: string): Promise<PushDeviceSubscription> {
if (!this.supported) throw new Error('Este navegador no admite avisos');
if ((await Notification.requestPermission()) !== 'granted')
throw new Error(
'El navegador no tiene permiso para mostrar avisos: dáselo en los ajustes del sitio.',
);
const registration = await navigator.serviceWorker.register(WORKER);
await navigator.serviceWorker.ready;
try {
const subscription =
(await registration.pushManager.getSubscription()) ??
(await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: fromBase64Url(publicKey),
}));
return toDevice(subscription);
} catch {
// The browser's own message is in English and says little.
throw new Error(
'Este navegador no ha dejado activar los avisos. En iPhone, añade antes TaskStream a la pantalla de inicio.',
);
}
}
async unsubscribe(): Promise<string | null> {
if (!this.supported) return null;
const registration = await navigator.serviceWorker.getRegistration(WORKER);
const subscription = await registration?.pushManager.getSubscription();
if (!subscription) return null;
await subscription.unsubscribe();
return subscription.endpoint;
}
}
function toDevice(subscription: PushSubscription): PushDeviceSubscription {
const json = subscription.toJSON();
return {
endpoint: subscription.endpoint,
p256dh: json.keys?.['p256dh'] ?? '',
auth: json.keys?.['auth'] ?? '',
};
}
/** VAPID keys travel as base64url; PushManager wants the bytes. */
function fromBase64Url(text: string): Uint8Array<ArrayBuffer> {
const base64 = (text + '='.repeat((4 - (text.length % 4)) % 4))
.replace(/-/g, '+')
.replace(/_/g, '/');
const raw = atob(base64);
const bytes = new Uint8Array(new ArrayBuffer(raw.length));
for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i);
return bytes;
}

15
libs/web/tracker/infrastructure/src/lib/adapters/graphql-notifications.gateway.ts
View File

@@ -3,12 +3,15 @@ import {
Notification,
NotificationSettings,
NotificationsGateway,
PushDeviceSubscription,
} from '@task-stream/web/tracker/domain';
import { map, Observable } from 'rxjs';
import {
MarkNotificationsReadDocument,
MyNotificationsDocument,
NotificationSettingsDocument,
SubscribePushDocument,
UnsubscribePushDocument,
UpdateNotificationSettingsDocument,
} from '../graphql/generated';
import { GraphqlOperations } from './graphql-operations';
@@ -46,4 +49,16 @@ export class GraphqlNotificationsGateway extends NotificationsGateway {
.mutate(UpdateNotificationSettingsDocument, { email })
.pipe(map((d) => ({ ...d.updateNotificationSettings })));
}
subscribePush(subscription: PushDeviceSubscription): Observable<void> {
return this.gql
.mutate(SubscribePushDocument, { subscription })
.pipe(map(() => undefined));
}
unsubscribePush(endpoint: string): Observable<void> {
return this.gql
.mutate(UnsubscribePushDocument, { endpoint })
.pipe(map(() => undefined));
}
}

135
libs/web/tracker/infrastructure/src/lib/graphql/generated.ts
View File

@@ -236,6 +236,13 @@ export type ProjectSettingsInput = {
transitions: Array<StatusTransitionsInput>;
};
/** A browser's Web Push subscription (PushSubscription.toJSON()) */
export type PushSubscriptionInput = {
auth: string;
endpoint: string;
p256dh: string;
};
export type RankIssueInput = {
/** The ticket that ends up right above (null: the top) */
aboveIssueId?: string | null | undefined;
@@ -1366,7 +1373,11 @@ export type NotificationSettingsQueryVariables = Exact<{
}>;
export type NotificationSettingsQuery = {
notificationSettings: { email: boolean; emailAvailable: boolean };
notificationSettings: {
email: boolean;
emailAvailable: boolean;
pushPublicKey: string | null;
};
};
export type MarkNotificationsReadMutationVariables = Exact<{
@@ -1380,9 +1391,25 @@ export type UpdateNotificationSettingsMutationVariables = Exact<{
}>;
export type UpdateNotificationSettingsMutation = {
updateNotificationSettings: { email: boolean; emailAvailable: boolean };
updateNotificationSettings: {
email: boolean;
emailAvailable: boolean;
pushPublicKey: string | null;
};
};
export type SubscribePushMutationVariables = Exact<{
subscription: PushSubscriptionInput;
}>;
export type SubscribePushMutation = { subscribePush: boolean };
export type UnsubscribePushMutationVariables = Exact<{
endpoint: string;
}>;
export type UnsubscribePushMutation = { unsubscribePush: boolean };
export type NotificationAddedSubscriptionVariables = Exact<{
[key: string]: never;
}>;
@@ -8442,6 +8469,10 @@ export const NotificationSettingsDocument = {
kind: 'Field',
name: { kind: 'Name', value: 'emailAvailable' },
},
{
kind: 'Field',
name: { kind: 'Name', value: 'pushPublicKey' },
},
],
},
},
@@ -8545,6 +8576,10 @@ export const UpdateNotificationSettingsDocument = {
kind: 'Field',
name: { kind: 'Name', value: 'emailAvailable' },
},
{
kind: 'Field',
name: { kind: 'Name', value: 'pushPublicKey' },
},
],
},
},
@@ -8556,6 +8591,102 @@ export const UpdateNotificationSettingsDocument = {
UpdateNotificationSettingsMutation,
UpdateNotificationSettingsMutationVariables
>;
export const SubscribePushDocument = {
kind: 'Document',
definitions: [
{
kind: 'OperationDefinition',
operation: 'mutation',
name: { kind: 'Name', value: 'SubscribePush' },
variableDefinitions: [
{
kind: 'VariableDefinition',
variable: {
kind: 'Variable',
name: { kind: 'Name', value: 'subscription' },
},
type: {
kind: 'NonNullType',
type: {
kind: 'NamedType',
name: { kind: 'Name', value: 'PushSubscriptionInput' },
},
},
},
],
selectionSet: {
kind: 'SelectionSet',
selections: [
{
kind: 'Field',
name: { kind: 'Name', value: 'subscribePush' },
arguments: [
{
kind: 'Argument',
name: { kind: 'Name', value: 'subscription' },
value: {
kind: 'Variable',
name: { kind: 'Name', value: 'subscription' },
},
},
],
},
],
},
},
],
} as unknown as DocumentNode<
SubscribePushMutation,
SubscribePushMutationVariables
>;
export const UnsubscribePushDocument = {
kind: 'Document',
definitions: [
{
kind: 'OperationDefinition',
operation: 'mutation',
name: { kind: 'Name', value: 'UnsubscribePush' },
variableDefinitions: [
{
kind: 'VariableDefinition',
variable: {
kind: 'Variable',
name: { kind: 'Name', value: 'endpoint' },
},
type: {
kind: 'NonNullType',
type: {
kind: 'NamedType',
name: { kind: 'Name', value: 'String' },
},
},
},
],
selectionSet: {
kind: 'SelectionSet',
selections: [
{
kind: 'Field',
name: { kind: 'Name', value: 'unsubscribePush' },
arguments: [
{
kind: 'Argument',
name: { kind: 'Name', value: 'endpoint' },
value: {
kind: 'Variable',
name: { kind: 'Name', value: 'endpoint' },
},
},
],
},
],
},
},
],
} as unknown as DocumentNode<
UnsubscribePushMutation,
UnsubscribePushMutationVariables
>;
export const NotificationAddedDocument = {
kind: 'Document',
definitions: [

10
libs/web/tracker/infrastructure/src/lib/graphql/notifications.graphql
View File

@@ -26,6 +26,7 @@ query NotificationSettings {
notificationSettings {
email
emailAvailable
pushPublicKey
}
}
@@ -37,9 +38,18 @@ mutation UpdateNotificationSettings($email: Boolean!) {
updateNotificationSettings(email: $email) {
email
emailAvailable
pushPublicKey
}
}
mutation SubscribePush($subscription: PushSubscriptionInput!) {
subscribePush(subscription: $subscription)
}
mutation UnsubscribePush($endpoint: String!) {
unsubscribePush(endpoint: $endpoint)
}
subscription NotificationAdded {
notificationAdded {
...NotificationFields

3
libs/web/tracker/infrastructure/src/lib/tracker-infrastructure.providers.ts
View File

@@ -10,6 +10,7 @@ import {
IssuesGateway,
NotificationsGateway,
CalendarGateway,
PushDevice,
ProjectsGateway,
ReleasesGateway,
SavedFiltersGateway,
@@ -30,6 +31,7 @@ import {
import { GraphqlIssuesGateway } from './adapters/graphql-issues.gateway';
import { GraphqlNotificationsGateway } from './adapters/graphql-notifications.gateway';
import { GraphqlCalendarGateway } from './adapters/graphql-calendar.gateway';
import { BrowserPushDevice } from './adapters/browser-push.device';
import { HttpAttachmentsGateway } from './adapters/http-attachments.gateway';
import { HttpProposalsGateway } from './adapters/http-proposals.gateway';
import { GraphqlProjectsGateway } from './adapters/graphql-projects.gateway';
@@ -54,6 +56,7 @@ export function provideTrackerInfrastructure(): EnvironmentProviders {
{ provide: UsersGateway, useClass: GraphqlUsersGateway },
{ provide: NotificationsGateway, useClass: GraphqlNotificationsGateway },
{ provide: CalendarGateway, useClass: GraphqlCalendarGateway },
{ provide: PushDevice, useClass: BrowserPushDevice },
{ provide: TrackerRealtimeGateway, useClass: GraphqlRealtimeGateway },
{ provide: SavedFiltersGateway, useClass: GraphqlSavedFiltersGateway },
{ provide: SprintsGateway, useClass: GraphqlSprintsGateway },