Google 致力于为黑人社区推动种族平等。查看具体举措

ตั้งค่าแอปไคลเอนต์ JavaScript Firebase Cloud Messaging

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

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

ในการเริ่มต้นใช้งาน FCM JavaScript API คุณจะต้องเพิ่ม Firebase ลงในเว็บแอปและเพิ่มตรรกะในการเข้าถึงโทเค็นการลงทะเบียน

เพิ่ม Firebase ในโครงการ JavaScript ของคุณ

หากคุณยังไม่ได้ เพิ่ม Firebase กับโครงการ JavaScript ของคุณ

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

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

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

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

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

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

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

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

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

เรียกวัตถุข้อความ

เว็บ v8

const messaging = firebase.messaging();

เว็บ v9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

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

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

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

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

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

บริการส่งข้อความต้องมี firebase-messaging-sw.js ไฟล์ ถ้าคุณมี firebase-messaging-sw.js ไฟล์สร้างไฟล์ที่ว่างเปล่าที่มีชื่อนั้นและวางไว้ในรากของโดเมนของคุณก่อนที่จะเรียกโทเค็น คุณสามารถเพิ่มเนื้อหาที่มีความหมายลงในไฟล์ได้ภายหลังในกระบวนการตั้งค่าไคลเอ็นต์

ในการดึงโทเค็นปัจจุบัน:

เว็บ v8

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

เว็บ v9

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

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

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

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