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

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

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

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

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

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

2. เพิ่ม Firebase Cloud Messaging JS SDK และเริ่มต้น Firebase Cloud Messaging:

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);

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

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

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

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

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

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

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

กำหนดค่าข้อมูลประจำตัวของเว็บในแอปของคุณ

เมธอด getToken(): Promise<string> อนุญาตให้ FCM ใช้ข้อมูลรับรองคีย์ VAPID เมื่อส่งคำขอข้อความไปยังบริการพุชต่างๆ ใช้คีย์ที่คุณสร้างหรือนำเข้าตามคำแนะนำใน Configure Web Credentials with 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 อยู่แล้ว ให้สร้างไฟล์เปล่าที่มีชื่อนั้นและวางไว้ที่รูทของโดเมนของคุณก่อนที่จะดึงโทเค็น คุณสามารถเพิ่มเนื้อหาที่มีความหมายลงในไฟล์ได้ในภายหลังในกระบวนการตั้งค่าไคลเอนต์

ในการดึงโทเค็นปัจจุบัน:

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

// 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