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

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

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

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

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

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

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

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