W3cubDocs

/Angular

Service worker notifications

Push notifications are a compelling way to engage users. Through the power of service workers, notifications can be delivered to a device even when your application is not in focus.

The Angular service worker enables the display of push notifications and the handling of notification click events.

When using the Angular service worker, push notification interactions are handled using the SwPush service. To learn more about the browser APIs involved see Push API and Using the Notifications API.

Prerequisites

We recommend you have a basic understanding of the following:

Getting Started with Service Workers

Notification payload

Invoke push notifications by pushing a message with a valid payload. See SwPush for guidance.

In Chrome, you can test push notifications without a backend. Open Devtools -> Application -> Service Workers and use the Push input to send a JSON notification payload.

Notification click handling

The default behavior for the notificationclick event is to close the notification and notify SwPush.notificationClicks.

You can specify an additional operation to be executed on notificationclick by adding an onActionClick property to the data object, and providing a default entry. This is especially useful for when there are no open clients when a notification is clicked.

{
  "notification": {
    "title": "New Notification!",
    "data": {
      "onActionClick": {
        "default": {"operation": "openWindow", "url": "foo"}
      }
    }
  }
}

Operations

The Angular service worker supports the following operations:

Operations	Details
`openWindow`	Opens a new tab at the specified URL.
`focusLastFocusedOrOpen`	Focuses the last focused client. If there is no client open, then it opens a new tab at the specified URL.
`navigateLastFocusedOrOpen`	Focuses the last focused client and navigates it to the specified URL. If there is no client open, then it opens a new tab at the specified URL.
`sendRequest`	Send a simple GET request to the specified URL.

URLs are resolved relative to the service worker's registration scope. If an onActionClick item does not define a url, then the service worker's registration scope is used.

Actions

Actions offer a way to customize how the user can interact with a notification.

Using the actions property, you can define a set of available actions. Each action is represented as an action button that the user can click to interact with the notification.

In addition, using the onActionClick property on the data object, you can tie each action to an operation to be performed when the corresponding action button is clicked:

{
  "notification": {
    "title": "New Notification!",
    "actions": [
      {"action": "foo", "title": "Open new tab"},
      {"action": "bar", "title": "Focus last"},
      {"action": "baz", "title": "Navigate last"},
      {"action": "qux", "title": "Send request in the background"}
      {"action": "other", "title": "Just notify existing clients"}
    ],
    "data": {
      "onActionClick": {
        "default": {"operation": "openWindow"},
        "foo": {"operation": "openWindow", "url": "/absolute/path"},
        "bar": {"operation": "focusLastFocusedOrOpen", "url": "relative/path"},
        "baz": {"operation": "navigateLastFocusedOrOpen", "url": "https://other.domain.com/"},
        "qux": {"operation": "sendRequest", "url": "https://yet.another.domain.com/"}
      }
    }
  }
}