OneSignal Angular Sample

Integración de notificación de empuje en Angular

Notas:

• Crea una cuenta de OneSignal gratis
• Siga los pasos de la configuración típica
• Este tutorial requiere algunos conocimientos básicos sobre Angular
• Angular 11.2.9
• NodeJS versión 14.0

Repo:

• Configuración rápida
• Configuración avanzada

Demostración en vivo

Cree un nuevo proyecto angular utilizando la CLI angular

Configuración de notificación de empuje rápido en Angular

En la carpeta de su proyecto, navegue al archivo index.html , y dentro de la etiqueta HTML de cabezal , pegue el siguiente código y agregue la ID de su aplicación.

 < 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 >

Ahora, descargue los archivos SDK en su computadora e insértelos dentro de la carpeta SRC de su aplicación angular.

Después de haber insertado los archivos SDK en su proyecto angular, debemos informar a Angular de esos archivos SDK. Abra el archivo angular.json y ubique la propiedad de arquitectura y dentro de esa propiedad verá otra propiedad llamada activos, en la parte inferior de la propiedad, agregue la ubicación de los SDK de Onesignal.

Tu angular.json debería verse así:

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

Configuración avanzada de notificación push en Angular

Si desea llevar las notificaciones push al siguiente nivel y tener la capacidad de usar OneSignal en toda su aplicación angular, le mostraré cómo hacerlo.

NOTA: Si no ha completado la configuración de notificación Push rápida, asegúrese de hacerlo.

Dentro de su archivo index.html , elimine este código:

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

}

En su carpeta raíz, cree un nuevo archivo llamado Globals.ts . En este archivo, insertará el siguiente código:

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

El código anterior nos permitirá utilizar el objeto window.OneSignal sin tener que ver ningún error de TS y compilador. Ahora que tiene el archivo Globals.ts creado, importárelo a su archivo PolyFills.ts .

 import 'globals' ;

Es hora de crear nuestro servicio indicativo dentro de nuestra aplicación angular. He creado uno usando la CLI angular. El nombre de mi archivo de servicio es One-Signal.Service.ts . Después de crear el servicio, creará un método onLoad() que asegurará que nuestro script SDK que agregamos dentro del index.html se haya cargado desde que se trata de una operación async.

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

En el servicio OneSignal, cree un nuevo método llamado onInit() . Dentro del método, llamará a onLoad() e inicializará Onesignal.

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

Finalmente, abra su archivo app.component.ts e inyecte los servicios de Onesignal que acaba de crear. Dentro del gOnInit() llame al método onInit() desde su servicio indicador. Su archivo se verá así:

 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 ( ) ;
  }
}

Ahora, puede seguir expandiendo su código para utilizar diferentes características del SDK de OneSignal en su aplicación angular. Para obtener más información sobre el SDK web, visite los Docios de OneSignal.