การแจ้งเตือนแบบพุชด้วย IONIC 4 และ FIREBASE CLOUD MESSAGING

ในบทช่วยสอนทีละขั้นตอนนี้ เราจะเรียนรู้วิธีสร้างและส่งการแจ้งเตือนแบบพุชจาก Firebase Cloud Messaging ไปยังแอป Ionic เราจะใช้ปลั๊กอิน FCM ดั้งเดิมของ Ionic 4 Cordova เพื่อรับการแจ้งเตือนแบบพุชในแอป Ionic 4

ตัวอย่างการแจ้งเตือนแบบพุช

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

การแจ้งเตือนแบบพุชดูคล้ายกับ SMS หรือข้อความและการแจ้งเตือนทางมือถือ อย่างไรก็ตาม พวกเขาได้รับเฉพาะผู้ใช้ที่ติดตั้งแอปของคุณเท่านั้น เกือบทุกแพลตฟอร์มมือถือรองรับการแจ้งเตือนแบบพุช เช่น iOS, Android, Fire OS, Windows และ BlackBerry

การแจ้งเตือนแบบพุชให้ข้อมูลอัปเดตแก่คุณ ไม่ว่าจะเป็น:

เบราว์เซอร์ในแอปที่ตอบสนองพื้นเมือง

ข้อเสนอล่าสุดเพื่อเพิ่มยอดขาย
ผลการแข่งขันกีฬาและข่าวสารล่าสุด
รายงานการจราจรและสภาพอากาศ
ข้อมูลการเช็คอิน การเปลี่ยนแปลง และการเชื่อมต่อเที่ยวบิน

วิชาบังคับก่อน

ในการเริ่มต้นใช้งานบทช่วยสอนการแจ้งเตือนแบบพุชของ Ionic เราต้องมีเครื่องมือ เฟรมเวิร์ก และแพ็คเกจต่อไปนี้ในคลังแสงของเรา

โหนดล่าสุด
อิออน4
เชิงมุม8
Firebase FCM
บุรุษไปรษณีย์
โปรแกรมแก้ไขข้อความ
คอร์โดวา
Ionic 4 Cordova Native FCM

หากคุณไม่มี Node.js ติดตั้งอยู่ในอุปกรณ์ของคุณ ให้ทำตามบทช่วยสอนนี้ใน: วิธีดาวน์โหลดและติดตั้ง Node.js และ npm

การตั้งค่า Firebase สำหรับ Android

ในการตั้งค่า Firebase สำหรับ Android ตรงไปที่ console.firebase.google.com และสร้างโปรเจ็กต์ Firebase

การตั้งค่า Firebase FCM สำหรับ Android

ถัดไป ป๊อปอัปแบบเต็มหน้าจอจะปรากฏขึ้นบนหน้าจอของคุณ ป้อนชื่อโครงการของคุณในฟิลด์ป้อนข้อมูล และคลิกที่ปุ่มดำเนินการต่อ

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

ในหน้าจอที่สอง คุณจะเห็นคุณลักษณะการวิเคราะห์ของ Google ที่คุณสามารถเปิดใช้งานได้ และคลิกที่ปุ่มสร้างโครงการ

Firebase Google Analytics Feautes

ในแดชบอร์ด คุณจะมีตัวเลือกในการตั้งค่าบัญชี Firebase สำหรับ iOS, Android, เว็บ, และ ความสามัคคี . คลิกที่ปุ่ม Android และคุณจะถูกเปลี่ยนเส้นทางไปยังหน้าจอที่กำหนด

Firebase Dashboard

ต่อไป เราจะเพิ่ม Firebase ลงในแอป Android ของเรา

ในการลงทะเบียนแอพให้เพิ่มชื่อแพ็คเกจ Android ในช่องป้อนข้อมูล ตัวอย่างเช่น เราป้อน com.positronx.pushnotification จากนั้นระบุชื่อเล่นของแอป (เหมือนกับชื่อโปรเจ็กต์ Ionic) อย่างไรก็ตาม เป็นค่าที่ไม่บังคับ จากนั้นคลิกที่ ลงทะเบียนแอพ ปุ่ม.

ถัดไป คุณจะเห็นหน้าจอต่อไปนี้ซึ่งอนุญาตให้คุณดาวน์โหลดไฟล์กำหนดค่า ซึ่งใช้เพื่อเรียกใช้แอปมือถือใน Android Studio หรือโปรแกรมจำลอง

