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

เลือกแพลตฟอร์ม iOS+ Android Web Flutter Unity C++


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

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

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

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

เพิ่มและเริ่มต้นใช้งาน SDK ของ FCM

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

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

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

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

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

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

  3. ในแท็บใบรับรอง Web Push ให้คลิกสร้างคู่คีย์

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

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

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

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

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

  3. ในแท็บใบรับรอง Web Push ให้ค้นหาและเลือกข้อความลิงก์: นำเข้าคู่คีย์ที่มีอยู่

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

ระบบจะเรียกใช้ Callback onRegistered ใน 3 สถานการณ์ต่อไปนี้

  1. ทุกครั้งที่การโทรด้วยตนเอง register() สิ้นสุดลง
  2. ตรวจพบการเปลี่ยนแปลงรหัสการติดตั้ง Firebase
  3. ระบบจะเริ่มเหตุการณ์ 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)