OneSignal Angular Sample

Integração de notificação de push no angular

Notas:

• Crie uma conta gratuita
• Siga as etapas da configuração típica
• Este tutorial requer algum conhecimento básico sobre angular
• Angular 11.2.9
• Nodejs versão 14.0

Repo:

• Configuração rápida
• Configuração avançada

Demoção ao vivo

Crie um novo projeto angular usando a CLI angular

Configuração rápida de notificação de push no angular

Na pasta do seu projeto, navegue até o arquivo index.html e, dentro da tag HTML da cabeça , cole o código a seguir e adicione seu ID do aplicativo.

 < script src =" https://cdn.onesignal.com/sdks/OneSignalSDK.js " async ="" > </ script >
< script >
  window . OneSignal = window . OneSignal || [ ] ;
  OneSignal . push ( function ( ) {
    OneSignal . init ( {
      appId : "YOUR-APP-ID" ,
    } ) ;
  } ) ;
</ script >

Agora, faça o download dos arquivos SDK em seu computador e insira -os dentro da pasta SRC do seu aplicativo angular.

Depois de inserir os arquivos SDK em seu projeto Angular, precisamos tornar o Angular ciente desses arquivos SDK. Abra o arquivo angular.json e localize a propriedade de arquitetura e, dentro dessa propriedade, você verá outra propriedade chamada ativos, na parte inferior da propriedade, adicione a localização dos SDKs OneSignal.

Seu angular.json deve ficar assim:

...
"assets" : [
              "src/favicon.ico" ,
              "src/assets" ,
              "src/OneSignalSDKUpdaterWorker.js" ,
              "src/OneSignalSDKWorker.js" ,
            ] ,
...

Configuração avançada de notificação de push no angular

Se você deseja levar as notificações de push para o próximo nível e ter a capacidade de usar o OneSignal em todo o seu aplicativo angular, mostrarei como fazê -lo.

NOTA: Se você não concluiu a configuração rápida de notificação de push, certifique -se de fazê -lo.

Dentro de seu arquivo index.html , livre -se deste código:

 < script >
  window . OneSignal = window . OneSignal || [ ] ;
  OneSignal . push ( function ( ) {
    OneSignal . init ( {
      appId : "YOUR-APP-ID" ,
    } ) ;
  } ) ;
</ script >

}

Na sua pasta raiz, crie um novo arquivo chamado globals.ts . I Neste arquivo, você inserirá o seguinte código:

 export { }
 
declare global {
    interface Window {
      OneSignal: any ;
    }
}

O código acima nos permitirá fazer uso do objeto window.OneSignal sem precisar ver erros de TS e compilador. Agora que você tem o arquivo globals.ts criado, importá -lo para o seu arquivo polyfills.ts .

 import 'globals' ;

Hora de criar nosso serviço de design dentro de nosso aplicativo angular. Eu criei um usando o CLI angular. O nome do meu arquivo de serviço é único.service.ts . Após criar o serviço, você criará um método onLoad() que garantirá que nosso script SDK adicionei dentro do index.html tenha sido carregado, pois é uma operação assíncrona.

async onLoad ( ) : Promise < any > {
    window . OneSignal = window . OneSignal || [ ] ;
    return new Promise ( ( resolve ) => {
      window . OneSignal . push ( function ( ) {
        resolve ( window . OneSignal ) ;
      } ) ;
    } ) ;
  }

No serviço OnSignal, crie um novo método chamado onInit() . Dentro do método, você chamará o onLoad() e você inicializará o ONSignal.

 onInit ( ) : void {
    this . onLoad ( ) . then ( ( OneSignal ) => {
      OneSignal . init ( {
        appId : "YOUR-APP-ID" ,
      } ) ;
    } )
  }

Por fim, abra seu arquivo app.component.ts e injete os serviços de indicação que você acabou de criar. Dentro do gOnInit() ligue para o método onInit() do seu serviço OneSignal. Seu arquivo ficará assim:

 import { Component , OnInit } from '@angular/core' ;
import { OneSignalService } from './one-signal.service' ;
 
 
@ Component ( {
  selector : 'app-root' ,
  templateUrl : './app.component.html' ,
  styleUrls : [ './app.component.scss' ]
} )
 
export class AppComponent implements OnInit {
  title = 'OneSignal-Angular' ;
 
  constructor ( private os : OneSignalService ) { }
  
  ngOnInit ( ) { 
    this . os . onInit ( ) ;
  }
}

Agora, você pode continuar expandindo seu código para fazer uso de diferentes recursos do SDK OneSignal em seu aplicativo angular. Para saber mais sobre o Push SDK, visite os documentos de design.