คลิกที่ดาวน์โหลด google-services.json ไฟล์. เราต้องเพิ่มไฟล์นี้ลงในโฟลเดอร์พื้นฐานของแอป Ionic ของเรา

ดาวน์โหลดไฟล์ JSON บริการของ Google

คลิกที่ปุ่มถัดไปเว้นแต่คุณจะไปถึงหน้าจอสุดท้ายที่สามารถข้ามได้

เรียกใช้แอปของคุณเพื่อตรวจสอบการติดตั้ง

เราได้สร้างแอปพลิเคชัน Firebase สำหรับแพลตฟอร์ม Android เรียบร้อยแล้ว

แอปพลิเคชัน Firebase สำหรับแพลตฟอร์ม Android

สร้างแอปการแจ้งเตือนแบบพุช Ionic 4

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Ionic CLI และ Cordova เวอร์ชันล่าสุดบนอุปกรณ์ของคุณแล้ว หากไม่ได้ใช้คำสั่งด้านล่าง

sudo npm install -g cordova ionic

ตรวจสอบเวอร์ชันของ Ionic โดยรันคำสั่งต่อไปนี้

ionic -v # 5.4.15

ใช้คำสั่งเพื่ออัปเดต Ionic และ Cordova

sudo npm update -g cordova ionic

เรียกใช้คำสั่งต่อไปนี้เพื่อสร้างแอปแจ้งเตือนแบบพุช Ionic 4 Firebase ที่ว่างเปล่าใหม่

ionic start ionic-firebase-push-notification blank

เข้าไปข้างในโฟลเดอร์โปรเจ็กต์

cd ionic-firebase-push-notification

รันคำสั่งต่อไปนี้ในเทอร์มินัลเพื่อติดตั้ง lab plugin เป็นการพึ่งพา dev

npm install --save-dev @ionic/lab

เรียกใช้คำสั่งเพื่อเริ่มแอปในเบราว์เซอร์ เราจะเห็นแอปในโหมด iOS และ Android

ionic serve -l

Ionic 4 Firebase FCM ตัวอย่างการแจ้งเตือนแบบพุช

ติดตั้งและกำหนดค่า Ionic 4 Cordova Native FCM Plugin

ตอนนี้เราพิมพ์คำสั่งด้านล่างในเทอร์มินัลเพื่อ Install Google Firebase Cloud Messaging Cordova Push Plugin และปลั๊กอิน Ionic Native FCM

ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated

FCM มีฟังก์ชันพื้นฐานสำหรับ Firebase Cloud Messaging (FCM) และรองรับ iOS และ Android

npm install @ionic-native/fcm

เปิดโปรเจ็กต์ Ionic ของคุณแล้วตรงไปที่ |_+_| ไฟล์. ที่นี่คุณสามารถดูรหัสวิดเจ็ต com.positronx.pushnotification ที่มีการระบุตัวตนเฉพาะของแอปการแจ้งเตือนแบบพุช คุณต้องเพิ่มชื่อแพ็กเกจที่เรากำหนดไว้ใน Firebase

รหัสวิดเจ็ต Firebase ใน config.xml

ครั้งนี้เราจะฉีดบริการ FCM เพื่อเปิดใช้งานบริการแจ้งเตือนแบบพุชในแอป Ionic ของเราผ่าน Firebase FCM ไปที่ |_+_| ไฟล์และเพิ่มรหัสต่อไปนี้ในไฟล์โมดูลแอปหลัก

config.xml

เรานำเข้า FCM ปลั๊กอินและลงทะเบียนใน ผู้ให้บริการ อาร์เรย์

การใช้งานการแจ้งเตือนแบบพุชใน Ionic 4 พร้อม Firebase

ตอนนี้ เราจะใช้การแจ้งเตือนแบบพุชในแอป Ionic 4 Cordova ของเราผ่าน Firebase Cloud Messaging

ใส่รหัสต่อไปนี้ใน |_+_| ไฟล์.

หาซื้อได้ที่ไหน leash crypto

app.module.ts

เรานำเข้า FCM API จาก '@ionic-native/fcm/ngx' และ เราเตอร์ จาก '@angular / เราเตอร์' .

