Skip to content

Cordova SDK Basic integration guide

This section contains information on how to integrate the Pushwoosh Cordova SDK into your application.

Prerequisites

Anchor link to

To integrate the Pushwoosh Cordova SDK into your app, you will need the following:

Integration steps

Anchor link to

1. Add Pushwoosh Cordova SDK Dependency

Anchor link to

Add the Pushwoosh Cordova SDK dependency to your project:

Terminal window
cordova plugin add pushwoosh-cordova-plugin

2. Cordova SDK Initialization

Anchor link to

In the root component of your index.js file:

  • Initialize the Pushwoosh SDK.
  • Call registerDevice() in your initialization logic to register for push notifications.
index.js
function onDeviceReady() {
var pushwoosh = cordova.require("pushwoosh-cordova-plugin.PushNotification");
pushwoosh.onDeviceReady({
appid: "__YOUR_APP_ID__",
projectid: "__YOUR_FCM_SENDER_ID__"
});
pushwoosh.registerDevice(
function(status) {
var pushToken = status.pushToken;
// Handle successful registration
},
function(status) {
// Handle registration error
}
);

Where:

  • __YOUR_APP_ID__ is the application code from the Pushwoosh Control Panel.
  • __YOUR_FCM_SENDER_ID__ is the Firebase project number from the Firebase Console.

3. iOS Native Setup

Anchor link to

3.1 Capabilities

Anchor link to

To enable Push Notifications in your project, you need to add certain capabilities.

In the Signing & Capabilities section, add the following capabilities:

  • Push Notifications
  • Background Modes. After adding this capability, check the box for Remote notifications.

If you intend to use Time Sensitive Notifications (iOS 15+), also add the Time Sensitive Notifications capability.

3.2 Info.plist

Anchor link to

In your Runner/Info.plist set the __PUSHWOOSH_DEVICE_API_TOKEN__ key to the Pushwoosh Device API Token:

info.plist
<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

3.3 Message delivery tracking

Anchor link to

You must add a Notification Service Extension target to your project. This is essential for accurate delivery tracking and features like Rich Media on iOS.

Follow the native guide’s steps to add the extension target and the necessary Pushwoosh code within it.

4. Android Native Setup

Anchor link to

4.1 Install dependencies

Anchor link to

Ensure that the required dependencies and plugins are added to your Gradle scripts:

Add the Google Services Gradle plugin to your project-level build.gradle dependencies:

android/build.gradle
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.3.15'
}
}

Apply the plugin in your app-level build.gradle file:

app/build.gradle
apply plugin: 'com.google.gms.google-services'

4.2 Add Firebase configuration file

Anchor link to

Place the google-services.json file into android/app folder in your project directory.

4.3 Add Pushwoosh metadata

Anchor link to

In your main/AndroidManifest.xml add Pushwoosh Device API Token inside the <application> tag:

AndroidManifest.xml
<meta-data android:name="com.pushwoosh.apitoken" android:value="__YOUR_DEVICE_API_TOKEN__" />

Important: Be sure to give the token access to the right app in your Pushwoosh Control Panel. Learn more

5. Run the Project

Anchor link to
  1. Build and run the project.
  2. Go to the Pushwoosh Control Panel and send a push notification.
  3. You should see the notification in the app.

Extended integration

Anchor link to

At this stage, you have already integrated the SDK and can send and receive push notifications. Now, let’s explore the core functionality

Push notification event listeners

Anchor link to

In the Pushwoosh SDK there are two event listeners, designed for handling push notifications:

  • onPushReceived event is triggered, when a push notification is received
  • onPushAccepted event is triggered, when a user opens a notification

You should set up these event listeners right after initialization of the SDK at the application start up:

index.js
class PushwooshNotificationHandler {
setupPushListeners() {
document.addEventListener('push-receive',
function(event) {
console.log("Push received: " + event.notification.message);
}
);
document.addEventListener('push-notification',
function(event) {
console.log("Push accepted: " + event.notification.message);
}
);
}
}

User configuration

Anchor link to

By focusing on individual user behavior and preferences, you can deliver personalized content, leading to increased user satisfaction and loyalty

class Registration {
afterUserLogin(user) {
// Set user ID
pushwoosh.setUserId(user.getId());
// Setting additional user information as tags for Pushwoosh
pushwoosh.setTags({
"age": user.getAge(),
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
}

Tags are key-value pairs assigned to users or devices, allowing segmentation based on attributes like preferences or behavior, enabling targeted messaging.

class UpdateUser {
afterUserUpdateProfile(user) {
// Set list of favorite categories
pushwoosh.setTags({
"favorite_categories": user.getFavoriteCategoriesList()
});
// Set payment information
pushwoosh.setTags({
"is_subscribed": user.isSubscribed(),
"payment_status": user.getPaymentStatus(),
"billing_address": user.getBillingAddress()
});
}
}

Events are specific user actions or occurrences within the app that can be tracked to analyze behavior and trigger corresponding messages or actions

class Registration {
// Track login event
afterUserLogin(user) {
pushwoosh.postEvent("login", {
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
// Track purchase event
afterUserPurchase(product) {
pushwoosh.postEvent("purchase", {
"product_id": product.getId(),
"product_name": product.getName(),
"price": product.getPrice(),
"quantity": product.getQuantity()
});
}
}

Troubleshooting

Anchor link to

If you encounter any issues during the integration process, please refer to the support and community section.