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

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

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

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

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

นำเข้าคู่กุญแจที่มีอยู่

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

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

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

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

// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();
 index.html 

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

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

 // Add the public key generated from the console here.
messaging.usePublicVapidKey("BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu");
 

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

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

โทเค็นการลงทะเบียนอาจเปลี่ยนแปลงเมื่อ:

• เว็บแอปพลิเคชันจะลบโทเค็นการลงทะเบียน
• ผู้ใช้ล้างข้อมูลเบราว์เซอร์ ในกรณีนี้โทร getToken เพื่อดึงโทเค็นใหม่

ดึงโทเค็นการลงทะเบียนปัจจุบัน

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

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

วิธีดึงโทเค็นปัจจุบัน:

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then((currentToken) => {
  if (currentToken) {
    sendTokenToServer(currentToken);
    updateUIForPushEnabled(currentToken);
  } else {
    // Show permission request.
    console.log('No Instance ID token available. Request permission to generate one.');
    // Show permission UI.
    updateUIForPushPermissionRequired();
    setTokenSentToServer(false);
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  showToken('Error retrieving Instance ID token. ', err);
  setTokenSentToServer(false);
});
 index.html 

ตรวจสอบการรีเฟรชโทเค็น

การเรียกกลับของ onTokenRefresh เกิดขึ้นทุกครั้งที่มีการสร้างโทเค็นใหม่ดังนั้นการเรียกใช้ getToken ในบริบทจะทำให้แน่ใจได้ว่าคุณกำลังเข้าถึงโทเค็นการลงทะเบียนปัจจุบันและพร้อมใช้งาน

// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(() => {
  messaging.getToken().then((refreshedToken) => {
    console.log('Token refreshed.');
    // Indicate that the new Instance ID token has not yet been sent to the
    // app server.
    setTokenSentToServer(false);
    // Send Instance ID token to app server.
    sendTokenToServer(refreshedToken);
    // ...
  }).catch((err) => {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});
 index.html 

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

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

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

• เพิ่มฟังก์ชันการทำงานลงในแอปของคุณเพื่อ รับข้อความ
• ลองแบบฝึกหัดหนึ่งของเรา: ส่งข้อความแรกของคุณไปยังแอปพื้นหลัง หรือ ส่งข้อความไปยังอุปกรณ์หลายเครื่อง
• ตรวจสอบ ตัวอย่างที่ สมบูรณ์ ใน GitHub
• ตรวจสอบการ อ้างอิง JavaScript
• ดู วิดีโอแนะนำ การใช้งาน API