จะส่งการแจ้งเตือนทางเว็บโดยใช้ Firebase (FCM) ได้อย่างไร

เผยแพร่แล้ว: 2021-12-29

เพื่ออำนวยความสะดวกในการให้บริการแจ้งเตือนบนเว็บ, IOS และ Android Firebase ใช้บริการระบบคลาวด์ Firebase Cloud Messaging (FCM) ทำงานโดยสร้างโทเค็นที่ไม่ซ้ำกันสำหรับแต่ละอุปกรณ์และต่อมาใช้เพื่อส่งข้อความไปยังอุปกรณ์ที่เกี่ยวข้อง สำหรับการส่งการ แจ้งเตือนทางเว็บ Firebase จะสร้างโทเค็นโดยใช้จาวาสคริปต์

ในบล็อกนี้ คุณจะได้เรียนรู้ทุกอย่างเกี่ยวกับวิธีใช้งานการ แจ้งเตือนแบบพุชของเว็บ firebase

การส่งข้อความบนคลาวด์ของ firebase คืออะไร

What-is-Firebase-Cloud-Messaging

Firebase Cloud Messaging เป็นบริการแจ้งเตือนทางมือถือฟรีของ Google ช่วยให้นักพัฒนาแอปบุคคลที่สามส่งการแจ้งเตือนไปยังผู้ใช้จากเซิร์ฟเวอร์ Google Cloud Messaging (GCM) สิ่งนี้ทำให้คุณสามารถแจ้งให้ผู้ใช้ทราบเกี่ยวกับข้อมูลต่างๆ ที่พร้อมสำหรับการซิงค์ในแบบเรียลไทม์

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

การส่งการแจ้งเตือนทางเว็บโดยใช้ firebase มีประโยชน์อย่างไร

ต่อไปนี้เป็นประโยชน์ของการส่งการ แจ้งเตือนทางเว็บจาก firebase

  • เริ่มต้นฟรี: คุณไม่จำเป็นต้องจ่ายเงินให้ Google สำหรับการใช้ FCM บริการแจ้งเตือนแบบพุช นอกจากนี้ยังง่ายต่อการปรับขนาด  
  • ไม่ต้องกังวลเรื่องการอนุญาต: เนื่องจากไลบรารี FCM ใช้การรวมรายการ มันจึงเพิ่มการอนุญาตที่จำเป็นโดยอัตโนมัติ สิ่งนี้จะช่วยลดความพยายามที่คุณต้องใช้
  • การลงทะเบียนแบบง่าย: ที่อยู่ที่ FCM ใช้เพื่อส่งข้อความไปยังอุปกรณ์เรียกว่า “โทเค็นการลงทะเบียน” กระบวนการนี้ได้ทำแบบอะซิงโครนัสแล้ว ห้องสมุด Google จะได้รับโทเค็นในนามของคุณโดยอัตโนมัติ ดังนั้น เมื่อคุณขอโทเค็น คุณจะได้รับโทเค็นการลงทะเบียน ในการเริ่มส่งข้อความ คุณเพียงแค่ส่งโทเค็นนี้ไปยังเซิร์ฟเวอร์ของคุณ
  • การนำไปใช้อย่าง ง่าย: การนำ FCM ไปใช้นั้นทำได้ง่ายและรวดเร็ว เนื่องจาก API ที่ใช้งานง่ายมีอยู่ใน SDK เดียว คุณจึงสามารถแก้ไขปัญหาของลูกค้าได้ทันทีโดยไม่ต้องสร้างโครงสร้างพื้นฐานที่ซับซ้อน
  • การวิเคราะห์: คุณได้รับการวิเคราะห์ไม่จำกัดฟรีจาก Firebase คุณได้รับข้อมูลอันมีค่าเกี่ยวกับการใช้งานแอปของผู้ใช้ การคลิกโฆษณา และอื่นๆ ฟีเจอร์ Firebase อื่นๆ ทำงานได้ดีกับ Firebase Analytics ดังนั้น คุณจึงสามารถดำเนินการได้ทุกอย่าง
  • การสนับสนุน ข้าม แพลตฟอร์ม: เนื่องจาก API มีอยู่ใน SDK เดียวสำหรับ C++, JavaScript, Android และ iOS คุณจึงสามารถขยายไปยังแพลตฟอร์มต่างๆ ได้โดยไม่ต้องเปลี่ยนโครงสร้างพื้นฐานของคุณ
  • ข้อความหัวข้อทั่วไป: เมื่อคุณต้องการแจ้งผู้ใช้ที่สนใจในหัวข้อใดหัวข้อหนึ่ง คุณเพียงแค่เผยแพร่ข้อความของคุณไปยัง FCM FCM จะส่งให้กับผู้ใช้ทุกคนที่สมัครรับข้อมูลหัวข้อนั้น สิ่งที่ดีที่สุดคือไม่มีข้อจำกัดในการส่งข้อความตามหัวข้อ
  • ข้อความในหัวข้อที่แตกต่างกัน: FCM ยังอนุญาตให้แบ่งกลุ่มลูกค้าเพื่อส่งข้อความที่เกี่ยวข้อง ตัวอย่างเช่น หากคุณกำลังส่งการแจ้งเตือนเกี่ยวกับการจราจรไปยังผู้ใช้ของคุณ ผู้ใช้ของคุณในเมือง A จะได้รับข้อความจราจรเกี่ยวกับเมืองของพวกเขาเท่านั้น และผู้ใช้ในเมือง B จะได้รับข้อความจราจรเกี่ยวกับเมืองของพวกเขาเพียงแห่งเดียว

