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

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

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

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

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

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

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

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

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

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

  1. เปิด แท็บ Cloud Messaging ของการตั้งค่าคอนโซล Firebase แล้วเลื่อนไปที่ส่วนการกำหนดค่าเว็บ
  2. ในแท็บใบรับรอง Web Push ให้ค้นหาและเลือกข้อความลิงก์ "นําเข้าคู่คีย์ที่มีอยู่"
  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)