@angular/service-worker

SwPush

Class

stable

Subscribe and listen to Web Push Notifications through Angular Service Worker.

API

    
      class SwPush {}

constructor

SwPush

@paramswNgswCommChannel

@returnsSwPush

messages

Observable<object>

Emits the payloads of the received push notification messages.

notificationClicks

Observable<{ action: string; notification: NotificationOptions & { title: string; }; }>

Emits the payloads of the received push notification messages as well as the action the user interacted with. If no action was used the action property contains an empty string ''.

Note that the notification property does not contain a Notification object but rather a NotificationOptions object that also includes the title of the Notification object.

notificationCloses

Observable<{ action: string; notification: NotificationOptions & { title: string; }; }>

Emits the payloads of notifications that were closed, along with the action (if any) associated with the close event. If no action was used, the action property contains an empty string ''.

Note that the notification property does not contain a Notification object but rather a NotificationOptions object that also includes the title of the Notification object.

pushSubscriptionChanges

Observable<{ oldSubscription: PushSubscription | null; newSubscription: PushSubscription | null; }>

Emits updates to the push subscription, including both the previous (oldSubscription) and current (newSubscription) values. Either subscription may be null, depending on the context:

oldSubscription is null if no previous subscription existed.
newSubscription is null if the subscription was invalidated and not replaced.

This stream allows clients to react to automatic changes in push subscriptions, such as those triggered by browser expiration or key rotation.

subscription

Observable<PushSubscription | null>

Emits the currently active PushSubscription associated to the Service Worker registration or null if there is no subscription.

isEnabled

boolean

True if the Service Worker is enabled (supported by the browser and enabled via ServiceWorkerModule).

requestSubscription

Promise<PushSubscription>

Subscribes to Web Push Notifications, after requesting and receiving user permission.

@paramoptions{ serverPublicKey: string; }

An object containing the serverPublicKey string.

@returnsPromise<PushSubscription>

unsubscribe

Promise<void>

Unsubscribes from Service Worker push notifications.

@returnsPromise<void>

Usage Notes

You can inject a SwPush instance into any component or service as a dependency.

To subscribe, call SwPush.requestSubscription(), which asks the user for permission. The call returns a Promise with a new PushSubscription instance.

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:

You can read more on handling notification clicks in the Service worker notifications guide.