จะส่งการแจ้งเตือนแบบพุชของเว็บโดยใช้ Firebase ได้อย่างไร

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

1. ลงทะเบียนแอพ Firebase

ลงทะเบียน-Firebase-App
  1. ไปที่ลิงก์นี้ https://console.firebase.google.com/u/0/ และกดแท็บ 'เพิ่มโครงการ'
  2. ระบุชื่อโครงการและเลือกประเทศ จากนั้นกดที่แท็บ 'สร้างโครงการ' Google จะตรวจสอบชื่อโครงการสำหรับความพร้อมใช้งานและความเป็นเอกลักษณ์
  3. ตอนนี้คลิกแท็บ 'ยอมรับข้อกำหนด & เงื่อนไข' เพื่อดำเนินการต่อ โครงการของคุณจะถูกสร้างขึ้นภายใน
  4. ไม่กี่วินาที
  5. ตอนนี้เพิ่มแอป Android/IOS/เว็บ/Unity ในโครงการของคุณ เนื่องจากบล็อกนี้เน้นที่ การแจ้งเตือนทางเว็บ Firebase คุณต้องดำเนินการต่อโดยคลิกที่ไอคอนเว็บที่แสดงเป็น </>
  6. ตั้งชื่อเล่นให้แอปของคุณ ชื่อเล่นนี้มีไว้สำหรับผู้ใช้คนเดียว ดังนั้น คุณสามารถใช้คุณสมบัตินี้เพื่ออำนวยความสะดวกในการแยกความแตกต่างระหว่างแอพในโปรเจ็กต์สำหรับการใช้งานภายในได้ดีขึ้น
  7. หากโปรเจ็กต์ของคุณไม่ได้ทำงานบนเซิร์ฟเวอร์ HTTPS ให้เพิ่มโฮสติ้งสำหรับโปรเจ็กต์นั้น ถ้าไม่เพียงแค่ข้ามขั้นตอนนี้
  8. ตอนนี้คลิกที่ 'ลงทะเบียนแอป'  
  9. เมื่อลงทะเบียนแอปแล้ว คุณจะได้รับ Firebase SDK ซึ่งเป็นโค้ด คัดลอกรหัสนี้

ลง. มันจะนำไปใช้ในส่วนที่จะเกิดขึ้น ในกรณีที่คุณไม่คัดลอกตอนนี้ คุณสามารถดึงข้อมูลได้จากส่วน "การตั้งค่า"

2. เพิ่ม firebase ให้กับโครงการของคุณ

Add-firebase-to-your-project
  1. ไปที่แดชบอร์ด ที่แถบด้านข้าง คุณจะพบไอคอน "การตั้งค่า" คลิกที่มัน ในเมนูที่แสดง ให้คลิกการตั้งค่าโครงการ
  2. เมื่อหน้าการตั้งค่า (การตั้งค่าทั่วไป) เปิดขึ้น ให้เลื่อนลงไปที่ด้านล่างของหน้าและคัดลอกรหัสที่แสดงสำหรับ CDN ที่เลือก
  3. รวมรหัสต่อไปนี้ในไฟล์ HTML ของคุณที่ส่วนท้าย รวมถึงสคริปต์ CDN สำหรับการส่งข้อความ firebase

< script src = “https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js” > </script>

<script src = “https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js” > </script>

3. ปฏิบัติการบริการ Firebase

