OneSignal Angular Sampleダウンロード-Onesignal OneSignal Angular Sampleソースコードダウンロード

OneSignal Angular Sample

ウェブサイトデータ

1.0.0

ダウンロード

Angularの通知統合をプッシュします

注：

無料のOnesignalアカウントを作成します
典型的なセットアップの手順に従ってください
このチュートリアルでは、Angularに関する基本的な知識が必要です
角度11.2.9
nodejsバージョン14.0

レポ：

クイックセットアップ
高度なセットアップ

ライブデモ

Angular CLIを使用して新しい角度プロジェクトを作成します

Angularのクイックプッシュ通知セットアップ

プロジェクトフォルダーで、 index.htmlファイルに移動し、ヘッドHTMLタグの内部に移動し、次のコードを貼り付けてアプリIDを追加します。

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

次に、コンピューターにSDKファイルをダウンロードし、AngularアプリのSRCフォルダーの内部に挿入します。

SDKファイルをAngularプロジェクトに挿入した後、AngularをこれらのSDKファイルを認識させる必要があります。 Angular.jsonファイルを開き、アーキテクチャプロパティを見つけ、そのプロパティの内部には、Assetsと呼ばれる別のプロパティが表示されます。

あなたのangular.jsonは次のようになるはずです：

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

Angularの高度なプッシュ通知セットアップ

プッシュ通知を次のレベルに引き上げ、Angularアプリ全体でOneSignalを使用する機能を持つ場合は、その方法を示します。

注：クイックプッシュ通知のセットアップが完了していない場合は、必ず確認してください。

内部index.htmlファイル、このコードを削除してください。

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

}

ルートフォルダーで、 Globals.tsという新しいファイルを作成します。 iこのファイルは、次のコードを挿入します。

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

上記のコードを使用すると、TSやコンパイラエラーを表示せずにwindow.OneSignalオブジェクトを使用できます。 Globals.tsファイルが作成されたので、 polyfills.tsファイルにインポートします。

 import 'globals' ;

Angularアプリ内でOneSignalサービスを作成する時間。 Angular CLIを使用して1つ作成しました。私のサービスファイルの名前は1-Signal.service.tsです。サービスを作成した後、 indec.html内で追加したSDKスクリプトが非同期操作であるためロードされていることを保証するonLoad()メソッドを作成します。

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

Onesignalサービスでは、 onInit()と呼ばれる新しいメソッドを作成します。メソッドの内部では、 onLoad()を呼び出すと、Onesignalを初期化します。

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

最後に、 app.component.tsファイルを開き、作成したばかりのoneignalサービスを挿入します。 gOnInit()の内部では、oneinignalサービスからonInit()メソッドを呼び出します。あなたのファイルは次のようになります：

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