SwPush
Subscribe and listen to Web Push Notifications through Angular Service Worker.
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
isnull
if no previous subscription existed.newSubscription
isnull
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.
{ serverPublicKey: string; }
An object containing the serverPublicKey
string.
Promise<PushSubscription>
unsubscribe
Promise<void>
Unsubscribes from Service Worker push notifications.
Promise<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.