1. สำหรับรหัสที่กล่าวถึงด้านบน ให้เพิ่มรหัสที่ให้ไว้ด้านล่าง หลังจากที่คุณพบ // Initialize Firebase

// เริ่มต้น Firebase

firebase.initializeApp(firebaseConfig);const messaging=firebase.messaging(); // ฟังก์ชั่นที่กำหนดเองเพื่อเรียกใช้บริการ firebase

  getStartToken(); // รหัสนี้รับข้อความจากเซิร์ฟเวอร์ / แอปของคุณและพิมพ์ข้อความไปยังคอนโซลหากเปิดแท็บเดียวกันในโครงการในเบราว์เซอร์

message.onMessage(ฟังก์ชัน(เพย์โหลด){console.log("onMessage",เพย์โหลด);});

2. คุณสามารถเขียนโค้ดที่ด้านล่างสุดในไฟล์ js แยกต่างหากที่มีอยู่ในหน้า HTML ของคุณ หรือคุณสามารถผนวกโค้ดนั้นเข้ากับโค้ดที่ด้านบนสุดในแท็ก <script>

message.getToken() เป็นฟังก์ชันที่ใช้ในการดึงโทเค็นโดยใช้ Firebase SDK หากพบโทเค็น จะถูกส่งไปยังเซิร์ฟเวอร์เพื่อจัดเก็บ มิฉะนั้น ผู้ใช้จะขอการอนุญาตผ่านฟังก์ชัน RequestPermission()

setTokenSentToServer() เป็นอีกฟังก์ชันหนึ่งที่ใช้ที่จัดเก็บในเครื่องเพื่อกำหนด 1 เป็นค่าของ sendTokenToServer ในกรณีที่โทเค็นถูกส่งไปยังเซิร์ฟเวอร์แล้ว และ 0 ในกรณีที่โทเค็นไม่ถูกส่งไปยังเซิร์ฟเวอร์เนื่องจากเกิดข้อผิดพลาดเมื่อส่งไปยัง เซิร์ฟเวอร์หรือดึงมาจาก firebase SDK

4. ส่งการแจ้งเตือนจากโครงการ

ส่งข้อความจากโครงการ

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

1. ในขั้นแรก คุณต้องได้รับรหัสบริการ ทำตามขั้นตอนต่อไปนี้ -

  • เปิดคอนโซล Firebase
  • คลิกที่การตั้งค่าโครงการ
  • แตะที่ 'การส่งข้อความบนคลาวด์'
  • คุณจะพบรหัสในช่องรหัสเซิร์ฟเวอร์ คัดลอก

2. ส่งการแจ้งเตือนแบบพุช

ลองใช้แพลตฟอร์มบุรุษไปรษณีย์เพื่อส่ง การแจ้งเตือนทางเว็บจาก Firebase นี่คือสิ่งที่คุณต้องทำคือ-

3. ตั้งค่าประเภทคำขอ POST

4. ป้อน URL: https://fcm.googleapis.com/fcm/send

5. คลิกที่ส่วนหัว

คุณต้องกรอกสองส่วนหัว ได้แก่ การอนุญาตและประเภทเนื้อหา

· การอนุญาต: วางรหัสเซิร์ฟเวอร์ที่คุณคัดลอก

· ประเภทเนื้อหา: application/JSON (JavaScript Object Notation)

6. ตอนนี้คลิกเปิดส่วนเนื้อหา วางโทเค็นผู้ใช้ที่ Firebase ดึงมาเมื่อลงทะเบียนผู้ใช้

7. ตอนนี้ส่งคำขอ คุณจะสามารถส่งการแจ้งเตือนแบบพุชไปยังผู้ใช้ของคุณจากเซิร์ฟเวอร์

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

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

ทัวร์ชมสินค้า

ยังอ่าน:

  • 7 ปัจจัยที่ประเมินค่าเกินจริงของการแจ้งเตือนแบบพุชของเว็บ
  • การแจ้งเตือนทางเว็บ | กลยุทธ์การตลาดผ่านอีเมลโดยตรง
  • 41 สถิติการแจ้งเตือนทางเว็บที่นักการตลาดจำเป็นต้องรู้
  • 15 ซอฟต์แวร์และเครื่องมือแจ้งเตือนแบบพุชที่ดีที่สุดในปี 2022 {เปรียบเทียบ}
  • การแจ้งเตือนแบบพุชทางเว็บมีประสิทธิภาพมากกว่าสื่อการตลาดอื่นๆ อย่างไร