Welcome

how would you rate The Holy Qura'an - Arabic ver?

Sunday, January 19, 2014

Push Notification Android - Phonegap 3.2 Plugin

I have been trying to test the native phonegap push notification on version 3.2 but almost everything I tried resulted in "Class not found" issue". After a couple of days of trials here is how I finally got it to work.


  1. Using the CLI install the push notification plugin: 
    • $ phonegap local plugin add https://github.com/phonegap-build/PushPlugin
  2. Add
     <script type="text/javascript" src="PushNotification.js"></script>  
    
    to the header of your index.html
  3. Add the following to your index.html body
               <div id="home" style="position:absolute; bottom:0; left:0; z-index:99999;">  
                    <div id="app-status-div">  
                         <ul id="app-status-ul">  
                              <li>Cordova PushNotification Plugin Demo</li>  
                         </ul>  
                    </div>  
               </div>  
    
  4. In your javascript add
     var pushNotification;  
           function onDeviceReady() {  
             $("#app-status-ul").append('<li>deviceready event received</li>');  
                         document.addEventListener("backbutton", function(e)  
                         {  
                  $("#app-status-ul").append('<li>backbutton event received</li>');  
                            if( $("#home").length > 0)  
                              {  
                                   // call this to get a new token each time. don't call it to reuse existing token.  
                                   //pushNotification.unregister(successHandler, errorHandler);  
                                   e.preventDefault();  
                                   navigator.app.exitApp();  
                              }  
                              else  
                              {  
                                   navigator.app.backHistory();  
                              }  
                         }, false);  
                         try   
                         {   
                  pushNotification = window.plugins.pushNotification;  
                  if (device.platform == 'android' || device.platform == 'Android') {  
                                   $("#app-status-ul").append('<li>registering android</li>');  
                    pushNotification.register(successHandler, errorHandler, {"senderID":"661780372179","ecb":"onNotificationGCM"});          // required!  
                              } else {  
                                   $("#app-status-ul").append('<li>registering iOS</li>');  
                    pushNotification.register(tokenHandler, errorHandler, {"badge":"true","sound":"true","alert":"true","ecb":"onNotificationAPN"});     // required!  
                  }  
             }  
                         catch(err)   
                         {   
                              txt="There was an error on this page.\n\n";   
                              txt+="Error description: " + err.message + "\n\n";   
                              alert(txt);   
                         }   
           }  
           // handle APNS notifications for iOS  
           function onNotificationAPN(e) {  
             if (e.alert) {  
                $("#app-status-ul").append('<li>push-notification: ' + e.alert + '</li>');  
                navigator.notification.alert(e.alert);  
             }  
             if (e.sound) {  
               var snd = new Media(e.sound);  
               snd.play();  
             }  
             if (e.badge) {  
               pushNotification.setApplicationIconBadgeNumber(successHandler, e.badge);  
             }  
           }  
           // handle GCM notifications for Android  
           function onNotificationGCM(e) {  
             $("#app-status-ul").append('<li>EVENT -> RECEIVED:' + e.event + '</li>');  
             switch( e.event )  
             {  
               case 'registered':  
                              if ( e.regid.length > 0 )  
                              {  
                                   $("#app-status-ul").append('<li>REGISTERED -> REGID:' + e.regid + "</li>");  
                                   // Your GCM push server needs to know the regID before it can push to this device  
                                   // here is where you might want to send it the regID for later use.  
                                   console.log("regID = " + e.regid);  
                              }  
               break;  
               case 'message':  
                    // if this flag is set, this notification happened while we were in the foreground.  
                    // you might want to play a sound to get the user's attention, throw up a dialog, etc.  
                    if (e.foreground)  
                    {  
                                        $("#app-status-ul").append('<li>--INLINE NOTIFICATION--' + '</li>');  
                                        // if the notification contains a soundname, play it.  
                                        var my_media = new Media("/android_asset/www/"+e.soundname);  
                                        my_media.play();  
                                   }  
                                   else  
                                   {     // otherwise we were launched because the user touched a notification in the notification tray.  
                                        if (e.coldstart)  
                                             $("#app-status-ul").append('<li>--COLDSTART NOTIFICATION--' + '</li>');  
                                        else  
                                        $("#app-status-ul").append('<li>--BACKGROUND NOTIFICATION--' + '</li>');  
                                   }  
                                   $("#app-status-ul").append('<li>MESSAGE -> MSG: ' + e.payload.message + '</li>');  
                                   $("#app-status-ul").append('<li>MESSAGE -> MSGCNT: ' + e.payload.msgcnt + '</li>');  
               break;  
               case 'error':  
                                   $("#app-status-ul").append('<li>ERROR -> MSG:' + e.msg + '</li>');  
               break;  
               default:  
                                   $("#app-status-ul").append('<li>EVENT -> Unknown, an event was received and we do not know what it is</li>');  
               break;  
             }  
           }  
           function tokenHandler (result) {  
             $("#app-status-ul").append('<li>token: '+ result +'</li>');  
             // Your iOS push server needs to know the token before it can push to this device  
             // here is where you might want to send it the token for later use.  
           }  
           function successHandler (result) {  
             $("#app-status-ul").append('<li>success:'+ result +'</li>');  
           }  
           function errorHandler (error) {  
             $("#app-status-ul").append('<li>error:'+ error +'</li>');  
           }  
                    document.addEventListener('deviceready', onDeviceReady, true);  
    
  5. Now go to your www/config.xml and add
     <gap:plugin name="com.phonegap.plugins.PushPlugin" />  
    
Now build and compile your project. You should get it working now.

So what's next?! When you run your app and registration is success what you need to play with is e.regid under the case: "registered".

 So what you could do is using ajax send the e.regid to a php file to store that regid in the database as an identity to this user's device.

Next you could test sending the user messages using something like:
 function send_gcm_notify($reg_id, $message) {  
      $apiKey = "AIzaSyDXlsn2rlbTxZsa3apYfQu0kaSNzzzzzag8"; //google browser api key  
      $url = 'https://android.googleapis.com/gcm/send';  
   $fields = array(  
     'registration_ids' =>; array( $reg_id ),  
     'data'       =>; array( "message" => $message ),  
   );  
   $headers = array(  
     'Authorization: key=' . $apiKey,  
     'Content-Type: application/json'  
   );  
   $ch = curl_init();  
   curl_setopt($ch, CURLOPT_URL, $url);  
   curl_setopt($ch, CURLOPT_POST, true);  
   curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);  
   curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);  
   curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);  
   curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));  
   $result = curl_exec($ch);  
   if ($result === FALSE) {  
     die('Problem occurred: ' . curl_error($ch));  
   }  
   curl_close($ch);  
   echo $result;  
  }  
 $reg_id = "APA91bxxxsszzjVXv9jW4O2mD0Nvljf_0BLzjHzCqKa-9VthTYYDqB9BfKj88Fd3234fscARTRaNsm3xKk73V-xWZIM3ETuptUFxxYVwik1234WmeABgcf_yG4Gkd0GSk3Zfydw8Cv6H3b0K";  
 $msg = "Google Cloud Messaging working well";  
 send_gcm_notify($reg_id, $msg);  

No comments:

Post a Comment