---
title: "PhoneGap"
slug: "phonegap"
updated: 2026-06-09T22:36:58Z
published: 2026-06-09T22:36:58Z
canonical: "docs.xtremepush.com/phonegap"
stale: true
---
> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt
> Use this file to discover all available pages before exploring further.
# PhoneGap
Add Xtremepush to both iOS and Android apps built with Cordova, PhoneGap or Ionic
Xtremepush supports push notifications for iOS devices via Apple's Push Notification Service (APNs) and for Android devices via Google’s FCM (Firebase Cloud Messaging for Android) service. This page contains PhoneGap specific instructions but you will need to connect your iOS and Android app to the platform separately.
> [!TIP]
> To integrate successfully you will need to have your xtremepush App Key, APNS certs for iOS and, Firebase Sender ID and Server Key for Android. These are used to connect your app to the platform and the Apple and Google push services. You will find links to documentation on connecting to the platform below:
>
> - [FCM setup for Android](/documentation/docs/android-push-notifications)
> - [Setting up APNs Certificates for iOS](/documentation/docs/ios-push-notifications)
## Android
After you retrieve the `google-services.json` file for your app from FCM you should add it into the `platforms/android/app` directory.
.png?sv=2026-02-06&spr=https&st=2026-10-30T01%3A59%3A39Z&se=2026-10-30T02%3A59%3A39Z&sr=c&sp=r&sig=SxY4oi9f1Y1V10d0RyOl6%2BPgDpz3VHjgORn9wWhh2LM%3D)
Full Cordova integration guides are given for iOS and Android below.
## Installing the Xtremepush plugin
1. In a terminal navigate to your project directory
2. From a terminal, navigate to your application directory and add the plugin with the following command:
```powershell
cordova plugin add https://github.com/xtremepush/XtremePush-Phonegap
```
3. Now edit your `index.js` file to register with the Xtremepush server on a `deviceready` event, taking care to switch `APP_KEY` and `FCM_PROJECT_NUMBER` to actual values. An `orientationchange` listener can also be added, to allow rotation of in-app messages, as seen below:
```Addinganorientationchangelistener
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
window.addEventListener('orientationchange', doOnOrientationChange);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
registerXtremePush();
}
};
function registerXtremePush(){
var androidXpushKey = "YOUR_ANDROID_APPKEY";
var iosXpushKey = "YOUR_IOS_APPKEY";
var xpAppkey = "";
if (window.cordova.platformId == "android"){
xpAppkey = androidXpushKey;
} else{
xpAppkey = iosXpushKey;
}
XtremePush.register({
appKey: xpAppkey,
debugLogsEnabled: true,
inappMessagingEnabled: true,
ios: {
pushPermissionsRequest: true,
//if using locations
locationsEnabled: true,
beaconsEnabled: true,
locationsPermissionsRequest: true,
},
android: {
gcmProjectNumber: "GCM_PROJECT_NUMBER",
//if using locations
geoEnabled: true,
beaconsEnabled: true
}
});
}
function doOnOrientationChange() {
XtremePush.onConfigChanged();
}
app.initialize();
```
You will need to add `NSBluetoothPeripheralUsageDescription` to your `config.xml` file under the iOS section. It is a required usage description you have to add to your app if it includes CoreBluetooth (even if core bluetooth is not actively used). The Xtremepush iOS SDK currently requires you to do that. See docs here for more information.
Note: If you are using locations you will need to add the following to your `config.xml` file under the iOS section:
```xml
We use Location services to send you relevant information, when and where you need itWe use Location services to send you relevant information, when and where you need itWe use Location services to send you relevant information, when and where you need itWe use Bluetooth services to send you relevant information, when and where you need it
```
These are the messages that will show to the user when they are shown the prompt for granting location and bluetooth permission. In the example above we have added a placeholder text, but this can be changed to something more relevant which allows you to relate why you are asking your users to grant location access.
At this point, your basic Xtremepush integration is complete. If you build your project now, the app should register with the Xtremepush platform and you should be able to start sending campaigns to your device.
> [!TIP]
> Make sure you set the user ID
>
> It is recommended that at this stage you use our SDK method to set user IDs by following our [dedicated guide](/documentation/docs/set-user-id) to ensure devices can be associated and targeted in your campaigns by your own unique identifier.
## Sample
If you have any difficulty in configuring the implementation, a sample app can be built using the following two files as a starting point:
### index.html
```xml
Hello World
Apache Cordova
```
### index.js
```javascript
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
window.addEventListener('orientationchange', doOnOrientationChange);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
registerXtremePush();
}
};
function registerXtremePush() {
XtremePush.register({
appKey:"AppKey",
impressionsBatchingEnabled:true,
inappMessagingEnabled:true,
tagsBatchingEnabled:true,
inboxEnabled:true,
messageResponseCallback : "onMessageResponse",
inboxBadgeCallback: "onInboxBadgeUpdate",
deeplinkCallback : "onDeeplinkReceived",
ios:{
locationsEnabled:true,
locationsPermissionsRequest:true,
pushPermissionsRequest:true
},
android:
{
gcmProjectNumber:"SenderID",
geoEnabled:true,
beaconsEnabled:true,
locationsPermissionsRequest: true
}
});
}
function doOnOrientationChange() {
XtremePush.onConfigChanged();
}
function onMessageResponse(data) {
console.log("Message Response " + JSON.stringify(data));
}
function onInboxBadgeUpdate(data){
console.log("Inbox badge update " + data);
}
function onDeeplinkReceived(data){
console.log("Deeplink Received " + data);
}
function deviceInfo() {
XtremePush.deviceInfo(function(data){
console.log(data);
});
}
app.initialize();
```
A full list of our JavaScript functions and their parameters can be found in the [xtremepush.js plugin](https://github.com/xtremepush/XtremePush-Phonegap/blob/master/www/xtremepush.js) file.
## Additional options
### Tagging, events and special cases
Tagging and events can then be implemented in your app as follows:
Sample button showing how to hit an event (for triggering campaigns):
```xml
```
Sample button showing how to hit a tag (for analytics/segmentation purposes):
```xml
```
There are special cases where you may want to send values, such as string or maps, with an event hit. To do that you can use this structure:
Sample button showing how to call `hitEventWithValue` (Value can be a String or a Map)
```xml
```
And in the JS file:
```javascript
function hitEventWithValue() {
//var stringOrMap = {0: "number0", 1: "number1"};
//var stringOrMap = "numbers";
XtremePush.hitEventWithValue('eventName', stringOrMap);
}
```
### Callback Functions
`messageResponseCallback`, `deeplinkCallback` and `inboxBadgeCallback` options allow you to link JavaScript functions, defined in the JavaScript files of your project, to the Xtremepush SDK. These functions will then be called by the SDK when particular events happen. After your functions have been created, you can set them with the `XtremePush.register()` function, using each of the following optional settings:
```javascript
messageResponseCallback : "onMessageResponse",
inboxBadgeCallback: "inboxBadgeCallbackFunction",
deeplinkCallback : "onDeeplinkReceived",
```
They are called to be executed in special cases as explained below:
#### messageResponseCallback
A basic implementation is shown below.
```javascript
function onMessageResponse(data) {
let jo = JSON.parse(JSON.stringify(data));
console.log(JSON.stringify(jo));
if (jo.response.type == = "present") {
} else if (jo.response.type == = "click") {
} else if (jo.response.type == = "dismiss") {
}
}
```
The `response.type` variable shown above can be either present, click or dismiss.
- Present: when a push notification is received and the app is in the foreground
- Click: when a message is clicked
- Dismiss: when a message is dismissed
Below is a complete example of custom notification handling. It does multiple things:
- Shows a custom dialog when a push message is received in the foreground
- Opens an article page when a message is clicked
- Saves information when one of the message buttons is clicked
```javascript
function onMessageResponse(data) {
let jo = JSON.parse(JSON.stringify(data));
// When app is received in the foreground show an alert
if (jo.response.type == = "present") {
console.log(JSON.stringify(jo));
openArticle(jo.message.data.articleId);
//when the user clicks on a message
} else if (jo.response.type == = "click") {
//default click action
if (!jo.response.hasOwnProperty('action')) {
openArticle(jo.message.data.articleId);
//action for specific button click
} else {
if (jo.response.action == = "like") {
likeArticle(jo.message.data.articleId);
} else if (jo.response.action == = "share") {
shareArticle(jo.message.data.articleId);
}
}
//show alert if dismiss button click
} else if (jo.response.type == = "dismiss") {
alert("message dismiss");
}
}
```
#### inboxBadgeCallback
It happens when the badge number updates. The badge number is checked when:
- New push message arrives
- Application is started
- Inbox window is closed
An example is shown below:
```javascript
function onInboxBadgeUpdate(data){
alert ('Inbox badge update ' + data);
}
```
#### deeplinkCallback
It happens when a message with the click action **Go to deeplink** is clicked. See our [guide for deeplinks](/documentation/docs/mobile-deeplinks) for more information.
An example is shown below:
```javascript
function onDeeplinkReceived(data){
alert("deeplink Received "+data);
}
```
#### Foreground Notification Handling
It is important to define the right behaviour for the situation when a push notification is received in the foreground. You don't want to interrupt the user workflow but may still want to deliver important information to the user.The default behaviour on both iOS and Android is to show an OS style notification, but this can be changed, by adding the payload with the key 'foreground' and value 'false' to your campaign.
.png?sv=2026-02-06&spr=https&st=2026-10-30T01%3A59%3A39Z&se=2026-10-30T02%3A59%3A39Z&sr=c&sp=r&sig=SxY4oi9f1Y1V10d0RyOl6%2BPgDpz3VHjgORn9wWhh2LM%3D)
Now when the push is received, should the app be in the foreground, the notification will not be displayed.
## Advanced options
### Attributions
If you would like Xtremepush to collect IDFA/Android ID and attribution data in your app, we have a repository branch of the plugin that copies the required frameworks into your app. This can be installed using the following command:
```powershell
cordova plugin add https://github.com/xtremepush/XtremePush-Phonegap#master+attributions
```
To enable the collection functionality, the `attributionsEnabled` parameter in the `XtremePush.register()` function must also be set with a value of `true`.
### Remove location services
If you would like to remove the geo-location and beacon frameworks and services from your app, please use the following command when installing the plugin:
```Removinglocationservices
cordova plugin add https://github.com/xtremepush/XtremePush-Phonegap#master-geo-beacon
```
### Inbox
The inbox feature can be turned on in your app by adding the following to your `XtremePush.register()` function:
```javascript
inboxEnabled: true
```
Here is a sample button showing how to open inbox
```javascript
```
If you want to use the inbox badge functionality please use the following in your `XtremePush.register()` function:
```javascript
inboxBadgeCallback: "onInboxBadgeUpdate"
```
Here is a sample button showing how to retrieve the latest badge number:
```javascript
```