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

48
libs/web/tracker/presenters/src/lib/ui/notifications-bell.ts
View File

@@ -14,7 +14,7 @@ import {
PiSlideToggleComponent,
} from '@pi/ui';
import { DrawerService } from '@task-stream/web/shared/ui';
import { InboxFacade } from '@task-stream/web/tracker/application';
import { InboxFacade, PushFacade } from '@task-stream/web/tracker/application';
import {
Notification,
NotificationKind,
@@ -81,13 +81,30 @@ const ICON: Record<NotificationKind, string> = {
(execute)="inbox.markRead()"
/>
@if (inbox.settings()?.emailAvailable) {
<pi-slide-toggle
label="Copia por correo"
[checked]="inbox.settings()?.email ?? false"
(checkedChange)="inbox.setEmail($event)"
/>
<div class="ts-inbox__switch">
<pi-slide-toggle
label="Copia por correo"
[checked]="inbox.settings()?.email ?? false"
(checkedChange)="inbox.setEmail($event)"
/>
<span aria-hidden="true">Copia por correo</span>
</div>
}
@if (inbox.settings()?.pushPublicKey && push.supported) {
<div class="ts-inbox__switch">
<pi-slide-toggle
label="Avisos en este dispositivo"
[checked]="push.on()"
[disabled]="push.busy()"
(checkedChange)="togglePush($event)"
/>
<span aria-hidden="true">Avisos en este dispositivo</span>
</div>
}
</div>
@if (push.error(); as error) {
<p class="ts-inbox__error" role="alert">{{ error }}</p>
}
@if (inbox.items().length) {
<ul class="ts-inbox__list">
@for (item of inbox.items(); track item.id) {
@@ -139,6 +156,17 @@ const ICON: Record<NotificationKind, string> = {
justify-content: space-between;
gap: 0.75rem;
}
.ts-inbox__switch {
display: inline-flex;
gap: 0.5rem;
align-items: center;
font-size: 0.875rem;
}
.ts-inbox__error {
margin: 0;
color: var(--ts-c-red, var(--ts-ink));
font-size: 0.8125rem;
}
.ts-inbox__list {
list-style: none;
margin: 0;
@@ -201,6 +229,7 @@ const ICON: Record<NotificationKind, string> = {
})
export class NotificationsBell {
protected readonly inbox = inject(InboxFacade);
protected readonly push = inject(PushFacade);
private readonly drawer = inject(DrawerService);
private readonly router = inject(Router);
private readonly panel = viewChild.required<TemplateRef<unknown>>('panel');
@@ -209,9 +238,16 @@ export class NotificationsBell {
protected icon = (item: Notification) => ICON[item.kind] ?? 'info';
protected open(): void {
void this.push.refresh();
this.drawer.open('Notificaciones', this.panel(), '28rem');
}
protected togglePush(on: boolean): void {
const key = this.inbox.settings()?.pushPublicKey;
if (on && key) void this.push.turnOn(key);
else if (!on) void this.push.turnOff();
}
protected go(item: Notification): void {
if (!item.readAt) this.inbox.markRead([item.id]);
this.drawer.closeAll();