OneSignal Angular Sample 다운로드 - OneSignal Angular Sample 소스 코드 다운로드

OneSignal Angular Sample

웹사이트 데이터

1.0.0

다운로드

각도에서 알림 통합을 푸시하십시오

참고 :

무료 Onesignal 계정을 만듭니다
일반적인 설정의 단계를 따르십시오
이 튜토리얼에는 Angular에 대한 몇 가지 기본 지식이 필요합니다
각도 11.2.9
nodejs 버전 14.0

Repo :

빠른 설정
고급 설정

라이브 데모

Angular CLI를 사용하여 새로운 각도 프로젝트를 만듭니다

각도의 빠른 푸시 알림 설정

프로젝트 폴더에서 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 프로젝트에 삽입 한 후에는 SDK 파일을 각도로 인식해야합니다. Angular.json 파일을 열고 아키텍처 속성과 해당 속성 내부를 찾으십시오. 자산이라는 다른 속성이 표시됩니다.

Angular.json은 다음과 같습니다.

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

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 서비스를 만들 시간. 각도 CLI를 사용하여 하나를 만들었습니다. 내 서비스 파일의 이름은 one-signal.service.ts 입니다. 서비스를 작성한 후에는 index.html 내부에 추가 된 SDK 스크립트가 비동기 조작이므로로드되었는지 확인하는 onLoad() 메소드를 만듭니다.

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

OneSignal Service에서 onInit() 라는 새로운 메소드를 만듭니다. 메소드 내부에서는 onLoad() 호출하면 OneSignal을 초기화합니다.

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

마지막으로 app.component.ts 파일을 열고 방금 만든 OneSignal 서비스를 주입하십시오. gOnInit() 내부에서 onesignal 서비스에서 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 ( ) ;
  }
}