Web Push Notifications

Introduction

Catalyst push notifications for web applications is a fully managed service which you can use to easily enable and activate push notifications for your web app.

A Catalyst web app’s push notifications are displayed to users when the web app is open in their active browser. However, the browser must support web push and service workers for the notifications to be delivered to the user. You can learn more about these concepts in the Architecture section of the documentation.

You can write your own action to design the logic for push notifications in the code snippet that Catalyst provides and implement it in your application.

Depending on the guidelines of the web browsers, you can enable a provision for the users of your web app to opt in to receive push notifications. This can be done by including a prompt requesting permission to allow push notifications. Once the user grants permission, they will be subscribed to receive push notifications from your web app. A unique user subscription ID is created when they provide permission, which allows the web app to send push notifications to them. You can store this ID in your database to identify the subscribers.

After you enable and configure push notifications in your web app, you can send test push notifications to specific users from the Catalyst console. You will be able to send plain text notifications to the test clients to check for bugs in the implementation. The users that you send them to must have active sessions of your web app open in their browsers to receive the notifications.

Key Concepts

Elements of Web Push Notifications

The elements of a push notification vary depending on whether it is for a web or an iOS application, mainly because of the differences in standards and restrictions imposed by various web browsers and Apple. Let’s elaborate on this for each of the platforms individually.

1. Web

   Most web browsers do not contain heavy restrictions on HTML customizations or actionable elements that are incorporated in web push notifications. However, unlike native mobile app push notifications, web push notifications do not offer support for a wide variety of media types and interactive elements like GIFs or audio. Additionally, mobile app push notifications can access the mobile phone’s camera, accelerometer, and more, which cannot be done by a web app.
   
   Different web browsers implement different standards in terms of feature support for push notifications. You must therefore design their appearance and logic accordingly.
   
   Broadly, a web push notification can contain elements like:

   • Title and Description
   • App Icon
   • Call-to-action button
   • Website URL

Enable Web Push Notifications

For web applications, you can use the code snippet provided in the Catalyst console to define the appearance and action of your push notifications through your own logic and incorporate them into your application’s source. Once configured, you can send test push notifications to the email addresses of select users to verify that they are working.

Catalyst sends a Push API call to the push service to request the delivery of a push message.

The code snippet provided by Catalyst for the web platform handles the registration process of the user devices to receive push notifications from the application. You do not need to register the user devices exclusively. You can enable push notifications and start testing them from the console.

To enable push notifications for a web application in Catalyst:

1. Navigate to Cloud Scale and then Push Notifications, in the Catalyst Cloud Scale cosole.
2. Copy the given code snippet from the Web section using the copy icon. Paste this code in your web application’s source wherever necessary.
   

    

        
copy
        

            

        
    
    

         catalyst.notification.enableNotification().then(resp=>{
catalyst.notification.messageHandler = msg => {
                 //write your own action
             }
       });
    

The code snippet invokes the enableNotification() function and allows you to define your own action under messageHandler. As mentioned previously in the Key Concepts section, you can handle the appearance and functioning of the push notifications in your app’s code using your own logic.

Test Web Push Notifications

Once you incorporate and enable push notifications in your application’s code, you can test that they are working from the console. Catalyst allows you to send a test text notification to one email address at a time from the console. If the test account receives the notification successfully, you can be assured that the setup is working correctly.

To send a test push notification for a web application hosted in Catalyst:

1. Navigate to Cloud Scale and then Push Notifications, in the Catalyst Cloud Scale cosole.
2. Enter the email ID of the user account that you want to send test push notifications to and the message in the Web section.
   
   
   
3. Click Send.

The push notification will be sent to the specified user immediately.

For the user to be able to receive the notification, the following criteria must be met:

1. The user must have the web app open in their browser. If the user is active on a different browser tab, they will still be able to receive the push notification.
2. The browser that the web app is open in must support web push and service workers
3. If you have included a permission prompt in your application’s logic to allow push notifications, then the end users must have provided permission for it.