2015-04-16 47 views
11

Attualmente sto lavorando su un piccolo progetto di app per imparare e provare react-native su iOS. Ho una certa esperienza con parse (parse.com) e mi piacerebbe integrare la parse nella nuova app. Al momento, non ho problemi, incluso il parsing js in nativi reattivi. Sono in grado di accedere con account, ecc. Ora ho bisogno di inviare notifiche push a un certo numero di utenti (non tutti gli utenti).react-native: notifiche push + parsing

Quello che non capisco è come le notifiche push dovrebbero funzionare con react-native e analisi. Di solito, collegherei un'installazione del dispositivo con un ID utente e quindi invio una spinta a un certo numero di utenti (che significa ai dispositivi con l'installazione corrispondente). La guida nativa del reagente (https://facebook.github.io/react-native/docs/pushnotificationios.html#content) non menziona nulla del genere. E anche se fornisce la guida di analisi come riferimento, non riesco a vedere come dovrei essere in grado di inviare push tramite parse. La guida lascia molte informazioni anche a desiderare. A quale fonte si iscrivono questi "ascoltatori"? Da quale server invierò notifiche ecc.?

Come ho capito, parse js non è in grado di leggere l'installazione corrente. Esito ad aggiungere Parse iOS anche al progetto. Questo sembra innaturale e non dovrebbe essere una cosa necessaria da fare anche se mi permetterebbe di leggere l'installazione corrente. (ma ancora analizzare js non è in grado di registrare quell'installazione per iscriversi alle notifiche push).

A questo punto, mi sento un po 'perso. Questa informazione (https://news.ycombinator.com/item?id=9271687) mi dice che dovrebbe essere possibile in qualche modo. Non riesco proprio a capire come :(

La speranza che qualcuno mi può aiutare in questo. Qualche consiglio sarebbe veramente apprezzato.

+0

ho fatto con questa guida [link] (https://www.parse.com/docs/push_guide#top/iOS) – rob180

+1

ringrazio molto per la risposta. La sezione javascript di questa guida mi dice che è usata principalmente per inviare push, ma non è in grado di ricevere push (questo potrebbe essere gestito da react-native) o dispositivi di sottoscrizione a push. Dal momento che voglio minimizzare il codice objc e swift nel progetto, questo non sembra risolvere il mio problema. (nota: ho fatto tutto con swift prima, ora la sfida è quella di passare a reagire nativo) – MrMuetze

+0

@MrMuetze fortuna? Hai funzionato? Se sì, si prega di condividere come? – Nachiket

risposta

14

EDIT: react-native implementa questo comportamento per impostazione predefinita ora. La parte interessante è il listener di eventi per l'evento register che ora restituisce il token del dispositivo. La procedura è abbastanza semplice ora. Dai un'occhiata allo docs Controlla anche la risposta di JWindey. Ha alcuni punti molto importanti in loro che sono necessari per innescare effettivamente gli eventi.

Dopo un po 'e un sacco di tentativi, abbiamo trovato una risposta oggi. Questa è la nostra soluzione e sembra funzionare abbastanza bene.

vengono utilizzate le seguenti risorse:

Seguire la guida di analisi per le notifiche push (https://parse.com/tutorials/ios-push-notifications) e ottenere tutto correttamente impostato (profili, certificat es ecc.). Utilizzando il componente react-native-remote-push in seguito, non è necessario seguire i passaggi 5 e 6.

Ora aggiungere react-native-remote-push al progetto. Abbiamo dovuto apportare alcune modifiche minori al codice (principalmente relativo al codice objC legacy), ma ciò potrebbe dipendere dal tuo progetto.

Il nostro progetto ha una sorta di "pagina iniziale" che viene visualizzata ogni volta che si apre l'app. In questa pagina, ci occupiamo delle autorizzazioni di notifica push, nonché della registrazione del token del dispositivo e dell'ascoltatore per le notifiche push. Il nostro obiettivo è imitare lo stesso comportamento che avremmo ricevuto con l'analisi dell'SDK di iOS.

Abbiamo bisogno di registrare il dispositivo e iscriversi prima a un canale push. react-native-remote-push ci consente di gestire le autorizzazioni e ricevere un token dispositivo. Procediamo quindi a utilizzare questo token del dispositivo per registrare questa installazione tramite l'API Rest. Questo codice è parte della nostra chiamata componentDidMount().

var PushManager = require('./RemotePushIOS'); 
var registerInstallation = require('./Installation'); 

componentDidMount() { 
    PushManager.requestPermissions(function(err, data) { 
     if (err) { 
      console.log("Could not register for push"); 
     } else { 
      registerInstallation({ 
       "deviceType": "ios", 
       "deviceToken": data.token, 
       "channels": ["global"] 
      }); 
     } 
    }); 

    PushManager.setListenerForNotifications(this.receiveRemoteNotification); 
} 

PushManager è il componente necessario da reagire nativo-remote-push e registerInstallation è la funzione che contiene la chiamata API Rest.

/** 
* registers an installation 
* data should look like the following: 
* { 
* "deviceType": "ios", // or "android" 
* // if android is targeted set 
* // "pushType": "gcm", 
* // "GCMSenderId": "56712320625545", // whatever the later means 
* "deviceToken": "29e32a686fd09d053e1616cb48", 
* "channels": [ 
*  "" 
* ] 
* }; 
* for more information visit: 
* https://www.parse.com/docs/rest#installations-uploading 
*/ 
var registerInstallation = function(data) { 
    var url = "https://api.parse.com"; 
    url += "/1/installations"; 
    fetch(url, { 
     method: 'post', 
     headers: { 
      'Accept': 'application/json', 
      'X-Parse-Application-Id': PARSE_APP_ID, 
      'X-Parse-REST-API-Key': PARSE_REST_KEY, 
      'Content-Type': 'application/json' 
     }, 
     body: JSON.stringify(data) 
    }) 
    .then(processStatus) 
    .then(parseJson) 
    .catch(error); 
}; 

module.exports = registerInstallation; 

"processStatus", "parseJson" e "errore" sono solo alcune piccole funzioni che gestiscono il risultato della chiamata API. Posso fornire maggiori dettagli se necessario. Questa funzione ci consente di aggiungere molte informazioni tramite l'oggetto "dati", come userid, versione dell'app, versione di analisi ecc., Proprio come sei abituato a usare l'SDK di iOS. Abbiamo solo un esempio di base che funziona in questo momento, ma dovrebbe essere facile estenderlo su questa base. Questo passaggio è stato molto importante per noi, perché è necessario associare ogni installazione a un determinato utente.

Dovresti essere in grado di ricevere le notifiche push ormai. Puoi gestirli in una funzione "receiveRemoteNotification" che funge da ascoltatore. Una funzione di base viene fornita sul sito Web del componente react-native-remote-push.

Spero di poter condividere alcune informazioni su questo argomento. Se dovessi entrare nel dettaglio di alcune parti, aggiungerò volentieri qualche altra informazione.

+0

grazie mille! Questo ha funzionato per me, anche se ho usato il PushNotificationIOS, ma il tuo codice era super-utile :-) –

+0

Ho usato la tua risposta e funziona. tuttavia ho emesso il numero di badge di resettaggio. Ho seguito Parse ios sdk e aggiunto codice di reset del badge in - (void) applicationDidBecomeActive: (applicazione UIApplication *) {... ma non funziona come spiegato. hai qualche suggerimento? –

+0

Siamo spiacenti, non ho ancora esaminato i numeri di badge. Non posso aiutarti a questo punto. – MrMuetze

5

ho fatto qualche indagine con il Parse + combinazione di reagire nativo e lo hanno lavorando.

si deve aggiungere il Parse SDK (seguire la guida) al progetto, e collegare tutte le librerie necessarie

non dimenticare di aggiungere i passi al punto 5:.. https://parse.com/tutorials/ios-push-notifications

Poi aggiungi RCTPushNotificatio nManager.h + m (da react-native/Libraries) al tuo progetto. Successivamente, aggiungi quanto segue in AppDelegate.m:

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo { 
[[NSNotificationCenter defaultCenter] postNotificationName:@"RemoteNotificationReceived" 
                object:self 
                userInfo:userInfo]; 
} 

Che dovrebbe farlo.

+0

Corrispondimi se ho torto, ma in questo caso non hai l'utente assegnato all'installazione di un dispositivo, vero? – MrMuetze

+0

Questa è la parte mancante nei documenti! Molte grazie. – eluleci

1

Il PushNotificationIOS ufficiale ha l'evento register da cui è possibile ottenere il token. Quindi, avendo l'API REST di MrMuetze, potrei installare il dispositivo su Parse.

PushNotificationIOS.addEventListener('register', function(token){ 
registerInstallation({ 
    "deviceType": "ios", 
    "deviceToken": token, 
    "channels": ["global"] 
}) 
});