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).

FCM

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 app.mobile and app.shared, work in the app.mobile project). So, in your config.xml file, add/edit:

  1. <preference name="phonegap-version" value="cli-6.4.0" />
  2. <preference name="android-minSdkVersion" value="15" />
  3. <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].

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.

Immagine

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: {
            senderID: "123456"
        },
        ios: {
            alert: "true",
            badge: "true",
            sound: "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
        DevExpress.ui.notify(data.message, "info", 10000);
    });

    push.on('error', function (e) {
        // e.message
        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 APP.mobile\templates\).

To test it, install on a real device.

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.

Advertisements