Skip to content

Commit a065191

Browse files
nsbarsukovnsbarsukov
committed
feat(notification): add service worker support for @ng-web-apis/notification 
1 parent 30da022 commit a065191

File tree

14 files changed

+247
-19
lines changed

14 files changed

+247
-19
lines changed

‎apps/demo/src/app/pages/notification/examples/03-close-notification/index.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
<button tuiButton [disabled]="(denied$ | async)!" (click)="sendNotification()">
1+
<button
2+
tuiButton
3+
[disabled]="(denied$ | async)!"
4+
[showLoader]="(showLoader$ | async)!"
5+
(click)="sendNotification()"
6+
>
27
Send notification
38
</button>

‎apps/demo/src/app/pages/notification/examples/03-close-notification/index.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {ChangeDetectionStrategy, Component} from '@angular/core';
22
import {NotificationService} from '@ng-web-apis/notification';
33
import {isDenied, isGranted, PermissionsService} from '@ng-web-apis/permissions';
4-
import {timer} from 'rxjs';
5-
import {filter, map, switchMap, takeUntil} from 'rxjs/operators';
4+
import {BehaviorSubject, timer} from 'rxjs';
5+
import {filter, map, switchMap, takeUntil, tap} from 'rxjs/operators';
66

77
@Component({
88
selector: 'notification-page-example-3',
@@ -11,6 +11,7 @@ import {filter, map, switchMap, takeUntil} from 'rxjs/operators';
1111
})
1212
export class NotificationPageExample3 {
1313
readonly denied$ = this.permissions.state('notifications').pipe(map(isDenied));
14+
readonly showLoader$ = new BehaviorSubject(false);
1415

1516
constructor(
1617
private readonly notifications: NotificationService,
@@ -22,6 +23,7 @@ export class NotificationPageExample3 {
2223
.requestPermission()
2324
.pipe(
2425
filter(isGranted),
26+
tap(() => this.showLoader$.next(true)),
2527
switchMap(() =>
2628
this.notifications.open('Close me, please!', {
2729
requireInteraction: true,
@@ -30,7 +32,10 @@ export class NotificationPageExample3 {
3032
takeUntil(timer(5_000)), // close stream after 5 seconds
3133
)
3234
.subscribe({
33-
complete: () => console.info('Notification closed!'),
35+
complete: () => {
36+
this.showLoader$.next(false);
37+
console.info('Notification closed!');
38+
},
3439
});
3540
}
3641
}

‎apps/demo/src/app/pages/notification/examples/04-listen-notification-events/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {ChangeDetectionStrategy, Component} from '@angular/core';
22
import {NotificationService} from '@ng-web-apis/notification';
33
import {isDenied, isGranted, PermissionsService} from '@ng-web-apis/permissions';
4-
import {fromEvent} from 'rxjs';
54
import {filter, map, switchMap} from 'rxjs/operators';
65

76
@Component({
@@ -29,7 +28,9 @@ export class NotificationPageExample4 {
2928
data: `Randomly generated number: ${Math.random().toFixed(2)}`,
3029
}),
3130
),
32-
switchMap(notification => fromEvent(notification, 'click')),
31+
switchMap(notification =>
32+
this.notifications.fromEvent(notification, 'click'),
33+
),
3334
)
3435
.subscribe(console.info);
3536
}

‎apps/demo/src/app/pages/notification/notification-page.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
22
import {NgModule} from '@angular/core';
33
import {RouterModule} from '@angular/router';
44
import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
5-
import {TuiButtonModule, TuiNotificationModule} from '@taiga-ui/core';
5+
import {TuiButtonModule, TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
66
import {TuiBadgeModule} from '@taiga-ui/kit';
77
import {NotificationPageExample1} from './examples/01-getting-permission';
88
import {NotificationPageExample2} from './examples/02-create-notification';
@@ -16,6 +16,7 @@ import {NotificationPageComponent} from './notification-page.component';
1616
TuiAddonDocModule,
1717
TuiBadgeModule,
1818
TuiButtonModule,
19+
TuiLinkModule,
1920
TuiNotificationModule,
2021
RouterModule.forChild([{path: '', component: NotificationPageComponent}]),
2122
],

‎apps/demo/src/app/pages/notification/notification-page.template.html‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,9 +150,9 @@ <h2 class="header">
150150
instance after its successful creation.
151151

152152
<p>
153-
Use rxjs function
153+
Use
154154
<code>fromEvent</code>
155-
to listen events that can be triggered on the
155+
method to listen events that can be triggered on the
156156
<code>Notification</code>
157157
instance.
158158
<br />
@@ -166,6 +166,26 @@ <h2 class="header">
166166
</a>
167167
.
168168
</p>
169+
170+
<tui-notification status="warning">
171+
Notifications spawned by Service Worker support only
172+
<a
173+
tuiLink
174+
href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event"
175+
target="_blank"
176+
>
177+
<code>click</code>
178+
</a>
179+
and
180+
<a
181+
tuiLink
182+
href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclose_event"
183+
target="_blank"
184+
>
185+
<code>close</code>
186+
</a>
187+
events!
188+
</tui-notification>
169189
</ng-template>
170190

171191
<tui-notification

‎libs/common/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export * from './tokens/network-information';
1111
export * from './tokens/page-visibility';
1212
export * from './tokens/performance';
1313
export * from './tokens/screen';
14+
export * from './tokens/service-worker';
1415
export * from './tokens/session-storage';
1516
export * from './tokens/speech-recognition';
1617
export * from './tokens/speech-synthesis';

‎libs/common/src/tokens/service-worker.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {inject, InjectionToken} from '@angular/core';
2+
import {NAVIGATOR} from './navigator';
3+
4+
export const SERVICE_WORKER = new InjectionToken(
5+
`An abstraction over window.navigator.serviceWorker object`,
6+
{
7+
factory: () => inject(NAVIGATOR).serviceWorker,
8+
},
9+
);

‎libs/notification/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@
33
*/
44

55
export * from './tokens/support';
6+
export * from './tokens/notification-factory';
67
export * from './services/notification.service';

‎libs/notification/src/services/notification.service.ts‎

Lines changed: 77 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,23 @@
11
import {Inject, Injectable} from '@angular/core';
2-
import {defer, fromEvent, Observable, throwError} from 'rxjs';
2+
import {SERVICE_WORKER} from '@ng-web-apis/common';
3+
import {
4+
filter,
5+
from,
6+
fromEvent,
7+
map,
8+
NEVER,
9+
Observable,
10+
shareReplay,
11+
switchMap,
12+
throwError,
13+
} from 'rxjs';
314
import {takeUntil} from 'rxjs/operators';
415

16+
import {NOTIFICATION_SW_CLICKS} from '../tokens/notification-clicks';
17+
import {NOTIFICATION_SW_CLOSES} from '../tokens/notification-closes';
18+
import {NOTIFICATION_FACTORY} from '../tokens/notification-factory';
519
import {NOTIFICATION_SUPPORT} from '../tokens/support';
20+
import {InjectionTokenType} from '../types/injection-token-type';
621

722
const NOT_SUPPORTED_ERROR$ = throwError(
823
() => new Error('Notification API is not supported in your browser'),
@@ -12,7 +27,26 @@ const NOT_SUPPORTED_ERROR$ = throwError(
1227
providedIn: 'root',
1328
})
1429
export class NotificationService {
15-
constructor(@Inject(NOTIFICATION_SUPPORT) private readonly support: boolean) {}
30+
private readonly swRegistration$ = from(this.sw.getRegistration()).pipe(
31+
shareReplay(1),
32+
);
33+
34+
constructor(
35+
@Inject(NOTIFICATION_SUPPORT) private readonly support: boolean,
36+
@Inject(NOTIFICATION_FACTORY)
37+
private readonly createNotification: InjectionTokenType<
38+
typeof NOTIFICATION_FACTORY
39+
>,
40+
@Inject(NOTIFICATION_SW_CLICKS)
41+
private readonly notificationSwClicks$: InjectionTokenType<
42+
typeof NOTIFICATION_SW_CLICKS
43+
>,
44+
@Inject(NOTIFICATION_SW_CLOSES)
45+
private readonly notificationSwCloses$: InjectionTokenType<
46+
typeof NOTIFICATION_SW_CLOSES
47+
>,
48+
@Inject(SERVICE_WORKER) private readonly sw: ServiceWorkerContainer,
49+
) {}
1650

1751
requestPermission(): Observable<NotificationPermission> {
1852
if (!this.support) {
@@ -36,15 +70,48 @@ export class NotificationService {
3670
return NOT_SUPPORTED_ERROR$;
3771
}
3872

39-
return defer(() => {
40-
const notification = new Notification(title, options);
41-
const close$ = fromEvent(notification, 'close');
73+
return from(this.createNotification(title, options)).pipe(
74+
switchMap(notification => {
75+
const close$ = this.fromEvent(notification, 'close');
4276

43-
return new Observable<Notification>(subscriber => {
44-
subscriber.next(notification);
77+
return new Observable<Notification>(subscriber => {
78+
subscriber.next(notification);
4579

46-
return () => notification.close();
47-
}).pipe(takeUntil(close$));
48-
});
80+
return () => notification.close();
81+
}).pipe(takeUntil(close$));
82+
}),
83+
);
84+
}
85+
86+
fromEvent<E extends keyof NotificationEventMap>(
87+
targetNotification: Notification,
88+
eventName: E,
89+
): Observable<{action: string} | void> {
90+
const mapToVoid = map(() => undefined);
91+
92+
return this.swRegistration$.pipe(
93+
switchMap(swRegistration => {
94+
if (!swRegistration) {
95+
return fromEvent(targetNotification, eventName).pipe(mapToVoid);
96+
}
97+
98+
const isTargetNotification = (notification: {timestamp?: number}) =>
99+
notification.timestamp === targetNotification.timestamp;
100+
101+
switch (eventName) {
102+
case 'click':
103+
return this.notificationSwClicks$.pipe(
104+
filter(x => isTargetNotification(x.notification)),
105+
);
106+
case 'close':
107+
return this.notificationSwCloses$.pipe(
108+
filter(isTargetNotification),
109+
mapToVoid,
110+
);
111+
default:
112+
return NEVER;
113+
}
114+
}),
115+
);
49116
}
50117
}

‎libs/notification/src/tokens/notification-clicks.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {inject, InjectFlags, InjectionToken} from '@angular/core';
2+
import {SwPush} from '@angular/service-worker';
3+
import {NEVER} from 'rxjs';
4+
5+
export const NOTIFICATION_SW_CLICKS = new InjectionToken(
6+
`Global listener for events when ANY system notification spawned by Notification API (and only inside Service Worker!) has been clicked`,
7+
{
8+
factory: () => {
9+
const swPush = inject(SwPush, InjectFlags.Optional);
10+
11+
return swPush && swPush.isEnabled ? swPush.notificationClicks : NEVER;
12+
},
13+
},
14+
);

0 commit comments

Comments
 (0)