ตั้งค่าแอปไคลเอ็นต์การรับส่งข้อความในระบบคลาวด์ของ Firebase ใน JavaScript

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

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

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

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

  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 Console เมื่อเปิดใช้ API ให้ตรวจสอบว่า คุณลงชื่อเข้าใช้ Cloud Console ด้วยบัญชี Google เดียวกับที่คุณใช้ Firebase แล้วตรวจสอบว่าได้เลือกโปรเจ็กต์ที่ถูกต้อง โปรเจ็กต์ใหม่ที่เพิ่ม SDK FCM รายการเปิดใช้ API นี้โดยค่าเริ่มต้น

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

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

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

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

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

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

  1. เปิด แท็บ Cloud Messaging ของการตั้งค่าคอนโซล Firebase แล้วเลื่อนไปที่ส่วนการกำหนดค่าเว็บ
  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() เมื่อเรียกใช้ตามที่แสดง การดำเนินการนี้จะแสดงโทเค็นหากได้รับสิทธิ์หรือปฏิเสธสัญญา หากถูกปฏิเสธ: 

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

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

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

หลังจากทำตามขั้นตอนการตั้งค่าเสร็จแล้ว มาดูตัวเลือกในการย้ายกัน ส่งต่อด้วย FCM สำหรับเว็บ (JavaScript):