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

OneSignal.com

การแจ้งเตือนแบบพุช สามารถช่วยให้คุณมีส่วนร่วมและรักษาผู้ใช้แอปไว้ได้ เราจะบอกให้คุณทราบถึง การทำงานที่แสดงวิธีผสานรวมกับ 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 ของคุณให้พอดีกับแอพหรือเว็บไซต์ของคุณ

OneSignal.com

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

OneSignal.com

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

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

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

OneSignal.com

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

OneSignal.com

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

OneSignal.com

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

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

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

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

OneSignal.com

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

OneSignal.com

การเพิ่ม 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() ฟังก์ชันที่สร้างไว้ล่วงหน้า:

OneSignal.com

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

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

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

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

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

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

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

OneSignal.com

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

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

OneSignal.com

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

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

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

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

OneSignal.com

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

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

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

OneSignal.com

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

OneSignal.com

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