Capacitor SDK Basic integration guide

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

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

Add the Pushwoosh Capacitor SDK dependency to your project:

npm install pushwoosh-capacitor-plugin

Sync the Capacitor configuration:

npx cap sync

In your main JavaScript file, import and initialize the Pushwoosh SDK:

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

// Initialize the SDK
Pushwoosh.onDeviceReady({
    appid: "__YOUR_APP_CODE__",
    projectid: "__YOUR_FCM_SENDER_ID__"
});

// Register for push notifications
Pushwoosh.registerDevice()
    .then(result => {
        console.log("Push token:", result.pushToken);
        // Handle successful registration
    })
    .catch(error => {
        console.error("Failed to register device:", error);
        // 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.

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.

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

<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

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.

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:

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

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

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

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

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

<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

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.

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

In the Pushwoosh Capacitor SDK there are two callback methods for handling push notifications:

• pushReceivedCallback is triggered when a push notification is received
• pushOpenedCallback is triggered when a user opens a notification

You should set up these callbacks right after initialization of the SDK:

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

// Set up push received callback
await Pushwoosh.pushReceivedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process received notification:", err);
    } else {
        console.log("Push received:", JSON.stringify(notification));
        // Handle the received notification
    }
});

// Set up push opened callback
await Pushwoosh.pushOpenedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process opened notification:", err);
    } else {
        console.log("Push opened:", JSON.stringify(notification));
        // Handle the opened notification
    }
});

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

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class Registration {
  async afterUserLogin(user) {

    // Set user ID
    Pushwoosh.setUserId(user.getId);

    // Setting additional user information as tags for Pushwoosh
    await 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.

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class UpdateUser {
 async afterUserUpdateProfile(user) {

    // Set list of favorite categories
    await Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Set payment information
    await 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

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

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()
    });
  }
}

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