Google is committed to advancing racial equity for Black communities. See how.
หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

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

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

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

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

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

เพิ่ม Firebase ในโปรเจ็กต์ JavaScript ของคุณ หากยังไม่ได้ ทำ

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

กำหนดค่า Web Credentials ด้วย FCM

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

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

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

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

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

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

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

ดึงวัตถุส่งข้อความ

const messaging = firebase.messaging();
index.js

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

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

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

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

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

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

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

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

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

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

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