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

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

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

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

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

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

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

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

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

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

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

  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 Installation ID (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 Installation ID
  3. มีการทริกเกอร์เหตุการณ์ pushsubscriptionchange

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

เข้าถึง Registration Token (เลิกใช้งานแล้ว)

ได้ที่หัวข้อแนวทางปฏิบัติแนะนำสำหรับการจัดการการลงทะเบียน FCM

วิธีดึงข้อมูลโทเค็นปัจจุบัน

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 Registration Token ให้ป้อน Registration Token

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

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

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

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