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.0.1'
}
}
allprojects {
repositories {
mavenLocal()
google()
jcenter()
...
}
}
- Please ensure that the
google()
repository is placed above thejcenter()
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:17.3.4'
}
...
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
andMainApplication.java
files. -
Please replace
your.package
with your package name in the first line ofMyFirebaseMessagingService.java
file. This line should be the same as in yourMainActivity
andMainApplication
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: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.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.iid.FirebaseInstanceId;
import com.google.firebase.iid.InstanceIdResult;
import com.webengage.sdk.android.WebEngage;
public class MainActivity extends ReactActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
try {
FirebaseInstanceId.getInstance().getInstanceId().addOnSuccessListener(this, new OnSuccessListener<InstanceIdResult>() {
@Override
public void onSuccess(InstanceIdResult instanceIdResult) {
String token = instanceIdResult.getToken();
WebEngage.get().setRegistrationID(token);
}
});
} 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));
}
}
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!
Updated 9 months ago
So, what's next?
In-app messaging |