OneSignal Angular Sample

Push -Benachrichtigungsintegration in Angular

Anmerkungen:

• Erstellen Sie ein kostenloses Onesignal -Konto
• Befolgen Sie die Schritte des typischen Setups
• Dieses Tutorial erfordert einige Grundkenntnisse über Angular
• Angular 11.2.9
• NodeJS Version 14.0

Repo:

• Schnelles Setup
• Erweitertes Setup

Live -Demo

Erstellen Sie ein neues Winkelprojekt mit der Winkel -CLI

Schnelle Push -Benachrichtigung in Angular

Navigieren Sie in Ihrem Projektordner zur Datei index.html und fügen Sie den folgenden Code ein und fügen Sie Ihre App -ID hinzu.

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

Laden Sie nun die SDK -Dateien in Ihren Computer herunter und fügen Sie sie in den SRC -Ordner Ihrer Winkel -App ein.

Nachdem Sie die SDK -Dateien in Ihr Winkelprojekt eingefügt haben, müssen wir Angular auf diese SDK -Dateien aufmerksam machen. Öffnen Sie die Angular.json -Datei und suchen Sie die Architektureigenschaft. In dieser Eigenschaft sehen Sie eine andere Eigenschaft, die als Vermögenswerte bezeichnet wird. Fügen Sie am unteren Rand der Eigenschaft den Ort der Onesignal -SDKs hinzu.

Ihr Angular.json sollte so aussehen:

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

Fortgeschrittene Push -Benachrichtigungsaufbau in Angular

Wenn Sie die Push -Benachrichtigungen auf die nächste Stufe bringen und die Möglichkeit haben möchten, Onesignal über Ihre gesamte Winkel -App zu verwenden, werde ich Ihnen zeigen, wie dies zu tun ist.

Hinweis: Wenn Sie das Schnell -Push -Benachrichtigungs -Setup nicht abgeschlossen haben, stellen Sie dies bitte sicher.

Innerhalb von Ihnen index.html -Datei finden Sie diesen Code los:

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

}

Erstellen Sie in Ihrem Stammordner eine neue Datei namens Globals.ts . I Diese Datei fügen Sie den folgenden Code ein:

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

Mit dem obigen Code können wir das window.OneSignal verwenden. Importieren Sie nun die Datei globals.ts erstellt, importieren Sie sie in Ihre Datei polyFills.ts .

 import 'globals' ;

Zeit, unseren Onesignal -Service in unserer Winkel -App zu erstellen. Ich habe eine mit der Angular CLI erstellt. Der Name meiner Dienstdatei lautet ein Signal.service.ts . Nach dem Erstellen des Dienstes erstellen Sie eine onLoad() -Methode, mit der sichergestellt wird, dass unser SDK -Skript, das wir im Index hinzugefügt haben.

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

Erstellen Sie im Onesignal -Service eine neue Methode, die onInit() aufgerufen wurde. In der Methode rufen Sie die onLoad() auf und initialisieren Onesignal.

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

Öffnen Sie schließlich Ihre Datei app.comPonent.ts und injizieren Sie die von Ihnen erstellten Onesignal -Dienste. Innerhalb der gOnInit() rufen Sie die onInit() -Methode von Ihrem Onesignal -Service an. Ihre Datei sieht so aus:

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

Jetzt können Sie Ihren Code weiter erweitern, um verschiedene Funktionen des Onesignal -SDK über Ihre Winkel -App zu verwenden. Weitere Informationen zum Web -Push -SDK finden Sie in den Onesignal -Dokumenten.