OneSignal Angular Sample

Integrasi Pemberitahuan Push dalam Angular

Catatan:

• Buat akun Onesignal gratis
• Ikuti langkah -langkah pengaturan khas
• Tutorial ini membutuhkan beberapa pengetahuan dasar tentang sudut
• Angular 11.2.9
• NodeJS Versi 14.0

Repo:

• Pengaturan Cepat
• Pengaturan Lanjutan

Demo langsung

Buat Proyek Angular Baru Menggunakan CLI Angular

Pengaturan pemberitahuan dorongan cepat dalam sudut

Di folder proyek Anda, navigasikan ke file index.html , dan di dalam tag html head , tempel kode berikut dan tambahkan ID aplikasi Anda.

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

Sekarang, unduh file SDK di komputer Anda dan masukkan di dalam folder SRC aplikasi Angular Anda.

Setelah Anda memasukkan file SDK ke dalam proyek Angular Anda, kami perlu membuat sudut sadar akan file SDK tersebut. Buka file angular.json dan temukan properti arsitektur dan di dalam properti itu Anda akan melihat properti lain yang disebut aset, di bagian bawah properti menambahkan lokasi SDK Onesignal.

Angular.Json Anda seharusnya terlihat seperti ini:

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

Pengaturan Pemberitahuan Push Lanjutan di Angular

Jika Anda ingin membawa pemberitahuan dorong ke tingkat berikutnya dan memiliki kemampuan untuk menggunakan Onesignal di seluruh aplikasi sudut Anda, saya akan menunjukkan kepada Anda bagaimana melakukannya.

Catatan: Jika Anda belum menyelesaikan pengaturan pemberitahuan push cepat, pastikan untuk melakukannya.

Di dalam file index.html Anda, singkirkan kode ini:

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

}

Di folder root Anda, buat file baru yang disebut Globals.ts . I File ini Anda akan memasukkan kode berikut:

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

Kode di atas akan memungkinkan kami menggunakan objek window.OneSignal tanpa harus melihat kesalahan TS dan kompiler. Sekarang setelah Anda membuat file globals.ts , impor ke file polyfills.ts Anda.

 import 'globals' ;

Saatnya membuat layanan Onesignal kami di dalam aplikasi Angular kami. Saya telah membuat satu menggunakan CLI sudut. Nama file layanan saya adalah satu-sinyal.service.ts . Setelah membuat layanan, Anda akan membuat metode onLoad() yang akan memastikan bahwa skrip SDK kami yang kami tambahkan di dalam index.html telah dimuat karena ini merupakan operasi async.

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

Dalam Layanan Onesignal, buat metode baru yang disebut onInit() . Di dalam metode Anda akan memanggil onLoad() dan Anda akan menginisialisasi OneSignal.

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

Akhirnya, buka file app.component.ts Anda dan suntikkan layanan OneSignal yang baru saja Anda buat. Di dalam gOnInit() Hubungi metode onInit() dari layanan OneSignal Anda. File Anda akan terlihat seperti ini:

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

Sekarang, Anda dapat terus memperluas kode Anda untuk memanfaatkan berbagai fitur SDK Onesignal di seluruh aplikasi Angular Anda. Untuk mempelajari lebih lanjut tentang dorongan web SDK, kunjungi dokumen OneSignal.