ตั้งค่าแอปไคลเอ็นต์การรับส่งข้อความในระบบคลาวด์ของ 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. เพิ่ม JS SDK สำหรับการรับส่งข้อความในระบบคลาวด์ของ Firebase และเริ่มต้นการรับส่งข้อความในระบบคลาวด์ของ Firebase ดังนี้

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

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

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

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

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

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

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

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