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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เมื่อต้องการดึงข้อมูลโทเค็นการลงทะเบียนปัจจุบันสำหรับอินสแตนซ์ของแอป ให้ ขอสิทธิ์การแจ้งเตือนจากผู้ใช้ด้วย Notification.requestPermission() ก่อน เมื่อเรียกใช้ตามที่แสดงไว้ ฟังก์ชันนี้จะแสดงโทเค็นหากได้รับสิทธิ์ หรือปฏิเสธ Promise หากไม่ได้รับสิทธิ์ 

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

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)