Push Messaging

Push Notifications are messages that pop up on mobile devices. App publishers can send them at any time; even if the recipients aren’t currently engaging with the app or using their devices.

🚧
Before continuing, please ensure that you have added the WebEngage SDK to your app.

Android

Follow the Android Push Messaging Guide to configure Push Messaging for your React Native Android app.

Here's how you can enable Push Notifications for your Android app built on React Native:

Step 1: Register your app in Firebase Console

Step 2: Add this google-services.json file in the android/build.gradle file in the android/app/ directory.

buildscript {
    ...
    repositories {
        google()
        jcenter()
    }
    dependencies {
        ...
        classpath 'com.google.gms:google-services:4.3.8'
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        ...
    }
}

Please ensure that the google() repository is placed above the jcenter() repository, in your code snippet.

Step 3: Add this firebase messaging dependency in app-level build gradle android/app/build.gradle file.

...
dependencies {
    ...
    implementation 'com.google.firebase:firebase-messaging:22.0.0'
}
...

apply plugin: 'com.google.gms.google-services'

Step 4: Add this MyFirebaseMessagingService.java file in android/app/src/main/java/[your-package-name]/.

package your.package;

import com.google.firebase.messaging.FirebaseMessagingService;
import com.google.firebase.messaging.RemoteMessage;
import com.webengage.sdk.android.WebEngage;
import java.util.Map;

public class MyFirebaseMessagingService extends FirebaseMessagingService {
    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        Map<String, String> data = remoteMessage.getData();
        if (data != null) {
            if (data.containsKey("source") && "webengage".equals(data.get("source"))) {
                WebEngage.get().receive(data);
            }
        }
    }

    @Override
    public void onNewToken(String s) {
        super.onNewToken(s);
        WebEngage.get().setRegistrationID(s);
    }
}

The file must be parallel to the MainActivity.java and MainApplication.java files.
Please replace your.package with your package name in the first line of MyFirebaseMessagingService.java file. This line should be the same as in your MainActivity and MainApplication files.

Step 5: Add this Firebase Messaging service in the AndroidManifest.xml file.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="your.package">
    ...
    <application
        ...>

        ...

        <service android:exported="false" android:name=".MyFirebaseMessagingService">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>

    </application>

</manifest>

Please replace your.package in the manifest tag with your package name.

Step 6: Send the FCM token to WebEngage in MainActivity.java file as shown below.

...
import android.os.Bundle;

import com.webengage.sdk.android.WebEngage;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.messaging.FirebaseMessaging;

public class MainActivity extends ReactActivity {
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        try {
            FirebaseMessaging.getInstance().getToken().addOnCompleteListener(new OnCompleteListener<String>() {
                @Override
                public void onComplete(@NonNull Task<String> task) {
                    try {
                        String token = task.getResult();
                        WebEngage.get().setRegistrationID(token);
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            });
        } catch (Exception e) {
            // Handle exception
        }
    }
}

Step 7: Set the Auto GCM Registration Flag to false in WebEngageConfig in the MainApplication.java file, as shown below.

...
public class MainApplication extends Application implements ReactApplication {
  ...
  @Override
  public void onCreate() {
    ...
    WebEngageConfig webEngageConfig = new WebEngageConfig.Builder()
              ...
              .setAutoGCMRegistrationFlag(false)
              ...
              .build();
    registerActivityLifecycleCallbacks(new WebEngageActivityLifeCycleCallbacks(this, webEngageConfig));
  }
}

Making your app compatible with Android 13 push changes

From Android 13 onwards, clients will have to explicitly ask permissions from end user to send push notifications. This means, client will NOT recieve push opted in as true once the app is installed by the end user, unless the user explicitly subscribes for same.

To make sure your app is compatible with Android 13 changes, kindly follow these steps:

Step 1. Kindly refer to official Google documentation to make your application compatible with the same.

Step 2. On the basis of the permission provided by the user, pass the status to WebEngage by following the code snippet below:

webengage.user.setDevicePushOptIn(true)

🚧
Please Note

Pass the boolean value true or false depending on the permission the user has specified. If users denies the permission, they will not receive push alerts.

Push permission Prompt trigger to be managed by the App.

And you're good to go!

iOS

Push Messaging for your React Native iOS app can be configured in any of the following ways:

Method 1: Set up React Native iOS push

Follow these steps to configure Push Notifications for your React Native iOS app.

Method 2: Set up native iOS push

Follow the iOS Push Messaging Guide to configure Push Messaging for your app.

Please feel free to drop in a few lines at [email protected] in case you have any further queries. We're always just an email away!