การตั้งค่าการแจ้งเตือนพุชใน React Native Android

การแจ้งเตือนแบบพุชสำหรับ react native บน android บทนำ คู่มือนี้จะสอนวิธีการใช้ parse เพื่อส่งการแจ้งเตือนแบบพุชไปยังแอปพลิเคชัน react native ของคุณบน android คุณจะตั้งค่า firebase และกำหนดค่าแอป back4app ของคุณเพื่อส่งการแจ้งเตือนผ่านแดชบอร์ดและฟังก์ชัน cloud code ในทุกช่วงเวลา คุณสามารถเข้าถึงโปรเจกต์ android ที่สร้างขึ้นด้วยบทเรียนนี้ได้ที่ที่เก็บ github ของเรา https //github com/templates back4app/react native js push notifications https //github com/templates back4app/react native ts push notifications ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป react native ที่สร้างขึ้นและ https //www back4app com/docs/react native/parse sdk/react native sdk เข้าใจวิธีการ https //www back4app com/docs/get started/cloud functions บน back4app บัญชีที่ใช้งานอยู่ที่ google เพื่อให้คุณสามารถใช้ google firebase เป้าหมาย ส่งการแจ้งเตือนแบบพุชจาก parse ไปยังแอปพลิเคชัน react native บน android โดยใช้แดชบอร์ดของ back4app และฟังก์ชัน cloud code 1 การตั้งค่า firebase firebase เป็นผู้ให้บริการที่ใช้กันมากที่สุดสำหรับการส่งและรับการแจ้งเตือนแบบพุชบน android ใช้โดยบริษัทต่างๆ ในปัจจุบัน ร่วมกับเครื่องมือต่างๆ มากมาย มาลองเริ่มสร้างโปรเจกต์ firebase สำหรับแอปของคุณโดยทำตามขั้นตอนที่ 1 และ 2 จาก https //firebase google com/docs/android/setup#console หลังจากสร้างแอปของคุณและก่อนที่จะออกจากคอนโซล firebase ให้แน่ใจว่าคุณได้ดาวน์โหลดและบันทึกไฟล์ google services json และไปที่การตั้งค่าโปรเจกต์ในแท็บ “cloud messaging” และดึงคีย์ต่อไปนี้ คีย์เซิร์ฟเวอร์; รหัสผู้ส่ง 2 การเปิดใช้งานการแจ้งเตือนแบบพุชบน back4app เพื่อเชื่อมโยงโปรเจกต์ firebase ของคุณกับ back4app และเปิดใช้งานการส่งการแจ้งเตือนแบบพุชผ่านแดชบอร์ดและ cloud code ของคุณ ให้ทำตามขั้นตอนเหล่านี้ ไปที่ https //www back4app com/ , เข้าสู่ระบบ ค้นหาแอปของคุณและคลิกที่ การตั้งค่าเซิร์ฟเวอร์ การตั้งค่าเซิร์ฟเวอร์ ค้นหาบล็อก “การแจ้งเตือนแบบพุช android” และคลิกที่ การตั้งค่า การตั้งค่า > แก้ไข แก้ไข บล็อก “การแจ้งเตือนแบบพุช android” มีลักษณะดังนี้ 3\ เพิ่ม firebase คีย์เซิร์ฟเวอร์ คีย์เซิร์ฟเวอร์ ไปยัง คีย์ api คีย์ api และ รหัสผู้ส่ง รหัสผู้ส่ง ไปยัง gcm sender id gcm sender id 4\ บันทึกและคุณก็เสร็จเรียบร้อย 3 การติดตั้งและการตั้งค่าขึ้นอยู่ ในโปรเจกต์ react native ของคุณ ให้ติดตั้ง react native push notification react native push notification ไลบรารี ซึ่งจะทำให้แอปพลิเคชันเชื่อมต่อกับ firebase และช่วยให้คุณจัดการกับการแจ้งเตือนที่ได้รับ รันคำสั่งต่อไปนี้ในไดเรกทอรีรากของโปรเจกต์ของคุณ yarn add react native push notification หลังจากติดตั้งแล้ว คุณยังต้องเพิ่มการกำหนดค่าบางอย่างใน android/app/src/main/androidmanifest xml android/app/src/main/androidmanifest xml , android/build gradle android/build gradle และ android/app/build gradle android/app/build gradle ตามเอกสาร https //github com/zo0r/react native push notification ของไลบรารี ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มใน androidmanifest xml androidmanifest xml ไฟล์ meta data meta data ที่มี id ของช่องการแจ้งเตือนเริ่มต้นสำหรับแอปพลิเคชันของคุณ (เราจะใช้ guidechannel guidechannel เป็นตัวอย่าง) คุณสามารถเพิ่มชื่อโดยตรงในคำสั่งหรือรวมไว้ใน strings xml strings xml ไฟล์ นอกจากนี้ ให้วางไฟล์ google services json google services json ของโปรเจกต์ของคุณใน android/app android/app ไดเรกทอรี 1 \<meta data 2 android\ name="com google firebase messaging default notification channel id" 3 android\ value="guidechannel" /> 4 \<! or > 5 \<meta data 6 android\ name="com google firebase messaging default notification channel id" 7 android\ value="@string/default notification channel id" /> ในขั้นตอนถัดไป เราจะเรียนรู้วิธีการใช้ไลบรารีนี้และรวมเข้ากับ parse 4 การจัดการการแจ้งเตือนแบบพุช เรามาสร้างไฟล์ที่มีวิธีการใหม่เกี่ยวกับการแจ้งเตือนแบบพุชชื่อ pushnotificationmethods js pushnotificationmethods js (หรือ pushnotificationmethods tsx pushnotificationmethods tsx ) และเพิ่มฟังก์ชันต่อไปนี้ ซึ่งมีหน้าที่ในการเริ่มต้น react native push notification react native push notification , สร้างช่องทางการแจ้งเตือน และยังตั้งค่า parse เพื่อให้รู้จักการกำหนดค่าการแจ้งเตือนของอุปกรณ์ของเรา javascript 1 import pushnotification from 'react native push notification'; 2 import parse from 'parse/react native'; 3&#x9; 4 const channelid = 'guidechannel'; 5&#x9; 6 export async function configurepushnotifications() { 7 // initialize pushnotification 8 await pushnotification configure({ 9 // (required) called when a remote is received or opened, or local notification is opened 10 onnotification function (notification) { 11 // process the notification 12 console log('notification ', notification); 13 // if notification is remote and has data, trigger local notification to show popup 14 // this is needed for parse sent notifications because firebase doesn't trigger popup 15 // notifications with data by itself 16 if ( 17 notification data !== undefined && 18 notification data data !== undefined 19 ) { 20 try { 21 // notification data comes as a stringified json, so parsing is needed 22 const notificationdata = json parse(notification data data); 23 // json parse notifications from the dashboard and cloud code 24 // should contain the default `title` and `message` parameters 25 let title = 'notification title'; 26 if (notificationdata title !== undefined) { 27 title = notificationdata title; 28 } 29 let message = 'noticiation message'; 30 if (notificationdata message !== undefined) { 31 message = notificationdata message; 32 } 33 // text parse notifications from the dashboard only have an `alert` parameter 34 if (notificationdata alert !== undefined) { 35 message = notificationdata alert; 36 } 37 pushnotification localnotification({ 38 channelid channelid, 39 title title, 40 message message, 41 }); 42 } catch (error) { 43 console log(`error triggering local notification ${error}`); 44 } 45 } 46 }, 47&#x9; 48 onregister async function (token) { 49 console log(`registered with device token ${token token}`); 50 let devicetoken = token token; 51&#x9; 52 // create the notification channel, required for android notifications 53 await pushnotification createchannel({ 54 channelid channelid, 55 channelname 'guide channel', 56 }); 57 console log('notification channel created!'); 58&#x9; 59 // create a parse installation, that will link our application's push notification 60 // to the parse server 61 try { 62 const installationid = await parse getinstallationid(); 63 const installation = new parse installation(); 64 // make sure to change any needed value from the following 65 installation set('devicetype', 'android'); 66 installation set('gcmsenderid', 'your gcm sender id'); 67 installation set('pushtype', 'gcm'); 68 installation set('appidentifier', 'your app identifier(package name)'); 69 installation set('parseversion', '3 2 0'); 70 installation set('appname', 'back4appguidepushnotifications'); 71 installation set('appversion', '1 0'); 72 installation set('localeidentifier', 'pt br'); 73 installation set('badge', 0); // set initial notification badge number 74 installation set('timezone', 'america/sao paulo'); 75 installation set('installationid', installationid); 76 installation set('channels', \[channelid]); 77 installation set('devicetoken', devicetoken); 78 await installation save(); 79 console log(`created new parse installation ${installation}`); 80 } catch (error) { 81 console log(error message); 82 } 83 }, 84 popinitialnotification true, 85 requestpermissions true, 86 }); 87 }1 import pushnotification from 'react native push notification'; 2 import parse from 'parse/react native'; 3&#x9; 4 const channelid string = 'guidechannel'; 5&#x9; 6 export async function configurepushnotifications() { 7 // initialize pushnotification 8 await pushnotification configure({ 9 // (required) called when a remote is received or opened, or local notification is opened 10 onnotification function (notification object) { 11 // process the notification 12 console log('notification ', notification); 13 // if notification is remote and has data, trigger local notification to show popup 14 // this is needed for parse sent notifications because firebase doesn't trigger popup 15 // notifications with data by itself 16 if ( 17 notification data !== undefined && 18 notification data data !== undefined 19 ) { 20 try { 21 // notification data comes as a stringified json, so parsing is needed 22 const notificationdata = json parse(notification data data); 23 // json parse notifications from the dashboard and cloud code 24 // should contain the default `title` and `message` parameters 25 let title string = 'notification title'; 26 if (notificationdata title !== undefined) { 27 title = notificationdata title; 28 } 29 let message string = 'noticiation message'; 30 if (notificationdata message !== undefined) { 31 message = notificationdata message; 32 } 33 // text parse notifications from the dashboard only have an `alert` parameter 34 if (notificationdata alert !== undefined) { 35 message = notificationdata alert; 36 } 37 pushnotification localnotification({ 38 channelid channelid, 39 title title, 40 message message, 41 }); 42 } catch (error any) { 43 console log(`error triggering local notification ${error}`); 44 } 45 } 46 }, 47&#x9; 48 onregister async function (token {os string; token string}) { 49 console log(`registered with device token ${token token}`); 50 let devicetoken string = token token; 51&#x9; 52 // create the notification channel, required for android notifications 53 await pushnotification createchannel({ 54 channelid channelid, 55 channelname 'guide channel', 56 }); 57 console log('notification channel created!'); 58&#x9; 59 // create a parse installation, that will link our application's push notification 60 // to the parse server 61 try { 62 const installationid = await parse getinstallationid(); 63 const installation = new parse installation(); 64 // make sure to change any needed value from the following 65 installation set('devicetype', 'android'); 66 installation set('gcmsenderid', 'your gcm sender id'); 67 installation set('pushtype', 'gcm'); 68 installation set('appidentifier', 'your app identifier(package name)'); 69 installation set('parseversion', '3 2 0'); 70 installation set('appname', 'back4appguidepushnotifications'); 71 installation set('appversion', '1 0'); 72 installation set('localeidentifier', 'pt br'); 73 installation set('badge', 0); // set initial notification badge number 74 installation set('timezone', 'america/sao paulo'); 75 installation set('installationid', installationid); 76 installation set('channels', \[channelid]); 77 installation set('devicetoken', devicetoken); 78 await installation save(); 79 console log(`created new parse installation ${installation}`); 80 } catch (error) { 81 console log(error message); 82 } 83 }, 84 popinitialnotification true, 85 requestpermissions true, 86 }); 87 } เอกสารโอเพนซอร์ส ข้อมูลเพิ่มเติมเกี่ยวกับ parse installation parse installation สามารถพบได้ที่ https //docs parseplatform org/js/guide/#push notifications โปรดทราบว่าเมธอดจัดการเหตุการณ์ onnotification onnotification มีโค้ดที่กระตุ้นการแจ้งเตือนในแอปหลังจากได้รับการแจ้งเตือนจากระยะไกล parse ต้องการโค้ดนี้เพราะ firebase ไม่ได้กระตุ้นการแจ้งเตือนแบบป๊อปอัพด้วยข้อมูลโดยตัวมันเอง ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้และประเภทการแจ้งเตือนใน android สามารถอ่านได้ https //firebase google com/docs/cloud messaging/concept options#notifications and data messages เรียกใช้ configurepushnotifications configurepushnotifications เมธอดนี้ใน app js app js (หรือ app tsx app tsx ) ไฟล์หลังจากที่คุณได้เริ่มต้น parse และก่อนที่จะประกาศ app app เนื้อหา app js 1 // other imports 2 // 3 import {configurepushnotifications} from ' /src/pushnotificationmethods'; 4&#x9; 5 // your parse initialization configuration goes here 6 // 7&#x9; 8 // initialize pushnotifications 9 configurepushnotifications(); สร้างและรันแอปพลิเคชัน คุณสามารถเห็น การติดตั้ง การติดตั้ง ตารางในแดชบอร์ด back4app ของแอปของคุณที่มีรายการที่ตรงกับแอปของคุณ 5 การส่งการแจ้งเตือนแบบพุชผ่านแดชบอร์ด เราพร้อมที่จะส่งการแจ้งเตือนแบบพุชครั้งแรกไปยังแอปของเราแล้ว ทำตามขั้นตอนด้านล่างเพื่อส่งข้อความพุชผ่านแดชบอร์ดของ back4app ไปที่ https //www back4app com/ , เข้าสู่ระบบ ค้นหาแอปของคุณและคลิกที่ แดชบอร์ด แดชบอร์ด คลิกที่ พุช พุช > ส่งการแจ้งเตือนพุชใหม่ ส่งการแจ้งเตือนพุชใหม่ และสร้างกลุ่มเป้าหมายสำหรับการแจ้งเตือนพุชของคุณ 3\ เขียนข้อความของคุณและดูตัวอย่างโดยคลิกที่ android android ตัวเลือก 4\ หากคุณได้ตรวจสอบการแจ้งเตือนแบบพุชแล้วและต้องการส่งมัน ให้คลิกที่ ส่งการแจ้งเตือนแบบพุช ส่งการแจ้งเตือนแบบพุช คุณสามารถสำรวจตัวเลือกอื่น ๆ สำหรับการแจ้งเตือนแบบพุชที่ parse dashboard parse dashboard ที่นั่น คุณยังสามารถดู การแจ้งเตือนที่ผ่านมา การแจ้งเตือนที่ผ่านมา ที่คุณส่งและ กลุ่มผู้ชม กลุ่มผู้ชม ที่คุณสร้างขึ้นสำหรับพวกเขา 6 การส่งการแจ้งเตือนแบบพุชผ่าน cloud code โดยใช้ https //www back4app com/docs/get started/cloud functions , คุณสามารถแยกวิธีการที่นำกลับมาใช้ใหม่จากส่วนหน้าและควบคุมทรัพยากรทั้งหมดในแบ็คเอนด์ของคุณผ่านคีย์หลัก มาลองใช้ฟังก์ชันคลาวด์เพื่อส่งข้อความพุชกันเถอะ ก่อนอื่นให้สร้างฟังก์ชันคลาวด์ที่เรียกว่า sendpush sendpush ซึ่งเรียกใช้ parse push send parse push send วิธีการ มีสองวิธีในการเลือกผู้ใช้ที่จะได้รับการแจ้งเตือน การค้นหาชั้น parse installation parse installation หรือผ่านชื่อช่องการแจ้งเตือน มันเป็นเรื่องปกติในแอป android ที่จะใช้ช่องเพื่อแยกแยะระหว่างผู้ใช้ ดังนั้นให้เราใช้มัน ตรวจสอบให้แน่ใจว่าคุณได้ปรับใช้ฟังก์ชันนี้บน back4app ก่อนที่จะดำเนินการต่อ เอกสารโอเพนซอร์ส โปรดตรวจสอบ https //docs parseplatform org/js/guide/#sending options สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ การส่ง การส่ง วิธีการ 1 parse cloud define('sendpush', async (request) => { 2 try { 3 await parse push send({ 4 channels \[ 'guidechannel' ], 5 data { 6 message 'test message', 7 title 'back4app guide notification' 8 } 9 }, { usemasterkey true }); 10 return true; 11 } catch (error) { 12 return `error ${error}` 13 } 14 }); ตอนนี้เรามาเรียกใช้ฟังก์ชันจากแอป react native กันเถอะ เพิ่มฟังก์ชันนี้ลงใน pushnotificationmethods js pushnotificationmethods js (หรือ pushnotificationmethods tsx pushnotificationmethods tsx ) ไฟล์และเรียกใช้มันในปุ่มภายในหน้าหลักของแอปพลิเคชันของคุณ 1 export async function sendnotification() { 2 try { 3 await parse cloud run('sendpush'); 4 console log('success!'); 5 } catch (error any) { 6 console log(`error ${error}`); 7 } 8 } โปรดทราบว่ากรณีนี้ที่อนุญาตให้ผู้ใช้เรียกใช้การแจ้งเตือนแบบพุชด้วยตนเองนั้นไม่ธรรมดา เราใช้มันที่นี่เพียงเพื่อแสดงให้เห็นว่าการรวมการส่งการแจ้งเตือนแบบพุชกับ parse นั้นง่ายเพียงใด บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการส่งการแจ้งเตือนแบบพุชโดยใช้ parse ไปยังแอปพลิเคชัน react native ของคุณบน android ในคู่มือต่อไป คุณจะได้เรียนรู้วิธีการส่งพวกเขาบน ios