IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

IMPORTANT: https://developers.google.com/cloud-messaging/http-server-ref#error-codes Desde setembre de 2016 ja no es poden crear més server API keys des de la consola de Google! CAl utilitzar Firebase i las seva consola

https://console.firebase.google.com/

Podeu utilitzar l'importador per importar projectes antics de GCM

Recurs destacat: https://github.com/macdonst/push-workshop

Instal·lació

Afegiu a config.xml:

   <plugin name="cordova-plugin-statusbar" spec="~2.1.0" />
    <plugin name="phonegap-plugin-push" spec="~1.5.3" />

I/o instal·leu el plugin amb:

$ cordova plugin add cordova-plugin-statusbar phonegap-plugin-push

Configuració de l'status Bar

Afegir a config.xml:

 <preference name="StatusBarOverlaysWebView" value="false" />
 <preference name="StatusBarBackgroundColor" value="#ee6e73" />
 <preference name="StatusBarStyle" value="blacktranslucent" />

Intro

La majoria del codi proporcionat a aquesta pàgina es basa en l'exemple:

http://macdonst.github.io/push-workshop/

I podeu trobar el codi a Github:

https://github.com/macdonst/push-workshop

Els requeriments previs per entendre aquest article són:


Les solucions es troben a una carpeta anomenada solutions

Codi

IMPORTANT: el codi s'ha d'executar un cop el dispositiu estigui preparat, és a dir dins del handler de l'esveniments onDeviceReady (com totes les apps híbrides)

El codi té les següents parts/fases:

  • Registre
  • Rebre notificacions
  • Codi de servidor: enviar notificacions amb node-gcm
  • Activar el poder rebre notificacions en segon terme

Registre

http://macdonst.github.io/push-workshop/module2.html

Afegim a l'objecte app un objecte anomenarem push:

 app.push = PushNotification.init({
     "android": {
         "senderID": "Your GCM ID"
     },
     "ios": {
       "sound": true,
       "vibration": true,
       "badge": true
     },
     "windows": {}
 });

Com podeu veure aquí aprofitem per configurar les múltiples plataformes, a l'exemple només farem Android.

Ara cal configurar els esdeveniments de registre, hi ha dos caso ell registre es realitza correctament o hi ha un error:

 app.push.on('registration', function(data) {
     console.log("registration event: " + data.registrationId);
     document.getElementById("regId").innerHTML = data.registrationId;
     var oldRegId = localStorage.getItem('registrationId');
     if (oldRegId !== data.registrationId) {
         // Save new registration ID
         localStorage.setItem('registrationId', data.registrationId);
         // Post registrationId to your app server as the value has changed
     }
 });

 app.push.on('error', function(e) {
     console.log("push error = " + e.message);
 });

Utilitzem el localStorage per guardar el id de registre. És molt important tenir aquest valor (data.registrationId) per que s'utilitza per part del servidor per identificar els clients i poder enviar missatges (veure credencial regisrationTokens)

Rebre notificacions

Per rebre les notificacions:

app.push.on('notification', function(data) {
     console.log('notification event');
     var cards = document.getElementById("cards");
     var push = '<div class="row">' +
       '<div class="col s12 m6">' +
       '  <div class="card darken-1">' +
       '    <div class="card-content black-text">' +
       '      <span class="card-title black-text">' + data.title + '</span>' +
       '      <p>' + data.message + '</p>' +
       '      <p>' + data.additionalData.foreground + '</p>' +
       '    </div>' +
       '  </div>' +
       ' </div>' +
       '</div>';
     cards.innerHTML += push;
 });

L'exemple utilitza materialize

Recursos:

Enviar notificacions des del servidor utilitzant node-gcm

Exemple de codi:

// Load modules

var gcm = require('node-gcm');

// Replace these with your own values.
var apiKey = "AAAABsGN3wg:APA91bHVT9cmS_mzQ9kPyMOOQBDkg0y9O8WPNMeBJuNj1EjJtFE6gOKqDJco6qVQEwpVKc5oVZTaxrJ0a6JWpFD8KKZX0Zkl3rSSm2ydu_jzAlVsz5m5_xfEPR";
var deviceID = "fqxuab8gwFw:-p5CR5Quv3zZs4-0o9SN24sX0Ta1m6qC5tLJ9PzJ-toloEpB22QUxr8KAdJiyCymw2E_Idaz2jjloWJENi0GMATAx8xc6s7j";

var service = new gcm.Sender(apiKey);
var message = new gcm.Message();
message.addData('title', 'TITLE');
message.addData('body', 'BLA BLA BLA.');

console.log('Sending message...');
service.send(message, { registrationTokens: [ deviceID ] }, function (err, response) {
	console.log('Message sent with result:');
	if(err) console.log(err);
	else 	console.log(response);
    console.log(response)
});

On:

  • apiKey: ha de ser la credencial api key de servidor. Nota des de setembre 2016 s'ha d'obtenir a Firebase/FCM consola a la pestanya mensajeria en la nube. Si teniu un projecte existent a GCM el podeu migrar i si el feu ara nou utilitzeu directament Firebase.
  • deviceID: és la clau que s'obté al primer pas, és a dir al pas de registre de la app client un cop el dispositiu s'ha registrat correctament.

Per executar aquest codi:

$ node server/gcmService.js
Sending message...
Message sent with result:
 { multicast_id: 6710794951757919000,
  success: 1,
  failure: 0,
  canonical_ids: 0,
  results: [ { message_id: '0:1489496971767698%392b4b4bf9fd7ecd' } ] }
{ multicast_id: 6710794951757919000,
  success: 1,
  failure: 0,
  canonical_ids: 0,
  results: [ { message_id: '0:1489496971767698%392b4b4bf9fd7ecd' } ] }

Si hi ha algún error d'autenticació tornarà el codi 401. També potser que us connecteu correctament però que no proporcioneu els registration tokens correctament i donarà error InvalidRegistration:

$ node server/gcmService.js
Sending message... 
Message sent with result:
{ multicast_id: 7624883358963015000,
  success: 0,
  failure: 1,
  canonical_ids: 0,
  results: [ { error: 'InvalidRegistration' } ] }
{ multicast_id: 7624883358963015000,
  success: 0,
  failure: 1,
  canonical_ids: 0,
  results: [ { error: 'InvalidRegistration' } ] }

Vegeu també node-gcm

Enviar notificacions amb Laravel

Es pot utilitzar el sistema de notificacions de Laravel (vegeu Laravel Notifications) conjuntament amb el plugin https://github.com/laravel-notification-channels/gcm . Vegeu l'aplicació d'exemple todosVue

Notificacions en segon terme

http://macdonst.github.io/push-workshop/module5.html

Només cal afegir al codi de servidor la línia:

 message.addData('content-available', '1');

Background notifications

http://macdonst.github.io/push-workshop/module5.html

Es poden utilitzar no posant title ni message a la notificació i al ser processada en segon terme aleshores es converteixen en notificacions silencioses (l'usuari no se n'adona). PEr exemple es poden utilitzar per executar qualsevol acció com actualitzar l'aplicació vegeu el plugin phonegap-plugin-contentsync https://github.com/phonegap/phonegap-plugin-contentsync

Exemple complet propi

Client/frontend mobile amb aplicació Cordova. todosVue

Vegeu:

https://github.com/acacha/todosVue

Server/backend mobile amb aplicació Laravel. todosBackend

Vegeu:

https://github.com/acacha/todosBackend

Alumnes

Vegeu també

Enllaços externs

Codi al Github: