วิธีเพิ่มการแจ้งเตือนแบบพุชไปยังแอพ Cordova สำหรับ Android

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

OneSignal & Push API ของเบราว์เซอร์ของคุณ

ฟีเจอร์ Android Push ช่วยให้แอปพลิเคชันมือถือสามารถรับข้อความ จากเซิร์ฟเวอร์ ไม่ว่าแอปมือถือกำลังทำงานหรือกำลังโหลดอยู่ วิธีนี้จะช่วยให้คุณส่งการแจ้งเตือนและอัปเดตแบบ asynchronous ไปยังผู้ใช้ที่เลือกรับ ส่งผลให้มีส่วนร่วมกับเนื้อหาใหม่ในเวลาที่เหมาะสมมากขึ้น

สิ่งที่จะบอกต่อไปนี้ จะแสดงวิธีผสานรวมการแจ้งเตือนแบบพุช OneSignal ลงในแอป Android ของคุณ และเราใช้ Cordova CLI เพื่อสร้างโปรเจค และNodeJS เวอร์ชัน 14.16 ของฉัน ส่วนแรกจะแนะนำเกี่ยวกับ วิธีการตั้งค่าบัญชี OneSignal ฟรี ส่วนที่สองครอบคลุมถึงวิธีการรวมบัญชี OneSignal ของคุณกับ Cordova

คู่มือการตั้งค่า

-ส่วนที่ 1: ตั้งค่าบัญชี OneSignal ของคุณ
-การกำหนดค่า Android
-ส่วนที่ 2: ตั้งค่าการแจ้งเตือนแบบพุชสำหรับ Android ใน Cordova
-การสร้างแอพ Cordova (Android) ของคุณ
-การเพิ่ม OneSignal ให้กับแอปพลิเคชัน Cordova ของคุณ
-ส่งการแจ้งเตือนแบบพุชครั้งแรกของคุณ

คุณยังสามารถศึกษาทรัพยากรCordova (Android) OneSignal Setup Github

ส่วนที่ 1: ตั้งค่าบัญชี OneSignal ของคุณ

เพื่อเริ่มต้นการเข้าสู่ระบบไปยังบัญชี OneSignal ของคุณหรือสร้างบัญชีฟรี จากนั้น คลิกที่ปุ่มสีน้ำเงิน New App/Website เพื่อกำหนดค่าบัญชี OneSignal ของคุณให้พอดีกับแอพหรือเว็บไซต์ของคุณ

ใส่ชื่อแอปหรือเว็บไซต์ของคุณ แล้วเลือก Google Android เป็นแพลตฟอร์มของคุณ

คลิกที่ปุ่ม สีฟ้า ถัดไป: การกำหนดค่าแพลตฟอร์มของคุณ

การกำหนดค่า Google Android FCM

ได้เวลากำหนดค่าแอป Android โดยใช้คีย์เซิร์ฟเวอร์ Firebase แอป Android ทั้งหมดต้องใช้คีย์นี้และรหัสเซิร์ฟเวอร์ หากคุณต้องการส่งการแจ้งเตือนแบบพุช หากคุณไม่ได้มีคีย์ Firebase เซิร์ฟเวอร์ให้ดูที่เอกสารของเราที่จะเรียนรู้วิธีการสร้างคีย์ เซิร์ฟเวอร์ Firebase API

จากนั้นเลือก Cordova เป็น SDK เป้าหมายของคุณ เราจะนำคุณผ่านขั้นตอนต่างๆ เพื่อรับผู้ใช้รายแรกและส่งการแจ้งเตือนการทดสอบครั้งแรกของคุณ

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

ส่วนที่ 2: ตั้งค่าการแจ้งเตือนแบบพุชสำหรับ Android ใน Cordova

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

การสร้างแอพ Cordova สำหรับ Android ของคุณ

ภายใน terminal คุณ ให้รันคำสั่งต่อไปนี้เพื่อเพิ่มโปรเจค Cordova ในเครื่องของคุณเพื่อใช้ Cordova ในพิมพ์คำสั่งของคุณ

ตอนนี้ได้เวลาเพิ่มแพลตฟอร์ม Android ให้กับโปรเจคใน Cordova ของคุณ โดยเรียกใช้คำสั่งต่อไปนี้:

การเพิ่ม OneSignal ให้กับแอปพลิเคชัน Cordova ของคุณ

เราอยากแนะนำให้คุณได้รู้ทุกๆ กระบวนการในแอพ Cordova (Android) แบบง่ายๆ ที่แสดงวิธีผสานรวม OneSignal SDK มันทำงานบนแพ็คเกจ Cordova npm onesignal-cordova-plugin..

ในการเริ่มต้น เพิ่มแพลตฟอร์มที่คุณต้องการสร้างโปรเจค สำหรับ app คุณเลือกที่ Android cordova capacitor add android เป็นแพลตฟอร์มที่ต้องการ โดยการทำงาน:

จากนั้น ติดตั้งปลั๊กอิน OneSignal Cordova ภายในโปรเจ็กต์ด้วย npm install onesignal-cordova-plugin. cordova build android คำสั่งจะเปิด Android สร้างใน Android สตูดิโอ

หลังจากสร้างแอปพลิเคชัน Cordova ของคุณในแอพ Android ใหม่ ให้รัน cap sync คำสั่ง (ครั้งเดียวเท่านั้น) โดยป้อน npx cap sync.

เพิ่มรหัสเริ่มต้น ต่อไปนี้ใน index.js ไฟล์ที่อยู่ภายใน wwwโฟลเดอร์ภายใน onDeviceReady() ฟังก์ชันที่สร้างไว้ล่วงหน้า:

ตรวจสอบให้แน่ใจว่าได้เพิ่ม ID แอปของคุณซึ่งคุณเคยคัดลอกไว้ก่อนหน้านี้ระหว่างการกำหนดค่า Google Android FCM

รหัสด้านบนจะทำให้ window รับรู้ถึง OneSignal วิธีนี้จะช่วยให้คุณเข้าถึง OneSignal SDK หลังจากที่โหลด SDK ลงในแอปพลิเคชัน Cordova แล้ว

สุดท้าย สร้างแอปของคุณอีกครั้งโดยเรียกใช้ cordova build android และ เปิด Android Studio

หากคุณพบปัญหาเกี่ยวกับ AndroidXEnabled ที่จำเป็นต้องเป็นจริง ให้ทำตามขั้นตอนเหล่านี้:

1. เปิด config.xml ไฟล์ของคุณที่อยู่ในโฟลเดอร์รูทของคุณ
2. เพิ่มบรรทัดต่อไปนี้หลัง <platform></platform> tags:

แนะนำให้คุณใช้ แอปพลิเคชันบนอุปกรณ์ที่เป็น Android เพื่อทดสอบการแจ้งเตือน คุณจะต้องเชื่อมต่ออุปกรณ์ Android ของคุณและเปิดใช้งานโหมด developer mode.

เมื่อคุณเชื่อมต่อกับอุปกรณ์ของคุณ และ เปิดใช้งานแล้ว ให้เรียกใช้ แอปพลิเคชันบนอุปกรณ์ของคุณ โดยเลือกอุปกรณ์ของคุณเป็นอุปกรณ์หลัก ในตัวอย่าง ใช้งานแอพบน Google พิกเซล 5

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

เมื่อการตั้งค่าเสร็จสิ้น ให้กลับไปที่แดชบอร์ด OneSignal ของคุณไปยังจุดที่ คุณทำค้างไว้ก่อนหน้านี้ แล้วคลิกที่ Check Subscribed Users จะมีข้อความ สีเขียวด้านขวามือ ปรากฏขึ้น ดังภาพด้านล่าง

คลิกปุ่ม สีน้ำเงิน เพื่อสิ้นสุดขั้นตอนการตั้งค่า

ส่งการแจ้งเตือนแบบพุชบนมือถือ
ได้เวลาแล้ว..สำหรับการส่งการแจ้งเตือนครั้งแรก!!

ให้เข้าสู่ระบบบัญชี OneSignal ของคุณและไปที่แท็บแดชบอร์ด บนหน้าแดชบอร์ดให้คลิกที่ปุ่มสีฟ้าที่ New Push.

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

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

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

ภายใต้การจัดตารางเวลาการจัดส่งสินค้าให้เลือก Immediately และ Send to everyone at the same time เพื่อส่งให้กับทุกการผลักดันจากสมาชิก ถ้าคุณได้ทำการเสร็จสิ้น เพียงแค่ตั้งค่าบัญชี OneSignal ของคุณ ให้เป็นโอกาสแรกและคนเดียวของสมาชิก หากแอปหรือเว็บไซต์ของคุณมีการเข้าชมจำนวนมาก และผู้ใช้รายอื่นเลือกรับข้อความ Push Send to a particular segment(s) เพื่อทดสอบข้อความของคุณกับผู้ชมกลุ่มใดกลุ่มหนึ่ง เมื่อคุณพร้อมที่จะส่งข้อความ ให้คลิกที่ปุ่มสีน้ำเงิน Review and Send และ ส่งที่ด้านล่างของหน้าจอ

ป๊อปอัปขนาดเล็ก จะปรากฏขึ้น เพื่อให้คุณตรวจสอบข้อความ เมื่อคุณพอใจให้คลิกที่ปุ่มสีฟ้า Send Message คุณจะได้รับการแจ้งเตือนแบบพุชบนอุปกรณ์ของคุณ! 🚀

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