{ "id": "api/service-worker/SwPush", "title": "SwPush", "contents": "\n\n
\n
\n
\n \n API > @angular/service-worker\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

SwPushlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Subscribe and listen to\nWeb Push\nNotifications through\nAngular Service Worker.

\n\n \n
\n \n \n \n
\n\nclass SwPush {\n messages: Observable<object>\n notificationClicks: Observable<{...}\n subscription: Observable<PushSubscription | null>\n isEnabled: boolean\n requestSubscription(options: { serverPublicKey: string; }): Promise<PushSubscription>\n unsubscribe(): Promise<void>\n}\n\n\n \n \n\n
\n\n\n \n
\n

See alsolink

\n \n
\n\n\n \n \n \n\n\n\n\n\n\n\n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n messages: Observable<object>\n Read-Only\n \n

Emits the payloads of the received push notification messages.

\n\n \n
\n \n notificationClicks: Observable<{\n action: string;\n notification: NotificationOptions & {\n title: string;\n };\n}>\n Read-Only\n \n

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

\n\n

Note that the notification property does not contain a\nNotification object but rather a\nNotificationOptions\nobject that also includes the title of the Notification object.

\n\n
\n \n subscription: Observable<PushSubscription | null>\n Read-Only\n \n

Emits the currently active\nPushSubscription\nassociated to the Service Worker registration or null if there is no subscription.

\n\n \n
\n \n isEnabled: boolean\n Read-Only\n \n

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

\n\n \n
\n
\n\n\n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n requestSubscription()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n
\n
\n \n\n requestSubscription(options: { serverPublicKey: string; }): Promise<PushSubscription>\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n options\n object\n

An object containing the serverPublicKey string.

\n\n
\n\n \n
Returns
\n

Promise<PushSubscription>: A Promise that resolves to the new subscription object.

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n unsubscribe()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Unsubscribes from Service Worker push notifications.

\n\n
\n
\n \n\n unsubscribe(): Promise<void>\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

Promise<void>: A Promise that is resolved when the operation succeeds, or is rejected if there is no\n active subscription or the unsubscribe operation fails.

\n \n \n\n\n \n\n \n
\n
\n\n \n
\n\n\n\n \n
\n

Usage noteslink

\n

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

\n\nimport {SwPush} from '@angular/service-worker';\n/* . . . */\nexport class AppComponent {\n constructor(readonly swPush: SwPush) {}\n/* . . . */\n}\n\n\n

To subscribe, call SwPush.requestSubscription(), which asks the user for permission.\nThe call returns a Promise with a new\nPushSubscription\ninstance.

\n\nprivate async subscribeToPush() {\n try {\n const sub = await this.swPush.requestSubscription({\n serverPublicKey: PUBLIC_VAPID_KEY_OF_SERVER,\n });\n // TODO: Send to server.\n } catch (err) {\n console.error('Could not subscribe due to:', err);\n }\n}\n\n\n

A request is rejected if the user denies permission, or if the browser\nblocks or does not support the Push API or ServiceWorkers.\nCheck SwPush.isEnabled to confirm status.

\n

Invoke Push Notifications by pushing a message with the following payload.

\n\n{\n \"notification\": {\n \"actions\": NotificationAction[],\n \"badge\": USVString\n \"body\": DOMString,\n \"data\": any,\n \"dir\": \"auto\"|\"ltr\"|\"rtl\",\n \"icon\": USVString,\n \"image\": USVString,\n \"lang\": DOMString,\n \"renotify\": boolean,\n \"requireInteraction\": boolean,\n \"silent\": boolean,\n \"tag\": DOMString,\n \"timestamp\": DOMTimeStamp,\n \"title\": DOMString,\n \"vibrate\": number[]\n }\n}\n\n

Only title is required. See Notification\ninstance\nproperties.

\n

While the subscription is active, Service Worker listens for\nPushEvent\noccurrences and creates\nNotification\ninstances in response.

\n

Unsubscribe using SwPush.unsubscribe().

\n

An application can subscribe to SwPush.notificationClicks observable to be notified when a user\nclicks on a notification. For example:

\n\nthis.swPush.notificationClicks.subscribe(\n ({action, notification}) => {\n // TODO: Do something in response to notification click.\n });\n\n\n\n
\n\n\n\n
\n
\n\n\n" }