Time for action – using push notifications on Android

Use the following steps to enable cross-platform push notifications on your app:

  1. Open the command-line tool and create a new PhoneGap project called pushnotifications.
    $ cordova create ~/the/path/to/your/source/pushnotifications com.gnstudio.pg.pushnotifications PushNotifications
  2. Using the command-line tool add the Android and the iOS platforms to the project.
    $ cd pushnotifications
$ cordova platforms add android
$ cordova platforms add ios
  3. Clone the Push Plugin GitHub repository to your system.
    $ git clone https: //github.com/phonegap-build/PushPlugin.git
  4. Open the Xcode project you find in the folder platforms/ios and drag-and-drop into the plugins folder available in the Xcode Project Navigator the following files: AppDelegate+notification.h, AppDelegate+notification.m, PushPlugin.h, PushPlugin.m

    Note

    All the files are stored in the src/ios folder of the plugin repository.

  5. Open the config.xml file you find in the root of the Xcode project and add an entry to enable the plugin.
    <plugin name='PushPlugin' value='PushPlugin' />
  6. Change the directory to platforms/android/src and then copy to it the files you find in the src/android folder of the plugin repository.
  7. Go to the res/xml folder, open the config.xml file, and add the plugin to the Android project configuration.
    <plugin name='PushPlugin' value='com.plugin.GCM.PushPlugin' />
  8. Add the PushNotification.js file you find in the www folder of the plugin repository to your project www folder.
  9. Build the app in order to check if the configuration is working properly.
    $ cordova build
  10. Go to the www folder, open the index.html file, and add a ul tag with the class logs inside the main div of the app, below the #deviceready one.
    <ul class='logs'></ul>
  11. In the same file add, immediately after the inclusion of PhoneGap, the script tag needed to embed the JavaScript interface of the plugin.
    <script type='text/javascript' src='PushNotification.js'></script>
  12. Go to the www/js folder, open the index.js file, and add in the body of the deviceready function the script needed to initialize the push notifications on Android and iOS.
    var pushNotification = window.plugins.pushNotification;

if (device.platform == 'android' || device.platform == 'Android') {
pushNotification.register(app.successHandler, app.errorHandler, {'senderID':'570783355289', 'ecb': 'app.onNotificationGCM'});
    } else {
    pushNotification.register(app.tokenHandler,app.errorHandler, {'badge': 'true', 'sound':'true',"alert":'true','ecb':'app.onNotificationAPN'});	
   
}
  13. Define a function named addLogs in order to append the logs to the device screen.
    addLogs: function(message, data){

    var logs = document.querySelector('.logs'),

    var log = document.createElement('li'),
    log.innerHTML = message + data;

    logs.appendChild(log);

}
  14. Define the successHandler function to be used in Android to notify the user about the successful registration of the device to the Google Cloud Messaging service.
    successHandler: function (result){

    navigator.notification.vibrate(300);
    app.addLogs('success: ', result);

}
  15. Define the tokenHandler function to be used in iOS to notify the user about the successful registration to the Apple Push Notification service.
    tokenHandler: function  (result) {

    navigator.notification.vibrate(300);app.addLogs('token: ', result);

}
  16. Define the errorHandler function used on both platforms that logs an eventual error.
    errorHandler: function  (error) {

    navigator.notification.vibrate(300);
    app.addLogs('error: ', error);

    }
  17. Define the onNotificationAPN function that will be executed in iOS each time a push notification has been received.
    onNotificationAPN: function (evt) {

    if (evt.alert) {

        navigator.notification.vibrate(300);
        app.addLogs('EVENT -> RECEIVED: ', evt.alert);

    }
}
  18. Define the onNotificationGCM function that will be executed in iOS each time a push notification has been received.
    onNotificationGCM: function (evt) {

    navigator.notification.vibrate(300);
    app.addLogs('EVENT -> RECEIVED: ', evt.event); 
}
  19. Build the project and install the app on an iOS and on an Android device.
  20. Go to the Example/server folder of the plugin repository and open the files pushGCM.rb and pushAPNS.rb in a text editor. In the pushGCM.rb file, add the API key you created with Google Cloud Messaging and the device registration ID. In the pushAPNS.rb file, add the developer certificate password and the path to the certificate.
  21. Open the command-line tool and install the gem pushmeup.
    $ gem install pushmeup
  22. Run the Ruby file from your command-line tool.
    $ ruby pushGCM.rb
$ ruby pushAPNS.rb

What just happened?

You developed an app able to react to a push notification on iOS and Android, and your device should have received another notification when the app is paused.

What just happened?

Pop quiz – getting started with PhoneGap plugins

Q1. How can you write a plugin for multiple platforms?

  1. Using JavaScript.
  2. Using JavaScript and the target platform native code.
  3. Using the PhoneGap build services.

Q2. Is a Plugin asynchronous?

  1. No.
  2. Yes.
  3. It depends on the target platform.

Have a go hero – improving the push notifications example

Create a sample app that is able to send SMSes using the SMS-plugin you can find at https://github.com/phonegap/phonegap-plugins for Android and iOS. When installing the plugin, check whether there are compatibility issues with your current version of PhoneGap and eventually fix them.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.149.243.32