[轉]PhoneGap使用PushPlugin插件實現消息推送


本文轉自:http://my.oschina.net/u/1270482/blog/217661

http://devgirl.org/2013/07/17/tutorial-implement-push-notifications-in-your-phonegap-application/

 

概括

      Android設備通過GCM服務來接收推送消息,而iOS設備這從蘋果的APN服務獲取。雖然按照負載來說這是兩種不同的服務,但是證書都在從第三方接收消息的時候是需要作為一個存儲和轉發類型的服務。辨別接收者並傳遞下去。在接受端,你的應用已經注冊來接收他們,並檢查返回內容和相應的操作。消息的接收方式是應用代碼里的注冊和用戶設備關於消息設定的融合。

開始

       有一個叫PushPlugin的官方插件可以用來進行消息的推送,而且是PhoneGap支持的。此教程里就是使用這個插件,完整的項目源碼在下面鏈接處:

https://github.com/hollyschinsky/PushNotificationSampleApp

       注意此代碼跟處理iOS的消息推送是一樣的。只需要通過PhoneGap Build創建自己的推送消息證書並測試就行了。

此教程不會深入探討創建GCM或者ADP應用的建立,可以在下面文字處了解詳細內容。

· Andr消息推送

· iOS消息推送

       此教程中我只會集中講解AndroidGCM服務,然后下面的是關於iOS的消息推送。

· iOS Push Notifications

· Push Notifications Plugin Support added to PhoneGap Build

Android學前知識

      · Google雲消息項目ID

      · 項目ID對應的Google雲消息API

iOS學前知識

      · ADP上用來配置消息推送的應用ID

      · SSL證書以及私有密鑰

第一部分:配置應用來使用PushPlugin

       此部分我們會在應用中添加對PushPlugin的支持。我們會使用PhoneGap Build,這樣我們只需要在項目根里的www/config.xml文件里做插件的引用,並指出PushNotifications.js文件的腳本標簽即,PhoneGap Build會在構建的時候注入。

       將下面腳本加入index.html中來引用PushNotification Plugin

?
1
<script type= "text/javascript"  src= "PushNotification.js" ></script>

 將下面的代碼加到www/config.xml文件里,這樣PhoneGap Build就會知道注入PushPlugin代碼。

?
1
<gap:plugin name= "com.adobe.plugins.pushplugin"  />

 

       不要跟指明每個平台的配置文件向混淆。只需要在PhoneGap Build工作是使用www文件夾即可。

第二部分:利用Google的雲服務信息服務來注冊應用

        此部分,我們將利用Google的雲信息服務來接受推送的消息,以便注冊我們的應用。

        首先創建一個賬戶和帶GCM服務的項目。項目建立好之后,會有一個項目ID。可以在GCM的控制台里查看此ID,當然也會追加例如https://code.google.com/apis/console/#project:824841663931這樣的URL。注意下此處,后面注冊調用的時候需要使用。

        1. 在編輯器里打開基本應用,到www/js/index.js文件下。在receivedEvent函數里,添加下面的代碼來獲取推送消息插件對象的引用和對register函數的調用。需要將成功和出錯的回調函數傳入進去,還需要包括之前建立項目時賦值的GCM的發送者ID等參數以及一個從GCM獲得信息的回到函數來作為ecb的參數。

?
1
2
var  pushNotification = window.plugins.pushNotification;
pushNotification.register( this .successHandler,  this .errorHandler,{ "senderID" : "824841663931" , "ecb" : "app.onNotificationGCM" });

        下面代碼的每個回調函數都引用了上述的注冊調用。

       1. 以添加的成功處理句柄開始,此句柄將在注冊成功的時候調用。結果包含注冊對象,我們會在提示框里顯示。

?
1
2
3
[backcolor=white !important]successHandler: function(result) {
[backcolor=white !important]    alert( 'Callback Success! Result = ' +result)
[backcolor=white !important]},

       2. 之后添加錯誤處理函數,當注冊請求出錯的時候會調用此函數。此處理函數中我們將簡單顯示收到的錯誤。

?
1
2
3
errorHandler: function (error) {
     alert(error);
},

       3. 最后添加回調函數,此函數在關閉文檔之前,收到index.js文件結尾的GCM的消息時候調用。在我這里,我命名為onNotificationGCM作為回調並在iOS里者相同應用添加推送消息的支持,同樣也需要一個不同的回調函數。此函數檢測收到的事件並簡單的將內容用提示框顯示出來。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
onNotificationGCM:  function (e) {
         switch ( e.event )
         {
             case  'registered' :
                 if  ( e.regid.length > 0 )
                 {
                     console.log( "Regid "  + e.regid);
                     alert( 'registration id = ' +e.regid);
                 }
             break ;
  
             case  'message' :
               // this is the actual push notification. its format depends on the data model from the push server
               alert( 'message = ' +e.message+ ' msgcnt = ' +e.msgcnt);
             break ;
  
             case  'error' :
               alert( 'GCM error = ' +e.msg);
             break ;
  
             default :
               alert( 'An unknown GCM event has occurred' );
               break ;
         }
     }

 

       你可以手動在PhoneGap Build外添加插件到自己的應用里,在PushPluginreadme里查看更多內容。

