เริ่มต้นใช้งาน Firebase Cloud Messaging


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

ตั้งค่าFirebase Cloud Messagingแอปไคลเอ็นต์ JavaScript

FCM JavaScript API ช่วยให้คุณรับข้อความแจ้งเตือนใน เว็บแอปที่ทำงานในเบราว์เซอร์ที่รองรับ Push API ได้ ซึ่งรวมถึงเบราว์เซอร์เวอร์ชันที่ระบุไว้ในเมทริกซ์การสนับสนุนนี้และส่วนขยาย Chrome ที่ใช้ Push API

FCM SDK รองรับเฉพาะในหน้าเว็บที่แสดงผลผ่าน HTTPS ซึ่งเป็นเพราะการใช้ Service Worker ซึ่งใช้ได้เฉพาะในเว็บไซต์ HTTPS หากคุณต้องการผู้ให้บริการ เราขอแนะนำ Firebase App Hosting ซึ่งมีแพ็กเกจแบบไม่มีค่าใช้จ่ายสำหรับการโฮสต์ HTTPS ในโดเมนของคุณเอง

หากต้องการเริ่มต้นใช้งาน FCM JavaScript API คุณจะต้องเพิ่ม Firebase ลงในเว็บแอปและเพิ่มตรรกะเพื่อเข้าถึงโทเค็นการลงทะเบียน

เพิ่มและเริ่มต้น FCM SDK

  1. หากยังไม่ได้ดำเนินการ ให้ ติดตั้ง Firebase JS SDK และเริ่มต้น Firebase

  2. เพิ่ม Firebase Cloud Messaging JS SDK และเริ่มต้นใช้งาน Firebase Cloud Messaging

Web 

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

หากคุณใช้ FCM สำหรับเว็บและต้องการอัปเกรดเป็น SDK เวอร์ชัน 6.7.0 ขึ้นไป คุณต้องเปิดใช้ FCM Registration API สำหรับโปรเจ็กต์ใน Google Cloud เมื่อเปิดใช้ API โปรดตรวจสอบว่าคุณได้ลงชื่อเข้าสู่ระบบ Cloud Console ด้วยบัญชี Google เดียวกับที่ใช้สำหรับ Firebase และตรวจสอบว่าได้เลือกโปรเจ็กต์ที่ถูกต้อง โปรเจ็กต์ใหม่ที่เพิ่ม SDK FCM จะเปิดใช้ API นี้โดยค่าเริ่มต้น

กำหนดค่าข้อมูลเข้าสู่ระบบเว็บด้วย FCM

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

สร้างคู่คีย์ใหม่

  1. เปิดแท็บ Cloud Messaging ในแผงFirebase Console Settings แล้วไปที่ส่วนการกำหนดค่าเว็บ
  2. ในแท็บใบรับรองการแจ้งเตือนแบบพุชบนเว็บ ให้คลิกสร้างคู่คีย์ คอนโซลจะแสดงการแจ้งเตือนว่ามีการสร้างคู่คีย์แล้ว รวมถึงแสดง สตริงคีย์สาธารณะและวันที่เพิ่ม

นำเข้าคู่คีย์ที่มีอยู่

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

  1. เปิดแท็บ Cloud Messaging ในแผงFirebase Console Settings แล้วไปที่ส่วนการกำหนดค่าเว็บ
  2. ในแท็บใบรับรองการแจ้งเตือนแบบพุชบนเว็บ ให้ค้นหาและเลือกข้อความลิงก์ นำเข้าคู่คีย์ที่มีอยู่
  3. ในกล่องโต้ตอบนำเข้าคู่คีย์ ให้ระบุคีย์สาธารณะและคีย์ส่วนตัวใน ช่องที่เกี่ยวข้อง แล้วคลิกนำเข้า คอนโซลจะแสดงสตริงคีย์สาธารณะ และวันที่เพิ่ม

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

กำหนดค่าข้อมูลเข้าสู่ระบบบนเว็บในแอป

เมธอด getToken(): Promise<string> ช่วยให้ FCM ใช้ข้อมูลเข้าสู่ระบบคีย์ VAPID เมื่อส่งคำขอข้อความ ไปยังบริการพุชต่างๆ ใช้คีย์ที่คุณสร้างหรือนําเข้า ตามวิธีการใน กําหนดค่าข้อมูลเข้าสู่ระบบเว็บด้วย FCM เพิ่มคีย์ในโค้ดหลังจากเรียกข้อมูลออบเจ็กต์การรับส่งข้อความ

import { getMessaging, getToken } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

เข้าถึงโทเค็นการลงทะเบียน

เมื่อต้องการดึงโทเค็นการลงทะเบียนปัจจุบันสำหรับอินสแตนซ์แอป ให้ขอสิทธิ์การแจ้งเตือนจากผู้ใช้ด้วย Notification.requestPermission() ก่อน เมื่อเรียกใช้ตามที่แสดง ฟังก์ชันนี้จะแสดงโทเค็นหากได้รับสิทธิ์ หรือปฏิเสธ Promise หากถูกปฏิเสธ 

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

FCM ต้องใช้ไฟล์ firebase-messaging-sw.js หากยังไม่มีไฟล์ firebase-messaging-sw.js ให้สร้างไฟล์ว่าง ที่มีชื่อดังกล่าวและวางไว้ที่รูทของโดเมนก่อนที่จะดึงโทเค็น คุณเพิ่มเนื้อหาที่มีความหมายลงในไฟล์ได้ในภายหลังในกระบวนการตั้งค่าไคลเอ็นต์

วิธีดึงโทเค็นปัจจุบัน

Web

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
messaging_get_token.js

Web

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
index.js

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

ส่งข้อความแจ้งเตือนทดสอบ

  1. ติดตั้งและเรียกใช้แอปในอุปกรณ์เป้าหมาย ในอุปกรณ์ Apple คุณจะต้อง ยอมรับคำขอสิทธิ์เพื่อรับการแจ้งเตือนจากระยะไกล
  2. ตรวจสอบว่าแอปทำงานในเบื้องหลังบนอุปกรณ์
  3. เปิดหน้าการรับส่งข้อความในคอนโซล Firebase
  4. หากนี่เป็นข้อความแรก ให้เลือกสร้างแคมเปญแรก
    1. เลือกข้อความการแจ้งเตือนของ Firebase แล้วเลือกสร้าง
  5. หรือในแท็บแคมเปญ ให้เลือกแคมเปญใหม่ แล้วเลือก การแจ้งเตือน
  6. ป้อนข้อความ
  7. เลือกส่งข้อความทดสอบจากแผงด้านขวา
  8. ในช่องที่มีป้ายกำกับว่าเพิ่มโทเค็นการลงทะเบียน FCM ให้ป้อนโทเค็นการลงทะเบียน
  9. เลือกทดสอบ

หลังจากเลือกทดสอบแล้ว อุปกรณ์ไคลเอ็นต์เป้าหมายซึ่งมีแอปทำงานในเบื้องหลังควรได้รับการแจ้งเตือน

ขั้นตอนถัดไป

หลังจากทำตามขั้นตอนการตั้งค่าเสร็จแล้ว คุณจะมีตัวเลือกต่อไปนี้ในการดำเนินการต่อด้วย FCM สำหรับเว็บ (JavaScript)