Push Notification feature overview

The Push Notification feature lets users subscribe to the web push notifications, which are sent from the server to all registered subscriptions.

Key pair

To set up the process, you need to generate a private and public key pair. These two keys are generated once for a website and are known as Voluntary Application Server Identification for Web Push (VAPID) keys. The private key must be hidden from the end user and must only be used on the server side to encrypt created notifications. The utilization of VAPID protection guarantees that only authorized servers are permitted to send notifications to clients.

Subscribing to notifications

To let users subscribe to the web push notifications, the site page needs a service worker with which the user is registered on the server and received messages are processed. The service worker is downloaded to the user’s platform in the background, which lets it be executed outside of the site page’s context.

After a user subscribes to the service, the service worker is registered. The service worker requests all required information through the web push API and sends this through an HTTP request to the server. The server stores this information in its database to send notifications to the client.

Sending notifications

Notifications are sent from the server to all registered subscriptions with an HTTP request. To correctly identify a user, a signature must be transmitted in the request header. The signature is created from the private key and public key used for registration. The actual message and further information are transmitted as user data. If the encryption and formatting are correct and the signature is validated, the push service sends the notification to the user.

Push Notifications diagram

The following sequence diagram shows how sending and receiving push notifications works on a high level.

1. A user opens a page that wants to send push notifications. The website installs a service worker, which is permanently saved by the browser and used later to display push notifications.
2. The website displays an authorization prompt to the user.
3. If the user accepts to receive push notifications, the browser contacts its own push service—for example, Mozilla Push Service or Google Firebase Cloud Messaging (FCM)—to create a new mailbox and a secret URL called an endpoint. Anyone who knows this URL can send push notifications to that browser.
4. The browser gives the endpoint to the web page through a Javascript callback, and the endpoint is sent to the Spryker Cloud Commerce OS (SCCOS) application server for storage.
5. To send a notification, the SCCOS application server contacts the browser push service with an HTTP POST request. The request URL is the endpoint of the recipient. The browser is constantly connected to its own push service and fetches new notifications.
6. The service worker is activated by the push message and is responsible for displaying the web notifications to the user.

Related Developer documents