@cycraft/capacitor-repro

@cycraft/capacitor-repro

Unofficial Capacitor plugin for Repro SDK.¹

Installation

npm install @cycraft/capacitor-repro
npx cap sync

Android

Add Firebase to your app

See Settings for FCM (Android) and complete the steps first.

Copy google-services.json which you have downloaded from Settings for FCM (Android) into the module (app-level) root directory (/android/app/google-services.json) of your app.

In your root-level (project-level) Gradle file (<project>/build.gradle), add the Google services plugin as a buildscript dependency:

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

allprojects {
    ...
    repositories {
        ...
+        google()
    }
}

Add Repro to your app

In your root-level (project-level) Gradle file (<project>/build.gradle), add the Repro repository:

```diff
allprojects {
    ...
    repositories {
        ...
+        maven { url 'https://cdn.reproio.com/android' }
    }
}

In your module (app-level) Gradle file (<project>/<app-module>/build.gradle), add the Google services plugin:

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

Register receiver

You also need to add the following receiver and intent-filter inside the application tag in your AndroidManifest.xml:

<receiver
    android:name="io.repro.android.ReproReceiver"
    android:exported="true"
    android:permission="com.google.android.c2dm.permission.SEND">
    <intent-filter>
        <action android:name="com.google.android.c2dm.intent.RECEIVE" />
        <category android:name="YOUR_PACKAGE_NAME" />
    </intent-filter>
</receiver>

Attention: Make sure to replace YOUR_PACKAGE_NAME with your app's package name.

Setup Notification Channels

Since Android O, Notification Channels were introduced to help users manage their notifications.

To set the notification channels in Repro SDK, please add these metadata values inside the application tag in your AndroidManifest.xml file:

<meta-data
    android:name="io.repro.android.PushNotification.ChannelId"
    android:value="default">
</meta-data>

<meta-data
    android:name="io.repro.android.PushNotification.ChannelName"
    android:resource="@string/repro_channel_name">
</meta-data>

<meta-data
    android:name="io.repro.android.PushNotification.ChannelDescription"
    android:resource="@string/repro_channel_description">
</meta-data>

<meta-data
    android:name="io.repro.android.PushNotification.ShowBadge"
    android:value="false">
</meta-data>

Attention: Make sure to specify the repro_channel_name and repro_channel_description values in your strings.xml file.

Customize Icon and Background Color

The Push Notification icon with the appropriate name and background color should be added inside the application tag in your AndroidManifest.xml file:

<meta-data
    android:name="io.repro.android.PushNotification.SmallIcon"
    android:resource="@drawable/your_icon_id">
</meta-data>

<meta-data
    android:name="io.repro.android.PushNotification.AccentColor"
    android:resource="@color/your_color_id">
</meta-data>

Using App-Links

In order to use App-Links, you need to add a regular expression based url matcher inside the application tag in your AndroidManifest.xml file. Here is an example:

<meta-data
    android:name="io.repro.android.OpenUrlFilterRegExList"
    android:value="https://example\\.com/page/;your-domain\\.com/.+\\?universal=true">
</meta-data>

Variables

This plugin will use the following project variables (defined in your app’s variables.gradle file):

• $reproAndroidVersion version of io.repro:repro-android-sdk (default: 5.12.0)
• $firebaseMessagingVersion version of com.google.firebase:firebase-messaging (default: 23.4.1)

iOS

Add Firebase to your app

See Settings for APNs Certificate (iOS) and complete the steps first.

To be able to use push notifications, you must enable the Push Notifications and Background Modes (select the Remote notifications checkbox) capabilities. See Setting Capabilities for instructions on how to enable the capability.

Register for push notifications

Add the following to your app's AppDelegate.swift:

func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
  NotificationCenter.default.post(name: .capacitorDidRegisterForRemoteNotifications, object: deviceToken)
}

func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
  NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
}

func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
    NotificationCenter.default.post(name: Notification.Name.init("didReceiveRemoteNotification"), object: completionHandler, userInfo: userInfo)
}

Using Universal-Links

In order to use Universal-Links, you need to add a regular expression based url matcher to your Info.plist file. Here is an example:

<key>RPROpenUrlFilterRegExList</key>
<array>
    <string>https://example\.com/page/</string>
    <string>your-domain\.com/.+\?universal=true</string>
</array>

Web

Push Notifications: Add the Service Worker

See Download ServiceWorker file and host it, Specify the ServiceWorker URL and Create and host manifest file (for iOS).

Configuration

On iOS you can configure the way the push notifications are displayed when the app is in foreground.

Prop	Type	Description	Default	Since
presentationOptions	PresentationOption[]	This is an array of strings you can combine. Possible values in the array are: - badge: badge count on the app icon is updated (default value) - sound: the device will ring/vibrate when the push notification is received - alert: the push notification is displayed in a native dialog An empty array can be provided if none of the options are desired. Only available for iOS.	["badge", "sound", "alert"]	0.0.0

Examples

In capacitor.config.json:

{
  "plugins": {
    "Repro": {
      "presentationOptions": ["badge", "sound", "alert"]
    }
  }
}

In capacitor.config.ts:

/// <reference types="@capacitor/repro" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    Repro: {
      presentationOptions: ["badge", "sound", "alert"],
    },
  },
};

export default config;

Usage

import { Repro, CampaignType } from '@cycraft/capacitor-repro';

const setup = async () => {
  await Repro.setup({ 
    sdkToken: 'YOUR_SDK_TOKEN', 
    clientToken: 'YOUR_CLIENT_TOKEN' 
  });
};

const enablePushNotification = async () => {
  await Repro.enablePushNotification();
};

const getNewsFeeds = async () => {
  const { newsFeeds } = await Repro.getNewsFeeds({ 
    campaignType: CampaignType.InAppMessage, 
    limit: 10,
    offsetNewsFeedId: 12 
  });
  return newsFeeds;
};

const updateNewsFeeds = async () => {
  await Repro.updateNewsFeeds({ 
    newsFeeds: [
      { id: 12, campaignType: CampaignType.InAppMessage, shown: true, read: true },
    ] 
  });
};

const checkPermissions = async () => {
  const result = await Repro.checkPermissions();
  return result.receive;
};

const requestPermissions = async () => {
  const result = await Repro.requestPermissions();
  return result.receive;
};

API

• setup(...)
• setLogLevel(...)
• setUserId(...)
• getUserId()
• setStringUserProfile(...)
• setIntegerUserProfile(...)
• setDoubleUserProfile(...)
• setDateUserProfile(...)
• getDeviceId()
• track(...)
• enablePushNotification()
• subscribeToPushNotification()
• isPushNotificationSubscribeAllowed()
• getNewsFeeds(...)
• updateNewsFeeds(...)
• disableInAppMessagesOnForegroundTransition()
• enableInAppMessagesOnForegroundTransition()
• checkPermissions()
• requestPermissions()
• addListener('notificationReceived', ...)
• addListener('notificationActionPerformed', ...)
• addListener('urlOpened', ...)
• removeAllListeners()
• Interfaces
• Type Aliases
• Enums

setup(...)

setup(options: SetupOptions) => Promise<void>

Set up the Repro SDK.

Param	Type
options	SetupOptions

Since: 0.0.0

---

setLogLevel(...)

setLogLevel(options: SetLogLevelOptions) => Promise<void>

Set the log level.

Only available for Android and iOS.

Param	Type
options	SetLogLevelOptions

Since: 0.0.2

---

setUserId(...)

setUserId(options: SetUserIdOptions) => Promise<void>

Set the user ID.

Param	Type
options	SetUserIdOptions

Since: 0.0.0

---

getUserId()

getUserId() => Promise<GetUserIdResult>

Get the user ID.

Returns: Promise<GetUserIdResult>

Since: 0.0.0

---

setStringUserProfile(...)

setStringUserProfile(options: SetStringUserProfileOptions) => Promise<void>

Set custom user profile with a string value.

Param	Type
options	SetStringUserProfileOptions

Since: 0.0.2

---

setIntegerUserProfile(...)

setIntegerUserProfile(options: SetIntegerUserProfileOptions) => Promise<void>

Set custom user profile with an integer value.

Param	Type
options	SetIntegerUserProfileOptions

Since: 0.0.2

---

setDoubleUserProfile(...)

setDoubleUserProfile(options: SetDoubleUserProfileOptions) => Promise<void>

Set custom user profile with a double value.

Param	Type
options	SetDoubleUserProfileOptions

Since: 0.0.2

---

setDateUserProfile(...)

setDateUserProfile(options: SetDateUserProfileOptions) => Promise<void>

Set custom user profile with a date value.

Param	Type
options	SetDateUserProfileOptions

Since: 0.0.2

---

getDeviceId()

getDeviceId() => Promise<GetDeviceIdResult>

Set the device ID.

Returns: Promise<GetDeviceIdResult>

Since: 0.0.0

---

track(...)

track(options: TrackOptions) => Promise<void>

Track an event.

Param	Type
options	TrackOptions

Since: 0.0.0

---

enablePushNotification()

enablePushNotification() => Promise<void>

Enable push notifications.

Only available for Android.

Since: 0.0.0

---

subscribeToPushNotification()

subscribeToPushNotification() => Promise<void>

Subscribe to push notifications.

Only available for Web.

Since: 0.0.0

---

isPushNotificationSubscribeAllowed()

isPushNotificationSubscribeAllowed() => Promise<IsPushNotificationSubscribeAllowedResult>

Check if push notification subscribe is allowed.

Only available for Web.

Returns: Promise<IsPushNotificationSubscribeAllowedResult>

Since: 0.0.0

---

getNewsFeeds(...)

getNewsFeeds(options: GetNewsFeedsOptions) => Promise<GetNewsFeedsResult>

Get news feeds.

Param	Type
options	GetNewsFeedsOptions

Returns: Promise<GetNewsFeedsResult>

Since: 0.0.0

---

updateNewsFeeds(...)

updateNewsFeeds(options: UpdateNewsFeedsOptions) => Promise<void>

Update news feeds.

Attention: Only the shown and read properties of the news feed can be updated.

Param	Type
options	UpdateNewsFeedsOptions

Since: 0.0.0

---

disableInAppMessagesOnForegroundTransition()

disableInAppMessagesOnForegroundTransition() => Promise<void>

Disable in-app messages on foreground transition.

Only available for Android and iOS.

Since: 0.0.2

---

enableInAppMessagesOnForegroundTransition()

enableInAppMessagesOnForegroundTransition() => Promise<void>

Enable in-app messages on foreground transition.

Only available for Android and iOS.

Since: 0.0.2

---

checkPermissions()

checkPermissions() => Promise<PermissionStatus>

Check permission to receive push notifications.

On Android, this method only needs to be called on Android 13+.

Returns: Promise<PermissionStatus>

Since: 0.0.0

---

requestPermissions()

requestPermissions() => Promise<PermissionStatus>

Request permission to receive push notifications.

On Android, this method only needs to be called on Android 13+.

Returns: Promise<PermissionStatus>

Since: 0.0.0

---

addListener('notificationReceived', ...)

addListener(eventName: 'notificationReceived', listenerFunc: NotificationReceivedListener) => Promise<PluginListenerHandle>

Called when a new push notification is received.

Param	Type
eventName	'notificationReceived'
listenerFunc	NotificationReceivedListener

Returns: Promise<PluginListenerHandle>

Since: 0.0.0

---

addListener('notificationActionPerformed', ...)

addListener(eventName: 'notificationActionPerformed', listenerFunc: NotificationActionPerformedListener) => Promise<PluginListenerHandle>

Called when a new push notification action is performed.

Only available for Android and iOS.

Param	Type
eventName	'notificationActionPerformed'
listenerFunc	NotificationActionPerformedListener

Returns: Promise<PluginListenerHandle>

Since: 0.0.0

---

addListener('urlOpened', ...)

addListener(eventName: 'urlOpened', listenerFunc: UrlOpenedListener) => Promise<PluginListenerHandle>

Called when a URL is opened.

Param	Type
eventName	'urlOpened'
listenerFunc	UrlOpenedListener

Returns: Promise<PluginListenerHandle>

Since: 0.0.5

---

removeAllListeners()

removeAllListeners() => Promise<void>

Remove all listeners for this plugin.

Since: 0.0.0

---

Interfaces

SetupOptions

Prop	Type	Description	Default	Since
sdkToken	string	The Repro SDK token. Log in to the Repro Web dashboard and go to Settings, Project Settings and copy the SDK token.		0.0.0
clientToken	string	The Repro Client token. Log in to the Repro Web dashboard and go to Settings, Project Settings and copy the Repro Client token. Only available for Web.		0.0.0
spaMode	'none' | 'history' | 'hash'	The SPA Mode. Only available for Web.	'none'	0.0.3

SetLogLevelOptions

Prop	Type	Description	Since
logLevel	LogLevel	The log level.	0.0.1

SetUserIdOptions

Prop	Type	Description	Since
userId	string	The user ID.	0.0.0

GetUserIdResult

Prop	Type	Description	Since
userId	string	The user ID.	0.0.0

SetStringUserProfileOptions

Prop	Type	Description	Since
key	string	The user profile key.	0.0.1
value	string	The user profile value.	0.0.1

SetIntegerUserProfileOptions

Prop	Type	Description	Since
key	string	The user profile key.	0.0.1
value	number	The user profile value.	0.0.1

SetDoubleUserProfileOptions

Prop	Type	Description	Since
key	string	The user profile key.	0.0.1
value	number	The user profile value.	0.0.1

SetDateUserProfileOptions

Prop	Type	Description	Since
key	string	The user profile key.	0.0.1
value	Date	The user profile value.	0.0.1

Date

Enables basic storage and retrieval of dates and times.

Method	Signature	Description
toString	() => string	Returns a string representation of a date. The format of the string depends on the locale.
toDateString	() => string	Returns a date as a string value.
toTimeString	() => string	Returns a time as a string value.
toLocaleString	() => string	Returns a value as a string value appropriate to the host environment's current locale.
toLocaleDateString	() => string	Returns a date as a string value appropriate to the host environment's current locale.
toLocaleTimeString	() => string	Returns a time as a string value appropriate to the host environment's current locale.
valueOf	() => number	Returns the stored time value in milliseconds since midnight, January 1, 1970 UTC.
getTime	() => number	Gets the time value in milliseconds.
getFullYear	() => number	Gets the year, using local time.
getUTCFullYear	() => number	Gets the year using Universal Coordinated Time (UTC).
getMonth	() => number	Gets the month, using local time.
getUTCMonth	() => number	Gets the month of a Date object using Universal Coordinated Time (UTC).
getDate	() => number	Gets the day-of-the-month, using local time.
getUTCDate	() => number	Gets the day-of-the-month, using Universal Coordinated Time (UTC).
getDay	() => number	Gets the day of the week, using local time.
getUTCDay	() => number	Gets the day of the week using Universal Coordinated Time (UTC).
getHours	() => number	Gets the hours in a date, using local time.
getUTCHours	() => number	Gets the hours value in a Date object using Universal Coordinated Time (UTC).
getMinutes	() => number	Gets the minutes of a Date object, using local time.
getUTCMinutes	() => number	Gets the minutes of a Date object using Universal Coordinated Time (UTC).
getSeconds	() => number	Gets the seconds of a Date object, using local time.
getUTCSeconds	() => number	Gets the seconds of a Date object using Universal Coordinated Time (UTC).
getMilliseconds	() => number	Gets the milliseconds of a Date, using local time.
getUTCMilliseconds	() => number	Gets the milliseconds of a Date object using Universal Coordinated Time (UTC).
getTimezoneOffset	() => number	Gets the difference in minutes between the time on the local computer and Universal Coordinated Time (UTC).
setTime	(time: number) => number	Sets the date and time value in the Date object.
setMilliseconds	(ms: number) => number	Sets the milliseconds value in the Date object using local time.
setUTCMilliseconds	(ms: number) => number	Sets the milliseconds value in the Date object using Universal Coordinated Time (UTC).
setSeconds	(sec: number, ms?: number | undefined) => number	Sets the seconds value in the Date object using local time.
setUTCSeconds	(sec: number, ms?: number | undefined) => number	Sets the seconds value in the Date object using Universal Coordinated Time (UTC).
setMinutes	(min: number, sec?: number | undefined, ms?: number | undefined) => number	Sets the minutes value in the Date object using local time.
setUTCMinutes	(min: number, sec?: number | undefined, ms?: number | undefined) => number	Sets the minutes value in the Date object using Universal Coordinated Time (UTC).
setHours	(hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number	Sets the hour value in the Date object using local time.
setUTCHours	(hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number	Sets the hours value in the Date object using Universal Coordinated Time (UTC).
setDate	(date: number) => number	Sets the numeric day-of-the-month value of the Date object using local time.
setUTCDate	(date: number) => number	Sets the numeric day of the month in the Date object using Universal Coordinated Time (UTC).
setMonth	(month: number, date?: number | undefined) => number	Sets the month value in the Date object using local time.
setUTCMonth	(month: number, date?: number | undefined) => number	Sets the month value in the Date object using Universal Coordinated Time (UTC).
setFullYear	(year: number, month?: number | undefined, date?: number | undefined) => number	Sets the year of the Date object using local time.
setUTCFullYear	(year: number, month?: number | undefined, date?: number | undefined) => number	Sets the year value in the Date object using Universal Coordinated Time (UTC).
toUTCString	() => string	Returns a date converted to a string using Universal Coordinated Time (UTC).
toISOString	() => string	Returns a date as a string value in ISO format.
toJSON	(key?: any) => string	Used by the JSON.stringify method to enable the transformation of an object's data for JavaScript Object Notation (JSON) serialization.

GetDeviceIdResult

Prop	Type	Description	Since
deviceId	string	The device ID.	0.0.0

TrackOptions

Prop	Type	Description	Since
eventName	string	The event name.	0.0.0
eventProperties	{ [key: string]: any; }	The event properties.	0.0.0

IsPushNotificationSubscribeAllowedResult

Prop	Type	Description	Since
isAllowed	boolean	Whether the push notification subscribe is allowed or not.	0.0.0

GetNewsFeedsResult

Prop	Type	Since
newsFeeds	NewsFeed[]	0.0.0

NewsFeed

Prop	Type	Description	Default	Since
id	number	The ID of the news feed.		0.0.0
campaignType	CampaignType			0.0.0
deviceId	string			0.0.0
title	string			0.0.0
summary	string			0.0.0
body	string			0.0.0
linkUrl	string			0.0.0
imageUrl	string			0.0.0
deliveredAt	string	The date and time when the news feed was delivered.		0.0.0
shown	boolean	Whether the news feed is shown or not.	false	0.0.0
read	boolean	Whether the news feed is read or not.	false	0.0.0

GetNewsFeedsOptions

Prop	Type	Description	Default	Since
campaignType	CampaignType			0.0.0
limit	number	The number of news feed entries to return.	20	0.0.0
offsetNewsFeedId	number			0.0.0

UpdateNewsFeedsOptions

Prop	Type	Since
newsFeeds	NewsFeed[]	0.0.0

PermissionStatus

Prop	Type	Since
receive	PermissionState	0.0.0

PluginListenerHandle

Prop	Type
remove	() => Promise<void>

NotificationReceivedEvent

Prop	Type	Since
notification	Notification	0.0.0

Notification

Prop	Type	Description	Since
body	string	The notification payload.	0.0.0
data	unknown	Any additional data that was included in the push notification payload.	0.0.0
id	string	The notification identifier.	0.0.0
subtitle	string	The notification subtitle. Only available for iOS.	0.0.0
title	string	The notification title.	0.0.0

NotificationActionPerformedEvent

Prop	Type	Description	Since
actionId	string	The action performed on the notification.	0.0.0
inputValue	string	Text entered on the notification action. Only available for iOS.	0.0.0
notification	Notification	The notification in which the action was performed.	0.0.0

UrlOpenedEvent

Prop	Type	Description	Since
url	string	The URL that was opened.	0.0.5

Type Aliases

PermissionState

'prompt' | 'prompt-with-rationale' | 'granted' | 'denied'

NotificationReceivedListener

Callback to receive the notification received event.

(event: NotificationReceivedEvent): void

NotificationActionPerformedListener

Callback to receive the notification action performed event.

(event: NotificationActionPerformedEvent): void

UrlOpenedListener

Callback to receive the URL opened event.

(event: UrlOpenedEvent): void

Enums

LogLevel

Members	Value	Since
Debug	'DEBUG'	0.0.1
Info	'INFO'	0.0.1
Warning	'WARNING'	0.0.1
Error	'ERROR'	0.0.1

CampaignType

Members	Value	Since
PushNotification	'PUSH_NOTIFICATION'	0.0.0
InAppMessage	'IN_APP_MESSAGE'	0.0.0
WebMessage	'WEB_MESSAGE'	0.0.0
All	'ALL'	0.0.0
Unknown	'UNKNOWN'	0.0.0

Development

Release

Run the following command on origin/main to bump version, update changelog, create a tag, push the changes to the remote repository and publish the package to npm:

npm run release && git push --follow-tags origin main && npm publish

Changelog

See CHANGELOG.md.

License

See LICENSE.

Footnotes

1. This project is not affiliated with, endorsed by, sponsored by, or approved by Repro Inc. or any of their affiliates or subsidiaries. ↩