SwPush
Subscribe and listen to Web Push Notifications through Angular Service Worker.
class SwPush {
messages: Observable<object>
notificationClicks: Observable<{...}
subscription: Observable<PushSubscription | null>
isEnabled: boolean
requestSubscription(options: { serverPublicKey: string; }): Promise<PushSubscription>
unsubscribe(): Promise<void>
}
See also
Provided in
Properties
Property | Description |
---|---|
messages: Observable<object>
|
Read-Only
Emits the payloads of the received push notification messages. |
notificationClicks: Observable<{
action: string;
notification: NotificationOptions & {
title: string;
};
}>
|
Read-Only
Emits the payloads of the received push notification messages as well as the action the user
interacted with. If no action was used the Note that the |
subscription: Observable<PushSubscription | null>
|
Read-Only
Emits the currently active
PushSubscription
associated to the Service Worker registration or |
isEnabled: boolean
|
Read-Only
True if the Service Worker is enabled (supported by the browser and enabled via
|
Methods
requestSubscription() |
---|
Subscribes to Web Push Notifications, after requesting and receiving user permission. |
unsubscribe() |
---|
Unsubscribes from Service Worker push notifications. |
ParametersThere are no parameters. Returns
|
Usage notes
You can inject a SwPush
instance into any component or service
as a dependency.
import {SwPush} from '@angular/service-worker';
/* . . . */
export class AppComponent {
constructor(readonly swPush: SwPush) {}
/* . . . */
}
To subscribe, call SwPush.requestSubscription()
, which asks the user for permission.
The call returns a Promise
with a new
PushSubscription
instance.
private async subscribeToPush() {
try {
const sub = await this.swPush.requestSubscription({
serverPublicKey: PUBLIC_VAPID_KEY_OF_SERVER,
});
// TODO: Send to server.
} catch (err) {
console.error('Could not subscribe due to:', err);
}
}
A request is rejected if the user denies permission, or if the browser
blocks or does not support the Push API or ServiceWorkers.
Check SwPush.isEnabled
to confirm status.
Invoke Push Notifications by pushing a message with the following payload.
{
"notification": {
"actions": NotificationAction[],
"badge": USVString,
"body": DOMString,
"data": any,
"dir": "auto"|"ltr"|"rtl",
"icon": USVString,
"image": USVString,
"lang": DOMString,
"renotify": boolean,
"requireInteraction": boolean,
"silent": boolean,
"tag": DOMString,
"timestamp": DOMTimeStamp,
"title": DOMString,
"vibrate": number[]
}
}
Only title
is required. See Notification
instance
properties.
While the subscription is active, Service Worker listens for PushEvent occurrences and creates Notification instances in response.
Unsubscribe using SwPush.unsubscribe()
.
An application can subscribe to SwPush.notificationClicks
observable to be notified when a user
clicks on a notification. For example:
this.swPush.notificationClicks.subscribe(({action, notification}) => {
// TODO: Do something in response to notification click.
});
You can read more on handling notification clicks in the Service worker notifications guide.