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

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

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

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

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

หากยังไม่ได้ดำเนินการ ให้ ติดตั้ง Firebase JS SDK และเริ่มต้น Firebase
เพิ่ม 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 อินเทอร์เฟซเว็บใช้ข้อมูลเข้าสู่ระบบเว็บที่เรียกว่าคีย์ "การระบุเซิร์ฟเวอร์แอปพลิเคชันโดยสมัครใจ" หรือ "VAPID" เพื่อให้สิทธิ์คำขอส่ง ไปยังบริการพุชบนเว็บที่รองรับ หากต้องการสมัครรับการแจ้งเตือนแบบพุชในแอป คุณต้องเชื่อมโยงคู่คีย์กับโปรเจ็กต์ Firebase คุณจะสร้างคู่คีย์ใหม่หรือนำเข้าคู่คีย์ที่มีอยู่ผ่านคอนโซล Firebase ก็ได้

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

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

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

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

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

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

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

เมธอด 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

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

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

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

เพิ่มฟังก์ชันการทำงานลงในแอปเพื่อรับข้อความ
ลองดูบทแนะนำของเรา ส่งข้อความแรกไปยังแอปที่ทำงานในเบื้องหลัง หรือส่งข้อความไปยังอุปกรณ์หลายเครื่อง
ดูตัวอย่างฉบับสมบูรณ์ใน GitHub
ดูข้อมูลอ้างอิง JavaScript
ดูวิดีโอคำแนะนำแบบทีละขั้นเกี่ยวกับการใช้งาน API