ลักษณะการทำงานของข้อความจะแตกต่างกันไป ขึ้นอยู่กับ
ดูว่าหน้าเว็บอยู่เบื้องหน้า (มีโฟกัส) หรืออยู่ในเบื้องหลัง
ด้านหลังแท็บอื่น หรือมิดชิด ในทุกกรณี หน้าเว็บต้องจัดการกับ
onMessage
ติดต่อกลับ แต่ในกรณีที่เกิดกรณีหลัง คุณอาจต้องจัดการ
onBackgroundMessage
หรือกำหนดค่าการแจ้งเตือนที่แสดงเพื่อให้ผู้ใช้นำ
ลงในเบื้องหน้า
สถานะของแอป | การแจ้งเตือน | ข้อมูล | ทั้งสอง |
---|---|---|---|
พื้นหน้า | onMessage |
onMessage |
onMessage |
ภูมิหลัง (โปรแกรมทำงานของบริการ) | onBackgroundMessage (การแจ้งเตือนแสดงขึ้นโดยอัตโนมัติ) |
onBackgroundMessage |
onBackgroundMessage (การแจ้งเตือนแสดงขึ้นโดยอัตโนมัติ) |
ตัวอย่างการเริ่มต้นอย่างรวดเร็วของ JavaScript จะแสดงโค้ดทั้งหมดที่จำเป็นในการรับข้อความ
จัดการข้อความเมื่อเว็บแอปทำงานอยู่เบื้องหน้า
หากต้องการรับเหตุการณ์ onMessage
แอปของคุณต้องกําหนด
Firebase Messaging Service Worker ใน firebase-messaging-sw.js
หรือจะจัดหา Service Worker ที่มีอยู่ให้กับ SDK ก็ได้ผ่าน
getToken(): Promise<string>
Web
import { initializeApp } from "firebase/app"; import { getMessaging } from "firebase/messaging/sw"; // Initialize the Firebase app in the service worker by passing in // your app's Firebase config object. // https://firebase.google.com/docs/web/setup#config-object const firebaseApp = initializeApp({ apiKey: 'api-key', authDomain: 'project-id.firebaseapp.com', databaseURL: 'https://project-id.firebaseio.com', projectId: 'project-id', storageBucket: 'project-id.appspot.com', messagingSenderId: 'sender-id', appId: 'app-id', measurementId: 'G-measurement-id', }); // Retrieve an instance of Firebase Messaging so that it can handle background // messages. const messaging = getMessaging(firebaseApp);
Web
// Give the service worker access to Firebase Messaging. // Note that you can only use Firebase Messaging here. Other Firebase libraries // are not available in the service worker. importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js'); // Initialize the Firebase app in the service worker by passing in // your app's Firebase config object. // https://firebase.google.com/docs/web/setup#config-object firebase.initializeApp({ apiKey: 'api-key', authDomain: 'project-id.firebaseapp.com', databaseURL: 'https://project-id.firebaseio.com', projectId: 'project-id', storageBucket: 'project-id.appspot.com', messagingSenderId: 'sender-id', appId: 'app-id', measurementId: 'G-measurement-id', }); // Retrieve an instance of Firebase Messaging so that it can handle background // messages. const messaging = firebase.messaging();
เมื่อแอปทํางานอยู่เบื้องหน้า (ผู้ใช้กําลังดูเว็บของคุณอยู่ คุณสามารถรับข้อมูลและการแจ้งเตือน เปย์โหลดโดยตรงในหน้าเว็บ
Web
// Handle incoming messages. Called when: // - a message is received while the app has focus // - the user clicks on an app notification created by a service worker // `messaging.onBackgroundMessage` handler. import { getMessaging, onMessage } from "firebase/messaging"; const messaging = getMessaging(); onMessage(messaging, (payload) => { console.log('Message received. ', payload); // ... });
Web
// Handle incoming messages. Called when: // - a message is received while the app has focus // - the user clicks on an app notification created by a service worker // `messaging.onBackgroundMessage` handler. messaging.onMessage((payload) => { console.log('Message received. ', payload); // ... });
จัดการข้อความเมื่อเว็บแอปของคุณทำงานอยู่เบื้องหลัง
ข้อความทั้งหมดที่ได้รับขณะแอปอยู่ในเบื้องหลังจะเรียกให้จอแสดงผลแสดง ในเบราว์เซอร์ คุณสามารถระบุตัวเลือกสำหรับการแจ้งเตือนนี้ เช่น ชื่อหรือการดำเนินการคลิก ในคำขอส่งจากเซิร์ฟเวอร์แอปของคุณ หรือใช้ตรรกะโปรแกรมทำงานของบริการบนไคลเอ็นต์
ตั้งค่าตัวเลือกการแจ้งเตือนในคำขอที่ส่ง
สำหรับข้อความแจ้งเตือนที่ส่งจากเซิร์ฟเวอร์ของแอป FCM
JavaScript API สนับสนุน
fcm_options.link
โดยทั่วไปตัวเลือกนี้จะตั้งเป็นหน้าเว็บในเว็บแอป
https://fcm.googleapis.com//v1/projects/<YOUR-PROJECT-ID>/messages:send
Content-Type: application/json
Authorization: bearer <YOUR-ACCESS-TOKEN>
{
"message": {
"token": "eEz-Q2sG8nQ:APA91bHJQRT0JJ...",
"notification": {
"title": "Background Message Title",
"body": "Background message body"
},
"webpush": {
"fcm_options": {
"link": "https://dummypage.com"
}
}
}
}
หากค่าลิงก์ชี้ไปยังหน้าที่เปิดในแท็บเบราว์เซอร์อยู่แล้ว การคลิกการแจ้งเตือนจะนำแท็บนั้นไปไว้เบื้องหน้า หากยังไม่ได้เปิดหน้าดังกล่าว การคลิกการแจ้งเตือนจะเปิดหน้าในหน้าต่างใหม่
เนื่องจากข้อความข้อมูลไม่รองรับ fcm_options.link
เราจึงแนะนําให้
เพิ่มเปย์โหลดการแจ้งเตือนในข้อความข้อมูลทั้งหมด อีกวิธีหนึ่งคือ
โดยใช้ Service Worker
คุณสามารถดูคำอธิบายความแตกต่างระหว่างข้อความการแจ้งเตือนและข้อความข้อมูลได้ที่ ประเภทข้อความ
ตั้งค่าตัวเลือกการแจ้งเตือนใน Service Worker
สำหรับข้อความข้อมูล คุณสามารถตั้งค่าตัวเลือกการแจ้งเตือนใน Service Worker ได้ ก่อนอื่น ให้เริ่มต้นแอปใน Service Worker ดังนี้
Web
import { initializeApp } from "firebase/app"; import { getMessaging } from "firebase/messaging/sw"; // Initialize the Firebase app in the service worker by passing in // your app's Firebase config object. // https://firebase.google.com/docs/web/setup#config-object const firebaseApp = initializeApp({ apiKey: 'api-key', authDomain: 'project-id.firebaseapp.com', databaseURL: 'https://project-id.firebaseio.com', projectId: 'project-id', storageBucket: 'project-id.appspot.com', messagingSenderId: 'sender-id', appId: 'app-id', measurementId: 'G-measurement-id', }); // Retrieve an instance of Firebase Messaging so that it can handle background // messages. const messaging = getMessaging(firebaseApp);
Web
// Give the service worker access to Firebase Messaging. // Note that you can only use Firebase Messaging here. Other Firebase libraries // are not available in the service worker. importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js'); // Initialize the Firebase app in the service worker by passing in // your app's Firebase config object. // https://firebase.google.com/docs/web/setup#config-object firebase.initializeApp({ apiKey: 'api-key', authDomain: 'project-id.firebaseapp.com', databaseURL: 'https://project-id.firebaseio.com', projectId: 'project-id', storageBucket: 'project-id.appspot.com', messagingSenderId: 'sender-id', appId: 'app-id', measurementId: 'G-measurement-id', }); // Retrieve an instance of Firebase Messaging so that it can handle background // messages. const messaging = firebase.messaging();
หากต้องการตั้งค่าตัวเลือก โปรดโทร onBackgroundMessage
ใน firebase-messaging-sw.js
ในตัวอย่างนี้ เราจะสร้างการแจ้งเตือนที่มีช่องชื่อ เนื้อหา และไอคอน
Web
import { getMessaging } from "firebase/messaging/sw"; import { onBackgroundMessage } from "firebase/messaging/sw"; const messaging = getMessaging(); onBackgroundMessage(messaging, (payload) => { console.log('[firebase-messaging-sw.js] Received background message ', payload); // Customize notification here const notificationTitle = 'Background Message Title'; const notificationOptions = { body: 'Background Message body.', icon: '/firebase-logo.png' }; self.registration.showNotification(notificationTitle, notificationOptions); });
Web
messaging.onBackgroundMessage((payload) => { console.log( '[firebase-messaging-sw.js] Received background message ', payload ); // Customize notification here const notificationTitle = 'Background Message Title'; const notificationOptions = { body: 'Background Message body.', icon: '/firebase-logo.png' }; self.registration.showNotification(notificationTitle, notificationOptions); });
แนวทางปฏิบัติแนะนำสำหรับการแจ้งเตือน
หากคุณคุ้นเคยกับการรับส่งข้อความพุชสำหรับเว็บ คุณอาจเคยอ่าน หลักเกณฑ์กว้างๆ สำหรับการแจ้งเตือนที่ดี สำหรับนักพัฒนาซอฟต์แวร์ที่ส่ง การแจ้งเตือนผ่าน FCM สำหรับเว็บ ข้อควรพิจารณาที่สำคัญที่สุด คือความแม่นยำและความเกี่ยวข้อง และต่อไปนี้คือคำแนะนำที่เฉพาะเจาะจงในการทำให้ การแจ้งเตือนที่แม่นยำและเกี่ยวข้อง
- ใช้ช่องไอคอนเพื่อส่งรูปภาพที่สื่อความหมาย สำหรับหลายๆ กรณี ควรเป็นโลโก้บริษัทหรือแอปที่ผู้ใช้รู้จักทันที หรือสำหรับ แอปพลิเคชันแชท นี่อาจเป็นรูปโปรไฟล์ของผู้ใช้ที่ส่ง
- ใช้ช่องชื่อเพื่อแสดงลักษณะที่ถูกต้องของข้อความ ตัวอย่างเช่น "จิมมี่ตอบ" ถ่ายทอดข้อมูลที่แม่นยำมากกว่า "ข้อความใหม่" ไม่ใช้ พื้นที่อันมีค่าสำหรับชื่อบริษัทหรือแอปของคุณ ใช้ไอคอนเพื่อ วัตถุประสงค์นั้น
- อย่าใช้ชื่อหรือเนื้อหาการแจ้งเตือนเพื่อแสดงชื่อเว็บไซต์หรือ โดเมน; การแจ้งเตือนมีชื่อโดเมนของคุณอยู่แล้ว
- เพิ่ม
fcm_options.link
โดยปกติแล้วเพื่อลิงก์ผู้ใช้กลับไปยังเว็บแอปและนำ ให้โฟกัสในเบราว์เซอร์ ในบางกรณีซึ่งพบได้ไม่บ่อยนัก ซึ่งข้อมูลทั้งหมดที่คุณต้องการ เพื่อสื่อสารในการแจ้งเตือน คุณไม่จำเป็นต้องใช้ลิงก์