OneSignal Angular Sample

Intégration de la notification push dans Angular

Notes:

• Créer un compte Onesignal gratuit
• Suivez les étapes de la configuration typique
• Ce tutoriel nécessite des connaissances de base sur Angular
• Angular 11.2.9
• Nodejs version 14.0

Repo:

• Configuration rapide
• Configuration avancée

Démo en direct

Créer un nouveau projet angulaire à l'aide de la CLI angulaire

Configuration de la notification poussée rapide dans Angular

Dans votre dossier de projet, accédez au fichier index.html et à l'intérieur de la balise HTML Head , collez le code suivant et ajoutez votre ID d'application.

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

Maintenant, téléchargez les fichiers SDK dans votre ordinateur et insérez-les à l'intérieur du dossier SRC de votre application angulaire.

Après avoir inséré les fichiers SDK dans votre projet angulaire, nous devons sensibiliser Angular à ces fichiers SDK. Ouvrez le fichier angular.json et localisez la propriété d'architecture et à l'intérieur de cette propriété, vous verrez une autre propriété appelée actifs, en bas de la propriété Ajoutez l'emplacement des SDKS de l'OneSignal.

Votre angulaire.json devrait ressembler à ceci:

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

Configuration avancée de la notification push en angulaire

Si vous souhaitez passer les notifications push au niveau supérieur et avoir la possibilité d'utiliser OneSignal sur toute votre application angulaire, je vais vous montrer comment le faire.

Remarque: Si vous n'avez pas terminé la configuration de la notification rapide rapide, assurez-vous de le faire.

À l'intérieur de votre fichier index.html , débarrassez-vous de ce code:

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

}

Dans votre dossier racine, créez un nouveau fichier appelé Globals.ts . I Ce fichier vous insérez le code suivant:

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

Le code ci-dessus nous permettra d'utiliser l'objet window.OneSignal . Maintenant que vous avez créé le fichier global.ts , importez-le dans votre fichier polyfills.ts .

 import 'globals' ;

Il est temps de créer notre service Signal à l'intérieur de notre application angulaire. J'en ai créé un en utilisant la CLI angulaire. Le nom de mon fichier de service est one-signal.service.ts . Après avoir créé le service, vous créerez une méthode onLoad() qui garantira que notre script SDK que nous avons ajouté à l'intérieur de l' index.html a été chargé car il s'agit d'une opération asynchrone.

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

Dans le service OnesIgnal, créez une nouvelle méthode appelée onInit() . À l'intérieur de la méthode, vous appellerez le onLoad() et vous initialiserez Onesignal.

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

Enfin, ouvrez votre fichier App ..Component.ts et injectez les services OnesIgnal que vous venez de créer. À l'intérieur de la gOnInit() appelez la méthode onInit() de votre service Onesignal. Votre fichier ressemblera à ceci:

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

Maintenant, vous pouvez continuer à étendre votre code pour utiliser différentes fonctionnalités du SDK OnesIgnal sur votre application angulaire. Pour en savoir plus sur le Web Push SDK, visitez les documents Onesignal.