OneSignal Angular Sample下載 - OneSignal Angular Sample源代碼下載

OneSignal Angular Sample

網站數據

1.0.0

下載

將通知集成在角度

筆記：

創建一個免費的信號帳戶
遵循典型設置的步驟
本教程需要有關角度的一些基本知識
角11.2.9
Nodejs版本14.0

repo：

快速設置
進階設定

現場演示

使用Angular CLI創建一個新的角度項目

快速推送通知設置在Angular中

在您的項目文件夾中，導航到index.html文件以及HEAD 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文件並找到架構屬性和該屬性的內部，您將在屬性的底部看到另一個稱為資產的屬性，添加了Onessignal SDK的位置。

您的Angular.json應該看起來像這樣：

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

高級推送通知設置

如果您想將推送通知提升到一個新的水平，並且能夠在整個Angular應用程序中使用onsignal，我將向您展示如何做到這一點。

注意：如果您尚未完成快速推送通知設置，請確保這樣做。

內部index.html文件，刪除此代碼：

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

}

在您的根文件夾中，創建一個名為Globals.ts的新文件。我這個文件您將插入以下代碼：

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

上面的代碼將允許我們使用window.OneSignal對象，而無需看到任何TS和編譯器錯誤。現在您已經創建了Globals.ts文件，將其導入到您的polyfills.ts文件中。

 import 'globals' ;

是時候在Angular應用程序內部創建我們的Onesignal服務了。我已經使用角CLI創建了一個。我的服務文件的名稱是一信號。 Service.ts 。創建服務後，您將創建一個onLoad()方法，該方法將確保我們在index.html中添加的SDK腳本已加載，因為它是異步操作。

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

在OneSignal服務中，創建一個名為onInit()的新方法。在方法內部，您將調用onLoad() ，然後初始化onsignal。

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

最後，打開您的app.component.ts文件，並註入您剛創建的OneSignal服務。 gOnInit()內部從OneSignal Service調用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 ( ) ;
  }
}