OneSignal Angular Sample

Интеграция уведомлений push в угловой

Примечания:

• Создать бесплатную учетную запись OneSignal
• Следуйте этапам типичной установки
• Этот урок требует некоторых базовых знаний по угловым
• Угловой 11.2.9
• Nodejs версия 14.0

Репо:

• Быстрая настройка
• Расширенная настройка

Живая демонстрация

Создайте новый угловой проект, используя Angular CLI

Быстрая настройка уведомлений

В папке проекта перейдите в файл index.html и внутри тега HTML Head , вставьте следующий код и добавьте свой идентификатор приложения.

 < 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 на вашем компьютере и вставьте их в папку SRC вашего углового приложения.

После того, как вы вставили файлы SDK в свой угловой проект, нам нужно знать угловые знания об этих файлах SDK. Откройте файл angular.json и найдите свойство архитектуры, а внутри этого свойства вы увидите другое свойство, называемое активами, в нижней части собственности добавьте местоположение OneSignal SDK.

Ваш Angular.json должен выглядеть так:

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

Усовершенствованная настройка уведомлений

Если вы хотите поднять уведомления Push на следующий уровень и иметь возможность использовать 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 ;
    }
}

Приведенный выше код позволит нам использовать объект window.OneSignal без необходимости видеть ошибки TS и компилятора. Теперь, когда у вас создан файл Global.ts , импортируйте его в свой файл polyfills.ts .

 import 'globals' ;

Время создать нашу службу OneSignal внутри нашего углового приложения. Я создал один, используя угловой CLI. Имя моего файла службы- One-signal.service.ts . После создания сервиса вы создадите метод onLoad() , который обеспечит загрузку наш сценарий SDK, который мы добавили внутри Index.html , с тех пор, как он является асинхронной операцией.

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 и введите только только что созданные услуги OneSignal. Внутри gOnInit() вызовите метод onInit() из вашей службы OneSignal. Ваш файл будет выглядеть так:

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

Теперь вы можете продолжать расширять свой код, чтобы использовать различные функции OneSignal SDK в вашем угловом приложении. Чтобы узнать больше о Web Push SDK, посетите документы OneSignal.