OneSignal Angular Sample

การรวมการแจ้งเตือนแบบพุชในเชิงมุม

หมายเหตุ:

• สร้างบัญชี Onesignal ฟรี
• ทำตามขั้นตอนของการตั้งค่าทั่วไป
• บทช่วยสอนนี้ต้องการความรู้พื้นฐานเกี่ยวกับเชิงมุม
• Angular 11.2.9
• nodejs เวอร์ชัน 14.0

repo:

• การตั้งค่าอย่างรวดเร็ว
• การตั้งค่าขั้นสูง

การสาธิตสด

สร้างโครงการเชิงมุมใหม่โดยใช้ Angular CLI

การตั้งค่าการแจ้งเตือนแบบพุชอย่างรวดเร็วในเชิงมุม

ในโฟลเดอร์โครงการของคุณนำทางไปยังไฟล์ index.html และด้านในของแท็ก HTML หัว วางรหัสต่อไปนี้และเพิ่มรหัสแอปของคุณ

 < 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 ลงในโครงการเชิงมุมของคุณแล้วเราต้องทำให้ Angular ตระหนักถึงไฟล์ SDK เหล่านั้น เปิดไฟล์ Angular.json และค้นหาคุณสมบัติสถาปัตยกรรมและภายในคุณสมบัตินั้นคุณจะเห็นคุณสมบัติอื่นที่เรียกว่าสินทรัพย์ที่ด้านล่างของคุณสมบัติเพิ่มตำแหน่งของ SDK แบบ OneSignal

angular.json ของคุณควรมีลักษณะเช่นนี้:

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

การตั้งค่าการแจ้งเตือนแบบพุชขั้นสูงในเชิงมุม

หากคุณต้องการใช้การแจ้งเตือนแบบพุชไปยังระดับถัดไปและมีความสามารถในการใช้แอพเชิงมุมทั้งหมดของคุณฉันจะแสดงวิธีการทำเช่นนั้น

หมายเหตุ: หากคุณยังไม่เสร็จสิ้นการตั้งค่าการแจ้งเตือนแบบพุชอย่างรวดเร็วโปรดตรวจสอบให้แน่ใจว่าได้ทำเช่นนั้น

ภายในของคุณ 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' ;

ถึงเวลาสร้างบริการ Onesignal ของเราภายในแอพเชิงมุมของเรา ฉันได้สร้างหนึ่งโดยใช้ CLI เชิงมุม ชื่อไฟล์บริการของฉันคือ One-signal.service.ts หลังจากสร้างบริการคุณจะสร้างวิธี onLoad() ที่จะทำให้มั่นใจได้ว่าสคริปต์ SDK ของเราที่เราเพิ่มเข้าไปใน index.html ได้รับการโหลดเนื่องจากเป็นการดำเนินการ async

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

ตอนนี้คุณสามารถขยายรหัสของคุณต่อไปเพื่อใช้ประโยชน์จากคุณสมบัติที่แตกต่างกันของ SDK OneSignal ในแอพเชิงมุมของคุณ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Web Push SDK ไปที่เอกสาร OneSignal