ฉีดบริการ FCM และเราเตอร์ในตัวสร้าง

เราสามารถเข้าถึงวิธีการ subscribeToTopic ผ่านแพ็คเกจ FCM และสมัครรับหัวข้อ the สมัครสมาชิกหัวข้อ() ใช้ชื่อหัวข้อเป็นพารามิเตอร์

NS fcm.getToken() วิธีส่งคืนโทเค็นของการแจ้งเตือนแบบพุช และเรากำลังแสดงโทเค็นในคอนโซล

NS fcm.onNotification() วิธีส่งคืนการแจ้งเตือนแบบพุชจาก Firebase Cloud Messaging

NS fcm.onTokenRefresh() วิธีอนุญาตให้รีเฟรชโทเค็น Firebase Cloud Messaging (FCM)

ใช้ ยกเลิกการสมัครจากหัวข้อ() วิธีการยกเลิกการสมัครจากหัวข้อจาก FCM

การส่งและรับการแจ้งเตือนแบบพุชใน Ionic 4 ผ่าน FCM

ในขั้นตอนนี้ เราจะสร้างการสร้างโปรเจ็กต์ เรียกใช้คำสั่งด้านล่างเพื่อเพิ่มแพลตฟอร์ม Android ในแอป Ionic

// app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; // FCM import { FCM } from '@ionic-native/fcm/ngx'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], providers: [ StatusBar, SplashScreen, FCM, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] }) export class AppModule {}

ในขั้นตอนนี้ เราจะเพิ่ม google-services.json ในรากของโครงการของเราและภายใน แพลตฟอร์ม/android ไฟล์โฟลเดอร์ที่เราดาวน์โหลดจาก Firebase FCM ขั้นตอนนี้มีความสำคัญ และทำให้การสื่อสารระหว่างแอป Ionic และ Firebase

เพิ่ม google-services.json ใน Ionic 4

เรียกใช้แอป Ionic ในอุปกรณ์ Android โดยใช้คำสั่งต่อไปนี้

app.component.ts

เราใช้ |_+_| แท็ก มันสร้างบิลด์โดยอัตโนมัติทันทีที่สังเกตเห็นการเปลี่ยนแปลงใด ๆ ในไฟล์แอปพลิเคชัน

ตัวอย่างการรับส่งข้อความบนคลาวด์ของ Firebase

ไปที่แดชบอร์ด Firebase ของคุณ คลิกที่ เติบโต > การส่งข้อความบนคลาวด์ เรากำหนดการแจ้งเตือนของ Firebase ที่นี่ เพิ่มชื่อการแจ้งเตือน ข้อความ แม้กระทั่งคุณสามารถส่งรูปภาพการแจ้งเตือนได้ที่นี่

คลิกที่ 'ส่งข้อความทดสอบ' ปุ่มและจะเปิดป๊อปอัปที่คุณต้องกำหนดโทเค็น Firebase Cloud Messaging เพื่อส่งการแจ้งเตือนแบบพุชไปยังแอป Ionic 4

Ionic 4 Firebase ส่งตัวอย่างการแจ้งเตือนแบบพุช

พิมพ์ chrome://inspect ในแถบที่อยู่ จากนั้นเลือกโหมดการตรวจสอบที่นั่น คุณจะเห็นโทเค็นการแจ้งเตือนแบบพุชของ Firebase ที่เราจำเป็นต้องใช้ในขั้นตอนต่อไป

โทเค็นการแจ้งเตือน FCM

เราได้ทำพิธีการทั้งหมดแล้ว และตอนนี้เราจะกดปุ่มทดสอบเพื่อส่งการแจ้งเตือนการทดสอบ

การส่งและรับการแจ้งเตือนแบบพุชใน Ionic 4

บทสรุป

การสอนแบบพุชการแจ้งเตือน Ionic 4 Firebase FCM สิ้นสุดลงแล้ว ในบทช่วยสอนนี้ เราได้เรียนรู้วิธีส่งการแจ้งเตือนแบบพุชจาก Firebase และรับการแจ้งเตือนในแอป Ionic

คุณสามารถรับรหัสที่สมบูรณ์ของบทช่วยสอนนี้เกี่ยวกับเรื่องนี้ ที่เก็บ GitHub .

#ionic #firebase #mobile-app #angular

www.youtube.com