OneSignal Angular Sample

اندماج الإخطار بالضغط في الزاوية

ملحوظات:

• إنشاء حساب واحد مجاني
• اتبع خطوات الإعداد النموذجي
• يتطلب هذا البرنامج التعليمي بعض المعرفة الأساسية على الزاوي
• الزاوي 11.2.9
• الإصدار Nodejs 14.0

repo:

• إعداد سريع
• الإعداد المتقدم

عرض حي

قم بإنشاء مشروع زاوي جديد باستخدام 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 وتحديد موقع خاصية الهندسة المعمارية وداخل تلك الخاصية ، سترى خاصية أخرى تسمى الأصول ، في الجزء السفلي من الخاصية ، أضف موقع SDKs one.

يجب أن تبدو 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 . أنا هذا الملف ستقوم بإدراج الرمز التالي:

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

سيسمح لنا الرمز أعلاه بالاستفادة من window.OneSignal كائن دون الاضطرار إلى رؤية أي أخطاء TS و TS. الآن بعد أن تم إنشاء ملف globals.ts ، استيراده إلى ملف polyfills.ts الخاص بك.

 import 'globals' ;

حان الوقت لإنشاء خدمتنا الواردة داخل تطبيقنا الزاوي. لقد أنشأت واحدة باستخدام CLI الزاوي. اسم ملف الخدمة الخاص بي هو signal.service.ts . بعد إنشاء الخدمة ، ستقوم بإنشاء طريقة onLoad() التي ستضمن أن البرنامج النصي SDK الخاص بنا قد أضفنا داخل الفهرس. html تم تحميله لأنه عملية غير متزامنة.

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

في الخدمة الواسعة ، قم بإنشاء طريقة جديدة تسمى onInit() . داخل الطريقة ، سوف تتصل بـ onLoad() وستقوم بتهيئة OneSignal.

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

أخيرًا ، افتح ملف app.component.ts الخاص بك وحقن الخدمات الواضحة التي أنشأتها للتو. داخل gOnInit() استدعاء طريقة 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 ( ) ;
  }
}

الآن ، يمكنك الاستمرار في توسيع الكود الخاص بك للاستفادة من ميزات مختلفة من SDK OneSignal عبر تطبيقك الزاوي. لمعرفة المزيد حول Web Push SDK ، قم بزيارة مستندات OneSicinal.