เริ่มต้นใช้งาน Firebase Cloud Messaging ในเว็บแอป

เลือกแพลตฟอร์ม: iOS+ Android เว็บ Flutter Unity C++


คู่มือนี้อธิบายวิธีเริ่มต้นใช้งาน Firebase Cloud Messaging ใน แอปไคลเอ็นต์บนเว็บเพื่อให้คุณส่งข้อความได้อย่างน่าเชื่อถือ

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

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

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

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

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

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

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

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

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

  1. ในFirebase คอนโซล ให้ไปที่ การตั้งค่า > ทั่วไป จากนั้นคลิกแท็บ Cloud Messaging

  2. ไปที่ส่วนการกำหนดค่าเว็บ

  3. ในแท็บใบรับรองการพุชจากเว็บ ให้คลิกสร้างคู่คีย์

    คอนโซลจะแสดงการแจ้งเตือนว่ามีการสร้างคู่คีย์แล้ว และจะแสดงสตริงคีย์สาธารณะและวันที่เพิ่ม

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

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

  1. ในFirebase คอนโซล ให้ไปที่ การตั้งค่า > ทั่วไป จากนั้นคลิกแท็บ Cloud Messaging

  2. ไปที่ส่วนการกำหนดค่าเว็บ

  3. ในแท็บใบรับรองการแจ้งเตือนแบบพุชบนเว็บ ให้ค้นหาและเลือกข้อความลิงก์ นำเข้าคู่คีย์ที่มีอยู่

  4. ในกล่องโต้ตอบนำเข้าคู่คีย์ ให้ระบุคีย์สาธารณะและคีย์ส่วนตัวใน ช่องที่เกี่ยวข้อง แล้วคลิกนำเข้า

    คอนโซลจะแสดงสตริงคีย์สาธารณะและวันที่เพิ่ม

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

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

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

import { getMessaging, register } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the Firebase console here.
register(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

ขอสิทธิ์การแจ้งเตือนและกำหนดค่า Service Worker

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

เข้าถึงรหัสการติดตั้ง Firebase

หากต้องการลงทะเบียนอินสแตนซ์ของแอปและดึงรหัสการติดตั้ง Firebase (FID) สำหรับการกำหนดเป้าหมายข้อความ ให้ทำดังนี้ 

import { getMessaging, onRegistered, register } from "firebase/messaging";

const messaging = getMessaging();

// 1. Implement callback to receive the Firebase installation ID upon registration.
// This is triggered every time a manual register() finishes, a FID change
// is detected, or a pushsubscriptionchange event is fired.
onRegistered(messaging, (installationId) => {
  console.log('Registered installation ID:', installationId);

  // Send the Firebase Installation ID to your app server and update the UI if needed.
  sendRegistrationToServer(installationId);
});

// 2. You can also manually trigger registration (recommended on app startup)
register(messaging, {
  vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'
}).then(() => {
  // Success! The Firebase Installation ID can be used to target messages to this app
  // instance and will be delivered asynchronously to your onRegistered() callback.
}).catch((err) => {
  console.error('An error occurred while registering', err);
});

ระบบจะทริกเกอร์การเรียกกลับ onRegistered ใน 3 สถานการณ์ต่อไปนี้

  1. ทุกครั้งที่การโทร register()ด้วยตนเอง สิ้นสุดลง
  2. ตรวจพบการเปลี่ยนแปลงรหัสการติดตั้ง Firebase
  3. A pushsubscriptionchange จะทริกเกอร์เหตุการณ์

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

เข้าถึงโทเค็นการลงทะเบียน (เลิกใช้งานแล้ว)

วิธีดึงโทเค็นปัจจุบัน

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);
  // ...
});

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);
  // ...
});

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

ส่งข้อความการแจ้งเตือนทดสอบ

  1. ติดตั้งและเรียกใช้แอปในอุปกรณ์เป้าหมาย ในอุปกรณ์ Apple คุณจะต้อง ยอมรับคำขอสิทธิ์เพื่อรับการแจ้งเตือนจากระยะไกล

  2. ตรวจสอบว่าแอปทำงานในเบื้องหลังบนอุปกรณ์

  3. ในFirebaseคอนโซล ให้ไปที่ DevOps และการมีส่วนร่วม > การรับส่งข้อความ

  4. สร้างแคมเปญ

    • หากนี่เป็นข้อความแรกที่คุณส่ง ให้ทำดังนี้

      1. เลือกสร้างแคมเปญแรก

      2. เลือกข้อความการแจ้งเตือนของ Firebase แล้วเลือกสร้าง

    • หากคุณเคยสร้างแคมเปญมาก่อน ให้ทำดังนี้

      1. ในแท็บแคมเปญ ให้เลือกแคมเปญใหม่

      2. คลิกการแจ้งเตือน

  5. ป้อนข้อความ

  6. เลือกส่งข้อความทดสอบจากแผงด้านขวา

  7. ในช่องที่มีป้ายกำกับว่าเพิ่มโทเค็นการลงทะเบียน FCM ให้ป้อนโทเค็นการลงทะเบียน

  8. เลือกทดสอบ

หลังจากเลือกทดสอบแล้ว อุปกรณ์ไคลเอ็นต์เป้าหมายซึ่งมีแอปทำงานในเบื้องหลังควรได้รับการแจ้งเตือน

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

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