運行應用

       現在當你運行應用的時候你會看到一個調用去注冊你的android設備,收到一個如下的提示框。

1.png

        現在我們的應用已經准備好接受從GCM那里推送的消息了。我們使用簡單的JS代碼來測試我們發送的信息。有一個叫node-gcm的庫,我們可以用來發送消息給GCM。我們只是需要令牌或者我們注冊時返回的注冊ID,另外需要有一個GCM與我們項目相關的API密鑰。

       1. 安裝node-gcm模塊。此庫用來處理了與GCM的通信並提供方便的類來發送消息。你必須安裝node.js,這樣此庫才能工作。

       2. 到GCM的控制台,找到服務器API密鑰。如果沒有創建,這需要現在創建。

       3. 獲得從控制台返回的應用注冊ID。我喜歡使用Androidadb工具,這樣我就可以允許日子監控來在應用運行的時候查看控制台。假設你有了android-sdk工具和環境變量里設置的平台工具,你就可以輕易的輸入adb logcat來顯示設備的日子。

       4. 打開編輯器,創建一個叫notify.js的文件,在下面粘貼,代替發送者密鑰以及你自己的注冊ID

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var  gcm = require( 'node-gcm' );
var  message =  new  gcm.Message();
  
//API Server Key
var  sender =  new  gcm.Sender( 'AIzaSyCDx8v9R0fMsAsjoAffF-P3FCFWXlvwLhg' );
var  registrationIds = [];
  
// Value the payload data to send...
message.addData( 'message' , "\u270C Peace, Love \u2764 and PhoneGap \u2706!" );
message.addData( 'title' , 'Push Notification Sample'  );
message.addData( 'msgcnt' , '3' );  // Shows up in the notification in the status bar
message.addData( 'soundname' , 'beep.wav' );  //Sound to play upon notification receipt - put in the www folder in app
message.timeToLive = 3; // Duration in seconds to hold and retry to deliver the message in GCM before timing out. Default 4 weeks if not specified
  
// At least one reg id required
registrationIds.push( 'APA91bwu-47V0L7xB55zoVd47zOJahUgBFFuxDiUBjLAUdpuWwEcLd3FvbcNTPKTSnDZwjN384qTyfWW2KAJJW7ArZ-QVPExnxWK91Pc-uTzFdFaJ3URK470WmTl5R1zL0Vloru1B-AfHO6QFFg47O4Cnv6yBOWEFcvZlHDBY8YaDc4UeKUe7ao' );
  
/**
  * Parameters: message-literal, registrationIds-array, No. of retries, callback-function
  */
sender.send(message, registrationIds, 4,  function  (result) {
     console.log(result);
});

       5. 在腳本建立的地方輸入下面命令來運行代碼和發送消息推送。         node notify.js
       你應該聽到消息,並在Android設備的狀態條上可以看到。

2.png

 

       點擊之后,應用會打開,你就會看到冒出來的信息了。

3.png

其他需要注意的事情

      · 可以PushPluginAPI來設置標識數量

?
1
pushNotification.setApplicationIconBadgeNumber( this .successHandler, 0);

      · 可以指定一個自定義聲音來播放,包括www文件夾里的聲音文件,可以從服務端進行指定。

      還有其他的第三方的消息推送插件服務可以使用,例如Urban AirshipPushWoosh等類似的API調用,都可以用,但是當前還是不支持PhoneGap Build

Android iOS之間的區別

       1. Android的負載為4KiOS的則為256字節。

       2. iOS需要額外從ADP來獲得消息推送的驗證應用ID,也需要一個唯一的SSL證書,這樣服務端才能確認。

       3. 如果設備ID更改或者是無效的,GCM將返回一個信息進行提示,但是Apple這需要定期ping服務器來找出設備令牌是否有效。

       4. 在消息0秒到4周之間,需要確定一個Android的生命周期。蘋果則不需要設置。

       5. 對Android設備來說需要指定一個碰撞密鑰,它用來保存信息,並且只有最后一個會發送。在iOS上這需要將多個消息發給同一個設備,如果設備不在線,者只有最后一個消息會發送。

總結

       現在你知道如果接收推送的消息,下一步就是保存從設備得到的注冊ID或者設備令牌,它們都運行你的應用,這樣你就可以在需要為應用發送消息的時候從服務端訪問它們。當然在接收到特定消息的時候你也需要添加任意的處理代碼來進行處理。

http://devgirl.org/2013/07/17/tutorial-implement-push-notifications-in-your-phonegap-application/

 

 

仿照上述示例 相應測試項目代碼:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM