In-browser push notifications

In-browser push notifications are messages popping up in your browser.

Push notifications may inform you about new content, special offers, and other key updates. Browser notifications work across different platforms: desktops, smartphones, and tablets with any OS. Users do not need to install additional software to receive notifications, a standard browser is enough.

Push notifications are also supported in progressive web apps (PWA). A PWA is a web application that runs in a browser but also has mobile app features. For example, PWAs can work offline but do not require users to download updates; updates are deployed on the server side.

To send a notification to the browser over a secure channel, the user must subscribe to notifications through the notification server used by their browser. Then you need to create an endpoint for this user in the CNS notification channel.

To set up push notifications:

1. In CNS, create the Push notifications in browser channel.

2. From the user browser, call the JavaScript subscribe method using a Service Worker.

   When the method is called, the browser sends a request to its notification delivery server. For example, Google Chrome sends a request to Firebase Cloud Messaging (FCM), and Safari, to Apple Push Notification service (APNs). The response will return a PushSubscription object.

3. Convert the object you got to JSON by calling the toJSON method.

4. Use this JSON when creating the endpoint. Through this endpoint, you will send notifications to the user.

5. To send a notification, create a message in CNS and specify the endpoint ID (ARN) as the recipient.

To send notifications to different users, create a database of endpoints for all users.

This is how push notifications are delivered:

1. Your web app initiates a notification through an in-browser push notification channel.
2. CNS receives the send command.
3. CNS sends notifications to the servers specified in the endpoints.
4. Notification servers (FCM, APNs) deliver notifications to user browsers.

Aspects of using in-browser push notificationsAspects of using in-browser push notifications

Using in-browser push notifications is similar to using mobile ones, yet there are some differences.

Creating a push notification channelCreating a push notification channel

You can create a notification channel using the create HTTP API method for the PlatformApplications resource in Yandex Cloud Notification Service or the method’s replacement for the CLI or SDK.

Provide WEB for the Platform parameter. The PlatformPrincipal and PlatformCredential attribute values are not used.

Example of creating an in-browser push notification channel for the HTTP API:

export IAM_TOKEN=<IAM_token>
curl \
  --header "Content-Type: application/x-www-form-urlencoded; charset=utf-8" \
  --header "Authorization: Bearer ${IAM_TOKEN}" \
  --data-urlencode "Action=CreatePlatformApplication" \
  --data-urlencode "ResponseFormat=JSON" \
  --data-urlencode "FolderId=b1g85uk96h3f********" \
  --data-urlencode "Name=test" \
  --data-urlencode "Platform=WEB" \
  "https://notifications.yandexcloud.net/"

Where:

• IAM_TOKEN: IAM token.
• Action: Operation type.
• ResponseFormat: Response format, JSON or XML.
• FolderId: Folder ID.
• Name: Notification channel name, user-defined.

You can also create a notification channel via the management console.

Getting a VAPID keyGetting a VAPID key

Calling the subscribe Javascript method from the user’s browser is one of the steps of creating an endpoint. To call the subscribe method, you need a public VAPID key. You can get the VAPID key in the VAPIDPublicKey attribute of the getAttributes HTTP API method for the PlatformApplications resource in Yandex Cloud Notification Service or the method’s replacement for the CLI or SDK.

Example of getting the parameters of an in-browser push notification channel for the HTTP API:

export IAM_TOKEN=<IAM_token>
curl \
  --header "Content-Type: application/x-www-form-urlencoded; charset=utf-8" \
  --header "Authorization: Bearer ${IAM_TOKEN}" \
  --data-urlencode "PlatformApplicationArn=arn:aws:sns::b1g7gh04hiav********:app/WEB/test" \
  --data-urlencode "Action=GetPlatformApplicationAttributes" \
  --data-urlencode "ResponseFormat=JSON" \
  "https://notifications.yandexcloud.net/"

Where:

• IAM_TOKEN: IAM token.
• PlatformApplicationArn: Notification channel ID (ARN).
• Action: Operation type.
• ResponseFormat: Response format, JSON or XML.

{
  "GetPlatformApplicationAttributesResponse": {
    "ResponseMetadata": {
      "RequestId":"1lOn********"
    },
    "GetPlatformApplicationAttributesResult": {
      "Attributes": {
        "CreatedAt": 1744743751,
        "Description": "",
        "LoggingPath": "",
        "Name": "test",
        "Platform": "WEB",
        "VAPIDPublicKey": "BCyZSlvKpYoRx_SaFpHtqyryq9lmutEyJ-hpeh_1jEcwTPvcJRtpv0VGw_zfOSZVjIzLCj5ggWgIyfW********"
      }
    }
  }
}

You can also get the VAPID key using the management console. To do this:

1. In the management console, select the folder containing the notification channel.
2. In the list of services, select Cloud Notification Service.
3. Select the channel of interest.
4. You will see the VAPID key value in the Public VAPID key field under Overview.

Creating an endpointCreating an endpoint

You can create an endpoint using the create HTTP API method for the Endpoint resource in Yandex Cloud Notification Service or the method’s replacement for the CLI or SDK.

To create an endpoint, you need a PushSubscription object in JSON format obtained through the user's browser. You need to provide the PushSubscription object in the Token parameter.

{
 "endpoint": "https://fcm.googleapis.com/fcm/send/abcdef123456",
 "expirationTime": 1704093740000,
 "keys": {
   "p256dh": "BOrLkr7sEt8tERyAv6c8ZG5UC********",
   "auth": "aBcDeFg12345"
 }
}

Example of creating an endpoint for the HTTP API:

export IAM_TOKEN=<IAM_token>
curl \
  --header "Content-Type: application/x-www-form-urlencoded; charset=utf-8" \
  --header "Authorization: Bearer ${IAM_TOKEN}" \
  --data-urlencode "PlatformApplicationArn=arn:aws:sns::b1g7gh04hiav********:app/WEB/test" \
  --data-urlencode "Action=CreatePlatformEndpoint" \
  --data-urlencode "Token=<pushSubscription_JSON>" \
  --data-urlencode "CustomUserData=<user_data>" \
  --data-urlencode "ResponseFormat=JSON" \
  "https://notifications.yandexcloud.net/"

Where:

• IAM_TOKEN: IAM token.
• PlatformApplicationArn: Notification channel ID (ARN).
• Action: Operation type.
• Token: PushSubscription object, in JSON format obtained through the user's browser.
• CustomUserData: Other user data that can be stored together with the endpoint.
• ResponseFormat: Response format, JSON or XML.

You can create an endpoint via the management console. When creating an endpoint, you will also need to provide a PushSubscription object in JSON format obtained through the user's browser.

Sending notificationsSending notifications

You can send a notification using the publish HTTP API method for the Endpoint resource in Yandex Cloud Notification Service or the method’s replacement for the CLI or SDK.

You can send notifications using one of these methods:

• By sending the notification text in the Message parameter without providing text for a specific platform.

  Example of sending a notification in plain text for the HTTP API:

  export IAM_TOKEN=<IAM_token>
  curl \
    --header "Content-Type: application/x-www-form-urlencoded; charset=utf-8" \
    --header "Authorization: Bearer ${IAM_TOKEN}" \
    --data-urlencode "TargetArn=<endpoint_ID>" \
    --data-urlencode "Action=Publish" \
    --data-urlencode "Message=<notification_text>" \
    --data-urlencode "ResponseFormat=json" \
    "https://notifications.yandexcloud.net/"
  

  Where:

  • IAM_TOKEN: IAM token.
  • TargetArn: Endpoint ID (ARN).
  • Action: Operation type.
  • Message: Message you want to send to the endpoint.
  • ResponseFormat: Response format, JSON or XML.

• By providing the default text and text for a specific platform. In which case the notification is likewise provided via the Message parameter but in JSON format. You need to additionally specify the MessageStructure=json parameter. The WEB line will be the key for the platform when sending a notification to the browser.

  Example of sending a notification in JSON format for the HTTP API:

  export IAM_TOKEN=<IAM_token>
  curl \
    --header "Content-Type: application/x-www-form-urlencoded; charset=utf-8" \
    --header "Authorization: Bearer ${IAM_TOKEN}" \
    --data-urlencode "TargetArn=<endpoint_ID>" \
    --data-urlencode "Action=Publish" \
    --data-urlencode "Message={ "default": "<default_text>", "WEB": "<text_for_browser>" }" \
    --data-urlencode "MessageStructure=json" \
    --data-urlencode "ResponseFormat=json" \
    "https://notifications.yandexcloud.net/"
  

  Where:

  • IAM_TOKEN: IAM token.
  • TargetArn: Mobile endpoint ID (ARN).
  • Action: Operation type.
  • Message: Notification in json format.
  • MessageStructure: Notification format (json).
  • ResponseFormat: Response format, JSON or XML.

You can also send a notification without providing text for a specific platform via the management console.

See alsoSee also

• Service overview
• Getting started with push notifications
• Getting started with the service via the AWS CLI
• SMS