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

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

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

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

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

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

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

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

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

// Add the public key generated from the console here.
messaging.getToken({vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

เข้าถึงโทเค็นการลงทะเบียน

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

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