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

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

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

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

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

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

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

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

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

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

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

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

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