ในการเริ่มต้นใช้งาน FCM ให้สร้างกรณีการใช้งานที่ง่ายที่สุด: ส่งข้อความแจ้งเตือนไปยังผู้ใช้เฉพาะเมื่อแอปอยู่ในพื้นหลังบนอุปกรณ์ หน้านี้แสดงขั้นตอนทั้งหมดเพื่อให้บรรลุสิ่งนี้ ตั้งแต่การตั้งค่าไปจนถึงการตรวจสอบ ซึ่งอาจครอบคลุมขั้นตอนที่คุณได้ทำไปแล้วหากคุณได้ ตั้งค่าแอปไคลเอนต์ JavaScript สำหรับ FCM
ตั้งค่า SDK
หากคุณยังไม่ได้ เพิ่ม Firebase ในโครงการ JavaScript ของคุณ
เข้าถึงโทเค็นการลงทะเบียน
เมื่อคุณต้องการดึงโทเค็นการลงทะเบียนปัจจุบันสำหรับอินสแตนซ์ของแอป ก่อนอื่นให้ขอสิทธิ์การแจ้งเตือนจากผู้ใช้ด้วย 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
แล้ว ให้สร้างไฟล์เปล่าที่มีชื่อนั้นและวางไว้ในรูทของโดเมนของคุณก่อนที่จะดึงโทเค็น คุณสามารถเพิ่มเนื้อหาที่มีความหมายลงในไฟล์ได้ในภายหลังในกระบวนการตั้งค่าไคลเอ็นต์
ในการดึงโทเค็นปัจจุบัน:
Web version 9
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 version 8
// 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); // ... });
หลังจากที่คุณได้รับโทเค็นแล้ว ให้ส่งไปยังเซิร์ฟเวอร์แอปของคุณและจัดเก็บโดยใช้วิธีการที่คุณต้องการ
ส่งข้อความแจ้งเตือนการทดสอบ
ติดตั้งและเรียกใช้แอปบนอุปกรณ์เป้าหมาย
ตรวจสอบให้แน่ใจว่าแอปอยู่ในพื้นหลังบนอุปกรณ์
เปิดตัว แต่งการแจ้งเตือน และเลือกการ แจ้งเตือนใหม่
ป้อนข้อความ
เลือก ส่งข้อความทดสอบ
ในฟิลด์ชื่อ เพิ่มโทเค็นการลงทะเบียน FCM ให้ป้อนโทเค็นการลงทะเบียนที่คุณได้รับในส่วนก่อนหน้าของคู่มือนี้
คลิก ทดสอบ
หลังจากที่คุณคลิก ทดสอบ อุปกรณ์ไคลเอ็นต์เป้าหมาย (โดยมีแอปอยู่ในพื้นหลัง) ควรได้รับการแจ้งเตือนในเบราว์เซอร์
ขั้นตอนถัดไป
ส่งข้อความไปยังแอพเบื้องหน้า
เมื่อคุณส่งข้อความแจ้งเตือนได้สำเร็จในขณะที่แอปของคุณอยู่ในพื้นหลัง โปรดดูที่ รับข้อความในไคลเอ็นต์ JavaScript เพื่อเริ่มต้นส่งไปยังแอปที่อยู่เบื้องหน้า
ไปไกลกว่าข้อความแจ้งเตือน
หากต้องการไปไกลกว่าข้อความแจ้งเตือนและเพิ่มลักษณะการทำงานขั้นสูงอื่นๆ ในแอปของคุณ โปรดดูที่: