It took long time for me to manage in the correct way push notifications within my app. Using DevExtreme, I’m able to create a single app both for Android and iOS.

To test the push notifications feature, I use FCM (Firebase Cloud Messaging, by Google).


First of all, register your app to FCM (you can also use other tools, for example, Azure).

Then, register your app. If you develop both for iOS and Android, you have to register twice.

DevExtreme/Phonegap Project

You must make some edits in the config.xml file (if you have the projects and app.shared, work in the project). So, in your config.xml file, add/edit:

    <preference name="phonegap-version" value="cli-6.4.0" />

    <preference name="android-minSdkVersion" value="15" />

    <plugin name="phonegap-plugin-push" spec="1.9.0"/>

Note I use the attribute spec to choose the version 1.9.0, since with the version 2, it didn’t work. The problem was when I was trying to create the application template. It worked, but the phonegap-push-plugin wasn’t added. [to check if it is added, just create the template and open the apk file generated as if it is a zip file and browse for the folder ApplicationTemplate.apk\assets\www\plugins].

  1. <preference name="phonegap-version" value="cli-7.0.1" /> 
  2. <preference name="android-minSdkVersion" value="15" />
  3. <plugin name="phonegap-plugin-push" spec="2.0.0" />

The point is useful until the version 7.0.1 isn’t the default one.

Further, download from FCM the files GoogleService-Info.plist (for iOS) and google-services.json (for Android) and put them in the same folder of the config.xml file. These files includes useful infos. Then, add these lines to the config.xml:

  <platform name="android">
    <resource-file src="google-services.json" target="google-services.json" />
  <platform name="ios">
    <resource-file src="GoogleService-Info.plist" />

The updates in the config.xml file are useful to include the plugin.

In your DevExtreme project, in the index.js file, after the deviceready event (every time the app starts), you need to init the push notification behavior.


In the image, under the tab “Cloud messaging”, you can find “ID mittente”, stands for “Sender ID”. You will need this value. This value is used for the Android settings (using the plugin version 1.9).

      if (typeof PushNotification !== 'undefined') {
          var push = PushNotification.init({
              android: {
              ios: {
                  alert: "true",
                  badge: "true",
                  sound: "true",
                  clearBadge: "true"
              windows: {}
          push.on('registration', function (data) {
              // data.registrationId
              DevExpress.ui.notify("Device registered " + data.registrationId, "success", 3000);
          push.on('notification', function (data) {
              // data.message,
              // data.title,
              // data.count,
              // data.sound,
              // data.image,
              // data.additionalData
              // mostra la notifica se l'app è aperta
              DevExpress.ui.notify(data.message, "info", 10000);
          push.on('error', function (e) {
              // e.message
              // sarà da togliere, utilissimo in fase di debug
              DevExpress.ui.notify(e.message, "error", 10000);

The 3 events registration, notification and error are managed only if the app is opened.

  • Registration: the APP registers itself to the push service, receiving a unique registrationId. This event is useful if you want to store this value to send notifications to single devices;
  • Notification: instead of show the classic notification pop up (depending on the phone), the event notication shows a little pop up (using DevExtreme feature) to read the message, if the APP is open (if the app is closed, you will get the notification in the classic way);
  • Error: if the APP is open and the notification throws some error, here you can manage it.

When you are ready to test it, you have first to go to “Build Application Template” and use it when clicking on “Build the Native Package”. Before to build package, remember to flag the option “Use custom application template” under the tab Android and iOS, giving the app of the just built template (the default is\templates\).

When you want to test it (only on real devices, push can’t be simulated in the browser), you have to create the zip package and upload it here (create the free account if you don’t have it).

NOTE: Before to upload it, only for Android and below the DevExtreme version 17.1.5, you have to edit the config.xml file inside the zip package. You have to change, in the splash tag, the attribute qualifier with the attribute density. If you don’t do this, you won’t see the splash screen using phonegap 7.0.1.

What I do to install on Android

(This is what I do, not the only right way to do it). I downloaded the generated apk and used it as template in my DevExtreme project, then I created the Android package. Finally, I installed it on my Android device.

What I do to install on iOS

I directly used the downloaded ipa to install the app, since if I use as template, I get a signature error, although I used the same certificate in the phonegap site and with DevExtreme (Error itms-90035, I’m still searching a solution here). Anyway, with the phonegap site ipa, I installed it with TestFlight on an iPhone.

How to test

If you see the green pop up on the bottom of the screen, the push is working. In the green pop up there is the registrationID, used to identify the device while sendind notifications.

Send message with FCM Console

After you have registered your app, go in the console and click on “New Message”. Here, you can write the text of the message to be notify and select the recipient app (remember: you have two different apps: one iOS, one Android). Click on “Send message” and confirm it. If it is all correct, you will get a notification on your app.

NOTE: you can test this feature only on real devices, not in the browser simulator. Further, since the browser simulator doesn’t manage the notification, the first row of the posted code [if (typeof PushNotification !== ‘undefined’)] prevent the error message of the browser simulator with the message:

“Error: ‘Uncaught ReferenceError: PushNotification is not defined’, line 223, file ‘http://localhost:62274/index.js&#8217;.”

I will add more details as soon I will develop my server side notification manager and also when I will test the iOS area.