I want to checkout the sample app
Ionic/Cordova Push notifications sample appView on Github
Firebase Project Setup
Visit Firebase Console and login/signup using your Gmail ID.Step 1: Create a new Firebase Project
On your Firebase Console, create a new project.
- You give a name to your project
- Add Google Analytics to your project (Optional)
- Configure Google Analytics account (Optional)
Step 2: Add Firebase to your App
React native setup will require 2 files for Android and iOS:- For Android, you need to download the
google-services.json
file. You can refer to the Android Firebase Project Setup - Step 2 and resume here once done. - For iOS, you need to download the
GoogleService-Info.plist
file. You can refer to the iOS Firebase Project Setup - Step 2 and resume here once done. - For web, you need to have the Firebase Config object. You can refer to the Web Firebase Project Setup - Step 2 and resume here once done.
Step 3: Download the service account file

Extension settings
Step 1: Enable the extension
- Login to CometChat and select your app.
- Go to the Extensions section and Enable the Push Notifications extension.
- Open the settings for this extension and save the following.

Step 2: Save your settings
On the Settings page you need to enter the following:- Set extension version
- If you are setting it for the first time, Select
V2
to start using the token-based version of the Push Notification extension. - If you already have an app using
V1
and want to migrate your app to useV2
, then SelectV1 & V2
option. This ensures that the users viewing the older version of your app also receive Push Notifications. - Eventually, when all your users are on the latest version of your app, you can change this option to
V2
, thus turning offV1
(Topic-based) Push Notifications completely.
- Select the platforms that you want to support
- Select from Web, Android, Ionic, React Native, Flutter & iOS.
- Notification payload settings
- You can control if the notification key should be in the Payload or not. Learn more about the FCM Messages here.
- Push payload message options

- The message metadata includes the outputs of the Thumbnail Generation, Image Moderation, and Smart Replies extensions. You may want to retain this metadata if you need to customize the notification displayed to the end user based on these outputs.
- Notification Triggers

-
Select the triggers for sending Push Notifications. These triggers can be classified into 3 main categories:
- Message Notifications
- Call Notifications
- Group Notifications
- These are pretty self-explanatory and you can toggle them as per your requirement.
App Setup
Step 1: Initial plugin setup
- For Cordova & Ionic, there are numerous plugins available via NPM which can be used to set up push notifications for your apps like FCM Plugin and Push Plugin.
- To setup Push Notification, you need to follow the steps mentioned in the Plugin’s Documentation.
- Separate apps created on the Firebase console. (For Web, Android and iOS).
- Plugin setup completed as per the respective documentation.
Step 2: Register FCM Token
- This step assumes that you already have a React Native app setup with CometChat installed. Make sure that the CometChat object is initialized and user has been logged in.
- On the success callback of user login, you can fetch the FCM Token and register it with the extension as shown below:
- Registration also needs to happen in case of token refresh as shown below:
Step 3: Receive Notifications
Step 4: Stop receiving Notifications
- On CometChat.logout will stop receiving notifications.
- As a good practice, you can also delete the FCM Token by calling
deleteToken
on the fcm object.
Advanced
Handle Custom Messages
To receive notification ofCustomMessage
, you need to set metadata while sending the CustomMessage
.
Converting push notification payload to message object
CometChat SDK provides a methodCometChat.CometChatHelper.processMessage()
to convert the message JSON to the corresponding object of TextMessage, MediaMessage,CustomMessage, Action or Call.
Type of Attachment can be of the following the type:
CometChatConstants.MESSAGE_TYPE_IMAGE
CometChatConstants.MESSAGE_TYPE_VIDEO
CometChatConstants.MESSAGE_TYPE_AUDIO
CometChatConstants.MESSAGE_TYPE_FILE