Ionic 2 — Push Notification com OneSignal

As Push Notifications são requisitos quase que obrigatórios, quando estamos falando de desenvolvimento de aplicativos. O OneSignal é um serviço grátis, sem limites, utilizado por grandes players do mercado como Uber, Wix, Adobe.

Já trabalhei com o Ionic Push, serviço fornecido pela própria empresa do Ionic, porém tem limites, não é tão fácil de integrar e quando estava utilizando tivemos vários problemas de instabilidade no serviço.

O objetivo desse post é passar um tutorial passo a passo de como fazer para realizar as Push Notifications com OneSignal.

1 — Crie uma conta no OneSignal

2 — Adicione uma nova aplicação

3 — Depois de criado, vá no menu App Settings e clique na linha do Android em Configure

4 — Agora você deve criar uma conta no Firebase Console (Antigo Google GCM), onde agora o Google está concentrando toda sua parte relacionada a aplicações mobile. Clicar em Ir para Console

5 — Clique em Add Project e cadastre o nome do seu projeto e a localização

6 — Agora vamos pegar os dados que precisamos para cadastrar no OneSignal. Clique no ícone de configuração ao lado de Overview e depois clique em Project Settings

7 — Clique na aba de Cloud Messaging e copie as chaves Server Key (no One Signal está como Google Server API Key) e Sender ID (no OneSignal está como Google Project Number)

8 — Volte na tela do passo número 3 e registre as informações conforme apresentado acima.

9 — Agora vamos criar nossa aplicação Ionic de exemplo e adicionar a plataforma Android:

$ ionic start PushExemplo --v2
$ cd PushExemplo
$ ionic platform add android

10 — Adicionar o Ionic Native e o Plugin do Cordova do OneSignal

$ ionic cordova plugin add onesignal-cordova-plugin --save
$ npm install --save @ionic-native/onesignal

OBS: Não irá funcionar em emulador ou no browser, apenas no dispositivo Android

11 — No arquivo app/app.module.ts adicione o OneSignal como provider

providers: [
  StatusBar,
  SplashScreen,
  OneSignal,
  {provide: ErrorHandler, useClass: IonicErrorHandler}
]

12 — Agora precisaremos do API Key do OneSignal. Vá no menu App Settings -> Keys & Ids e Guarde a OneSignal App ID

13 — No seu app/app.component.ts modifique para adicionar as funções do OneSignal:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';
import {OneSignal} from "@ionic-native/onesignal";

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public oneSignal : OneSignal ) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();


      //Aqui vocë coloca os dados que coletamos no passo 12 e 7
      this.oneSignal.startInit("ADICIONE_SEU_ONESIGNAL_APP_ID", "ADICIONE_SEU_SERVER_ID");

      //Aqui é caso vocë queria que o push apareça mesmo com o APP aberto
      this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.Notification);

      //Aqui você vai tratar o recebimento do push notification com todos os dados
      this.oneSignal.handleNotificationOpened().subscribe(data => {

        console.log("Dados do Push", data);

      });

      this.oneSignal.endInit();
    });
  }
}

14 — Agora vamos rodar o aplicativo com serve e console log para conseguirmos ver os dados do push que chegaram

$ ionic run android -l -s -c

15 — Agora basta entrar no menu New Message do OneSignal e enviar uma notificação :)