ถ้าคุณถามกลุ่มนักพัฒนาว่าคุณลักษณะใดของ อุปกรณ์เคลื่อนที่ที่ขาดหายไป ข้อความ Push จะอยู่ในรายการสูงเสมอ
ข้อความ Push ช่วยให้ผู้ใช้เลือกรับข้อมูลอัปเดตจากเว็บไซต์ที่ตนเองอัปเดตได้อย่างทันท่วงที ชื่นชอบและช่วยให้คุณดึงดูดผู้ใช้ให้กลับมามีส่วนร่วมอีกครั้งได้อย่างมีประสิทธิภาพด้วยเนื้อหาที่กำหนดเองและน่าสนใจ
ใน Chrome เวอร์ชัน 42 Push API และ Notification API พร้อมใช้งานสำหรับ
Push API ใน Chrome อาศัยเทคโนโลยีบางอย่าง ซึ่งรวมถึง ไฟล์ Manifest ของเว็บแอป และ Service Worker ในโพสต์นี้ เราจะมาดูแต่ละเทคโนโลยีเหล่านี้ แต่ เพื่อให้การรับส่งข้อความพุชเริ่มทำงานได้ เพื่อทำความเข้าใจเกี่ยวกับ ฟีเจอร์อื่นๆ ของไฟล์ Manifest และความสามารถในออฟไลน์ของ Service Worker โปรดดูลิงก์ด้านบน
นอกจากนี้ เรายังพิจารณาสิ่งที่จะเพิ่มลงใน API ใน Chrome เวอร์ชันต่อๆ ไป และสุดท้ายจะมีคำถามที่พบบ่อย
การใช้การรับส่งข้อความพุชสำหรับ Chrome
ส่วนนี้อธิบายแต่ละขั้นตอนที่คุณต้องทำให้เสร็จเพื่อรองรับการพุช ในเว็บแอปพลิเคชันของคุณ
ลงทะเบียน Service Worker
มีความจำเป็นที่จะต้องให้โปรแกรมทำงานของบริการเพื่อนำข้อความพุชไปใช้ ผ่านเว็บได้ เนื่องจากเมื่อได้รับข้อความ Push แล้ว เบราว์เซอร์สามารถเริ่มต้นโปรแกรมทำงานของบริการ ซึ่งจะทำงานในพื้นหลังโดยไม่มี หน้าเว็บเปิดอยู่ และส่งกิจกรรมเพื่อให้คุณเลือกได้ว่าจะจัดการกับอย่างไร ข้อความ Push
ด้านล่างนี้คือตัวอย่างวิธีลงทะเบียน Service Worker ในเว็บแอป วันและเวลา การลงทะเบียนเสร็จสมบูรณ์แล้วซึ่งเราเรียกว่า initialiseState() ซึ่ง ที่เราจะพูดถึงในเร็วๆ นี้
var isPushEnabled = false;
…
window.addEventListener('load', function() {
var pushButton = document.querySelector('.js-push-button');
pushButton.addEventListener('click', function() {
if (isPushEnabled) {
unsubscribe();
} else {
subscribe();
}
});
// Check that service workers are supported, if so, progressively
// enhance and add push messaging support, otherwise continue without it.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(initialiseState);
} else {
console.warn('Service workers aren\'t supported in this browser.');
}
});
เครื่องจัดการการคลิกปุ่มจะสมัครรับข้อมูลหรือยกเลิกการสมัครรับข้อความของผู้ใช้เพื่อพุชข้อความ isPushEnabled เป็นตัวแปรร่วมซึ่งเพียงแค่ติดตามว่าพุช สมัครใช้บริการแล้วหรือยัง ข้อมูลเหล่านี้จะได้รับการอ้างอิงถึงตลอดทั้ง ข้อมูลโค้ด
จากนั้นเราจะตรวจสอบว่าได้รับการสนับสนุน Service Worker ก่อนที่จะลงทะเบียน service-worker.js
ซึ่งมีตรรกะสำหรับจัดการข้อความพุช นี่
แค่บอกเบราว์เซอร์ว่าไฟล์ JavaScript นี้เป็น Service Worker
สำหรับเว็บไซต์ของเรา
ตั้งค่าสถานะเริ่มต้น
![ตัวอย่าง UX การรับส่งข้อความพุชที่เปิดใช้และปิดใช้ใน Chrome](https://developer.chrome.com/static/blog/push-notifications-on-the-open-web/image/example-enabled-disable-96d405ef6b25c.png?authuser=9&hl=th)
เมื่อลงทะเบียน Service Worker แล้ว เราจำเป็นต้องตั้งค่าสถานะของ UI
ผู้ใช้จะคาดหวัง UI แบบง่ายเพื่อเปิดใช้หรือปิดใช้ข้อความ Push สำหรับเว็บไซต์ของคุณ และคาดหวังว่าการอัปเดตจะเกิดขึ้นกับการเปลี่ยนแปลงที่เกิดขึ้น ในอีก คำเหล่านี้ หากพวกเขาเปิดข้อความ Push สำหรับเว็บไซต์ของคุณ ให้ออกไปและกลับมา ในช่วงสัปดาห์ต่อมา UI ของคุณควรไฮไลต์ว่าข้อความพุชเปิดใช้งานอยู่แล้ว
คุณดูหลักเกณฑ์ด้าน UX ได้ในเอกสารนี้ ในบทความนี้ เราจะเน้นด้านเทคนิค
ณ จุดนี้คุณอาจคิดว่ามีเพียง 2 รัฐที่ต้องจัดการ เปิดหรือปิดใช้งาน อย่างไรก็ตาม ยังมีรัฐอื่นๆ โดยรอบ การแจ้งเตือนที่ต้องพิจารณาด้วย
![แผนภาพที่ไฮไลต์ข้อควรพิจารณาและสถานะต่างๆ ของการพุชใน Chrome](https://developer.chrome.com/static/blog/push-notifications-on-the-open-web/image/a-diagram-highlighting-d-1738cfdc77ac4.png?authuser=9&hl=th)
มี API จำนวนหนึ่งที่เราต้องตรวจสอบก่อนที่จะเปิดใช้งานปุ่มของเรา และ หากทุกอย่างรองรับ เราสามารถเปิดใช้ UI และตั้งค่าสถานะเริ่มต้นเป็น ให้ระบุว่าผู้ใช้สมัครรับข้อความ Push ไว้หรือไม่
เนื่องจากการตรวจสอบส่วนใหญ่ทำให้ UI ของเราถูกปิดใช้งาน คุณจึงควร ตั้งค่าสถานะเริ่มต้นเป็น "ปิดใช้" วิธีนี้จะช่วยป้องกันความสับสนหากมี เป็นปัญหาเกี่ยวกับ JavaScript ของหน้าเว็บ เช่น ไฟล์ JS ไม่สามารถ ดาวน์โหลดไว้ หรือผู้ใช้ปิดใช้ JavaScript
<button class="js-push-button" disabled>
Enable Push Messages
</button>
ด้วยสถานะเริ่มต้นนี้ เราจะดำเนินการตรวจสอบตามที่ระบุไว้ข้างต้นใน
initialiseState()
เช่น หลังจากลงทะเบียน Service Worker แล้ว
// Once the service worker is registered set the initial state
function initialiseState() {
// Are Notifications supported in the service worker?
if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
console.warn('Notifications aren\'t supported.');
return;
}
// Check the current Notification permission.
// If its denied, it's a permanent block until the
// user changes the permission
if (Notification.permission === 'denied') {
console.warn('The user has blocked notifications.');
return;
}
// Check if push messaging is supported
if (!('PushManager' in window)) {
console.warn('Push messaging isn\'t supported.');
return;
}
// We need the service worker registration to check for a subscription
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// Do we already have a push message subscription?
serviceWorkerRegistration.pushManager.getSubscription()
.then(function(subscription) {
// Enable any UI which subscribes / unsubscribes from
// push messages.
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = false;
if (!subscription) {
// We aren't subscribed to push, so set UI
// to allow the user to enable push
return;
}
// Keep your server in sync with the latest subscriptionId
sendSubscriptionToServer(subscription);
// Set your UI to show they have subscribed for
// push messages
pushButton.textContent = 'Disable Push Messages';
isPushEnabled = true;
})
.catch(function(err) {
console.warn('Error during getSubscription()', err);
});
});
}
ภาพรวมคร่าวๆ ของขั้นตอนเหล่านี้
- ตรวจสอบว่า
showNotification
อยู่ใน ServiceWorkerRegistration แล้ว ต้นแบบ หากไม่มี เราจะไม่สามารถแสดงการแจ้งเตือนจากโปรแกรมทำงานของบริการได้ เมื่อได้รับข้อความ Push - เราจะตรวจสอบว่า
Notification.permission
ปัจจุบันคืออะไรเพื่อให้แน่ใจว่าไม่ใช่"denied"
สิทธิ์ที่ถูกปฏิเสธหมายความว่าคุณไม่สามารถแสดงการแจ้งเตือนได้ จนกว่าผู้ใช้จะเปลี่ยนสิทธิ์ในเบราว์เซอร์ด้วยตนเอง - ในการตรวจสอบว่า
PushManager
รองรับการรับส่งข้อความพุชหรือไม่ ที่มีอยู่ในออบเจ็กต์หน้าต่าง - สุดท้าย เราใช้
pushManager.getSubscription()
เพื่อตรวจสอบว่าเราได้ มีการสมัครใช้บริการหรือไม่ หากมี เราจะส่งรายละเอียดการสมัครใช้บริการไปที่ เพื่อให้แน่ใจว่าเรามีข้อมูลที่ถูกต้อง และตั้ง UI ให้แสดง เปิดใช้การรับส่งข้อความพุชไว้แล้วหรือไม่ เราจะมาดูรายละเอียดกัน อยู่ในออบเจ็กต์การสมัครใช้บริการภายหลังในบทความนี้
เราจะรอจนกว่า navigator.serviceWorker.ready
จะได้รับการแก้ไข จึงจะตรวจหา
การสมัครใช้บริการ และเพื่อเปิดใช้ปุ่มพุชเนื่องจากจะอยู่หลังบริการเท่านั้น
ทำงานอยู่ ซึ่งคุณสามารถสมัครรับข้อมูลเพื่อส่งข้อความพุชได้จริง
ขั้นตอนถัดไปคือการจัดการเมื่อผู้ใช้ต้องการเปิดใช้งานข้อความพุช ก่อนที่จะทำได้ เราต้องสร้างโครงการ Google Developer Console แล้วเพิ่มพารามิเตอร์บางรายการลงในไฟล์ Manifest ใช้ Firebase Cloud Messaging (FCM) ซึ่งก่อนหน้านี้เรียกว่าการรับส่งข้อความในระบบคลาวด์ของ Google (GCM)
สร้างโครงการใน Firebase Developer Console
Chrome ใช้ FCM ในการจัดการกับการส่งและการส่งข้อความพุช แต่เพื่อ ใช้ FCM API คุณต้องตั้งค่าโปรเจ็กต์ใน Firebase Developer Console
ขั้นตอนต่อไปนี้มีไว้สำหรับ Chrome, Opera สำหรับ Android และ Samsung โดยเฉพาะ เบราว์เซอร์ที่ใช้ FCM เราจะพูดถึงวิธีทำงานในเบราว์เซอร์อื่นๆ ต่อไปในบทความนี้
สร้างโปรเจ็กต์นักพัฒนาซอฟต์แวร์ Firebase ใหม่
ในการเริ่มต้น คุณต้องสร้างโปรเจ็กต์ใหม่ที่ https://console.firebase.google.com/ โดยคลิก "สร้างโปรเจ็กต์ใหม่"
เพิ่มชื่อโปรเจ็กต์ สร้างโปรเจ็กต์ แล้วระบบจะนำคุณไปยังโปรเจ็กต์ หน้าแดชบอร์ด:
จากหน้าแดชบอร์ดนี้ ให้คลิกเฟืองถัดจากชื่อโปรเจ็กต์ที่ด้านบน ที่มุมซ้ายมือ แล้วคลิก "การตั้งค่าโปรเจ็กต์"
ในหน้าการตั้งค่า ให้คลิก "การรับส่งข้อความในระบบคลาวด์"
หน้านี้มีคีย์ API สำหรับการรับส่งข้อความพุช ซึ่งเราจะใช้ในภายหลัง และรหัสผู้ส่งที่เราต้องใส่ไว้ในไฟล์ Manifest ของเว็บแอปในอีก
เพิ่มไฟล์ Manifest ของเว็บแอป
สำหรับพุช เราต้องเพิ่มไฟล์ Manifest ด้วยช่อง gcm_sender_id ที่จะทำให้การสมัครใช้บริการพุชประสบความสำเร็จ พารามิเตอร์นี้จำเป็นสำหรับ เบราว์เซอร์ Chrome, Opera สำหรับ Android และ Samsung เพื่อให้ใช้ FCM / GCM ได้
เบราว์เซอร์เหล่านี้จะใช้ gcm_sender_id เมื่อสมัครใช้บริการผู้ใช้ อุปกรณ์ที่มี FCM ซึ่งหมายความว่า FCM สามารถระบุอุปกรณ์ของผู้ใช้และ ตรวจสอบว่ารหัสผู้ส่งตรงกับคีย์ API ที่เกี่ยวข้อง และผู้ใช้มี อนุญาตให้เซิร์ฟเวอร์ของคุณส่งข้อความพุชให้พวกเขาได้
ด้านล่างนี้คือไฟล์ Manifest ที่เรียบง่ายมาก
{
"name": "Push Demo",
"short_name": "Push Demo",
"icons": [{
"src": "images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}],
"start_url": "/index.html?homescreen=1",
"display": "standalone",
"gcm_sender_id": "<Your Sender ID Here>"
}
คุณจะต้องตั้งค่า gcm_sender_id เป็นรหัสผู้ส่งจาก โปรเจ็กต์ Firebase ของคุณ
เมื่อคุณบันทึกไฟล์ Manifest ในโครงการ (manifest.json คือ ) ให้อ้างอิงจาก HTML พร้อมกับแท็กต่อไปนี้ในส่วนหัวของไฟล์
<link rel="manifest" href="/manifest.json">
หากไม่เพิ่มไฟล์ Manifest ของเว็บที่มีพารามิเตอร์เหล่านี้ คุณจะได้รับข้อยกเว้น
เมื่อคุณพยายามสมัครรับข้อมูลผู้ใช้เพื่อพุชข้อความ โดยมีข้อผิดพลาด
"Registration failed - no sender id provided"
หรือ "Registration failed -
permission denied"
สมัครใช้บริการการรับส่งข้อความพุช
ตอนนี้คุณได้ตั้งค่าไฟล์ Manifest แล้ว คุณสามารถกลับไปยัง JavaScript ของเว็บไซต์ได้
หากต้องการสมัครใช้บริการ คุณต้องเรียกใช้เมธอด subscribe() ใน ออบเจ็กต์ PushManager ซึ่งเข้าถึงได้ผ่านทาง ServiceWorkerRegistration
การดำเนินการนี้จะขอให้ผู้ใช้ให้สิทธิ์แก่ต้นทางในการส่งพุช การแจ้งเตือน หากไม่มีสิทธิ์นี้ คุณจะไม่สามารถ สมัครรับข้อมูล
หากคำสัญญาแสดงขึ้นมา จากเมธอด subscribe() ที่ถูกต้อง คุณจะได้รับ PushSubscription ซึ่งจะมีปลายทาง
คุณควรบันทึกปลายทางไว้ในเซิร์ฟเวอร์สำหรับ เพราะคุณต้องให้พวกเขาส่งข้อความพุชในภายหลัง
โค้ดต่อไปนี้สมัครรับข้อความ Push จากผู้ใช้
function subscribe() {
// Disable the button so it can't be changed while
// we process the permission request
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.subscribe()
.then(function(subscription) {
// The subscription was successful
isPushEnabled = true;
pushButton.textContent = 'Disable Push Messages';
pushButton.disabled = false;
// TODO: Send the subscription.endpoint to your server
// and save it to send a push message at a later date
return sendSubscriptionToServer(subscription);
})
.catch(function(e) {
if (Notification.permission === 'denied') {
// The user denied the notification permission which
// means we failed to subscribe and the user will need
// to manually change the notification permission to
// subscribe to push messages
console.warn('Permission for Notifications was denied');
pushButton.disabled = true;
} else {
// A problem occurred with the subscription; common reasons
// include network errors, and lacking gcm_sender_id and/or
// gcm_user_visible_only in the manifest.
console.error('Unable to subscribe to push.', e);
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
}
});
});
}
ณ จุดนี้เว็บแอปของคุณพร้อมรับข้อความ Push แม้ว่าจะไม่มีอะไรเลย จะเกิดขึ้นจนกว่าเราจะเพิ่ม Listener เหตุการณ์พุชลงในไฟล์โปรแกรมทำงานของบริการ
Listener เหตุการณ์พุชของ Service Worker
เมื่อได้รับข้อความพุช (เราจะพูดถึงวิธีส่ง ในส่วนถัดไป) ข้อความแบบพุช จะมีการจัดส่งใน Service Worker ของคุณ ซึ่งคุณจะต้องใช้ เพื่อแสดงการแจ้งเตือน
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = '/images/icon-192x192.png';
var tag = 'simple-push-demo-notification-tag';
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
})
);
});
โค้ดนี้จะลงทะเบียน Listener เหตุการณ์ข้อความพุชและแสดงการแจ้งเตือนที่มี
ชื่อที่กำหนดไว้ล่วงหน้า เนื้อหา ไอคอน และแท็กการแจ้งเตือน
รายละเอียดเล็กๆ น้อยๆ อย่างหนึ่งที่ควรไฮไลต์สำหรับตัวอย่างนี้คือ event.waitUntil()
วิธีนี้ใช้เวลา
สัญญาและขยายความ
อายุการใช้งานของเครื่องจัดการเหตุการณ์ (หรืออาจเป็นการรักษาบริการ
อยู่ได้) จนกว่าสัญญาจะ
ชำระเงินแล้ว
ในกรณีนี้ คำสัญญาที่ส่งไปยัง event.waitUntil
คือ "คำสัญญา" ที่ส่งกลับมา
จาก showNotification()
แท็กการแจ้งเตือนทำหน้าที่เป็น สำหรับการแจ้งเตือนที่ไม่ซ้ำ ถ้าเราส่งข้อความพุชสองข้อความไปยัง โดยมีการหน่วงเวลาสั้นๆ และแสดงการแจ้งเตือน ด้วยแท็กเดียวกัน เบราว์เซอร์จะแสดงการแจ้งเตือนแรกและแทนที่ด้วย การแจ้งเตือนครั้งที่ 2 เมื่อได้รับข้อความ Push
หากคุณต้องการแสดงการแจ้งเตือนหลายรายการพร้อมกัน ให้ใช้แท็กอื่น หรือ ไม่มีการแท็กใดๆ เลย เราจะดูตัวอย่างที่สมบูรณ์ขึ้นของการแสดง การแจ้งเตือนในภายหลัง โพสต์ สำหรับตอนนี้ คุณควรทำทุกอย่างให้ง่ายขึ้น และดูว่าการส่งข้อความพุชแสดงขึ้นหรือไม่ การแจ้งเตือนนี้
การส่งข้อความพุช
เราสมัครรับข้อความแบบพุชไว้แล้ว และผู้ปฏิบัติงานบริการของเราก็พร้อมที่จะแสดง ส่งข้อความ Push ผ่าน FCM แล้ว
วิธีนี้ใช้ได้กับเบราว์เซอร์ที่ใช้ FCM เท่านั้น
เมื่อส่งตัวแปร PushSubscription.endpoint
ไปยังเซิร์ฟเวอร์
ปลายทางสำหรับ FCM มีความพิเศษ ข้อความนี้มีพารามิเตอร์ต่อท้าย URL ที่
เป็น registration_id
ตัวอย่างปลายทางมีดังนี้
https://fcm.googleapis.com/fcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP
URL ของ FCM คือ
https://fcm.googleapis.com/fcm/send
registration_id
จะเป็นดังนี้
APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP
เฉพาะเบราว์เซอร์ที่ใช้ FCM เท่านั้น ในเบราว์เซอร์ปกติคุณจะ เพียงมีปลายทางแล้วคุณก็เรียกปลายทางนั้นด้วยวิธีมาตรฐานและ ก็ทำงานได้ไม่ว่า URL จะเป็นอย่างไรก็ตาม
ซึ่งหมายความว่าคุณจะต้องตรวจสอบว่าปลายทางในเซิร์ฟเวอร์ สำหรับ FCM และหากมี ให้ดึงข้อมูลรหัสการจดทะเบียน เมื่อต้องการทำเช่นนี้ใน Python อาจดำเนินการบางอย่าง เช่น
if endpoint.startswith('https://fcm.googleapis.com/fcm/send'):
endpointParts = endpoint.split('/')
registrationId = endpointParts[len(endpointParts) - 1]
endpoint = 'https://fcm.googleapis.com/fcm/send'
เมื่อมีรหัสการลงทะเบียนแล้ว คุณจะเรียกใช้ FCM API ได้ คุณ ดูเอกสารอ้างอิงเกี่ยวกับ FCM API ได้ที่นี่
สิ่งสำคัญที่ควรจดจำเมื่อเรียกใช้ FCM มีดังนี้
- ส่วนหัว Authorization ที่มีค่าเป็น
key=<YOUR_API_KEY>
ต้องตั้งค่าเมื่อคุณเรียก API โดยที่<YOUR_API_KEY>
คือค่า คีย์ API จากโปรเจ็กต์ Firebase- FCM จะใช้คีย์ API เพื่อค้นหารหัสผู้ส่งที่เหมาะสม ผู้ใช้ได้ให้สิทธิ์โปรเจ็กต์ของคุณ และสุดท้าย การตรวจสอบว่าที่อยู่ IP ของเซิร์ฟเวอร์ได้รับอนุญาตสำหรับโปรเจ็กต์นั้นแล้ว
- ส่วนหัว
Content-Type
ที่เหมาะสมของapplication/json
หรือapplication/x-www-form-urlencoded;charset=UTF-8
ขึ้นอยู่กับว่าคุณ ส่งข้อมูลเป็น JSON หรือข้อมูลแบบฟอร์ม - อาร์เรย์ของ
registration_ids
- นี่คือรหัสการลงทะเบียนที่คุณเลือก แยกออกจากปลายทางจากผู้ใช้
โปรดตรวจสอบเอกสาร เกี่ยวกับวิธีส่งข้อความพุชจากเซิร์ฟเวอร์ของคุณ แต่ถ้าต้องการตรวจดู Service Worker อย่างรวดเร็ว คุณสามารถใช้ cURL เพื่อส่งข้อความพุชไปยังเบราว์เซอร์
สลับ <YOUR_API_KEY>
กับ <YOUR_REGISTRATION_ID>
ในคำสั่ง cURL นี้ด้วยคำสั่งของคุณเอง และเรียกใช้จากเทอร์มินัล
คุณควรจะเห็นการแจ้งเตือนที่น่าสนใจดังนี้
curl --header "Authorization: key=<YOUR_API_KEY>" --header
"Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d
"{\"registration_ids\":[\"<YOUR_REGISTRA>TION_ID\"]}"
![ตัวอย่างข้อความพุชจาก Chrome สำหรับ Android](https://developer.chrome.com/static/blog/push-notifications-on-the-open-web/image/example-a-push-message-40a45aaa8288a.gif?authuser=9&hl=th)
เมื่อพัฒนาตรรกะแบ็กเอนด์ โปรดทราบว่าส่วนหัวการให้สิทธิ์และ ของส่วนเนื้อหา POST จะมีผลเฉพาะกับปลายทาง FCM ดังนั้นให้ตรวจหาเมื่อ ปลายทางมีไว้สำหรับ FCM และเพิ่มส่วนหัวอย่างมีเงื่อนไขและจัดรูปแบบเนื้อหา POST สำหรับเบราว์เซอร์อื่นๆ (และหวังว่าจะใช้ Chrome ในอนาคต) โปรโตคอลการพุชในเว็บ
ข้อเสียของการใช้ Push API ใน Chrome ในปัจจุบันก็คือ ไม่สามารถส่งข้อมูลใดๆ ด้วยข้อความพุช ไม่เป็นไร เหตุผลที่เป็นเช่นนี้คือ ว่าในการดำเนินการในอนาคต ข้อมูลเพย์โหลดจะต้องได้รับการเข้ารหัสไว้ใน ก่อนส่งไปยังปลายทางการรับส่งข้อความพุช วิธีนี้จะทำให้ปลายทาง ผู้ให้บริการพุชใดๆ ก็ตาม จะไม่สามารถดูเนื้อหาของ ข้อความ Push และยังป้องกันช่องโหว่อื่นๆ ด้วย เช่น คุณภาพแย่ การตรวจสอบใบรับรอง HTTPS และการโจมตีแบบแทรกกลางการสื่อสารระหว่าง และผู้ให้บริการพุช แต่ยังไม่รองรับการเข้ารหัสนี้ ในระหว่างนี้ คุณจะต้องดึงข้อมูลที่จำเป็นในการ ป้อนข้อมูลการแจ้งเตือน
ตัวอย่างกิจกรรมพุชที่สมบูรณ์มากขึ้น
การแจ้งเตือนที่เราได้เห็นจนถึงตอนนี้นั้นค่อนข้างเรียบง่าย และตราบใดที่ตัวอย่างยังอยู่ การอธิบายกรณีการใช้งานในชีวิตจริงนั้นค่อนข้างแย่
ในความเป็นจริง คนส่วนใหญ่จะต้องการข้อมูลบางอย่างจากเซิร์ฟเวอร์ ก่อนที่จะแสดงการแจ้งเตือน ซึ่งอาจเป็นข้อมูลที่จะเติมข้อมูล ชื่อและข้อความการแจ้งเตือนที่เจาะจง หรือไปไกลกว่านั้น และแคชบางหน้าหรือข้อมูลบางอย่างไว้ เพื่อที่เมื่อผู้ใช้คลิกการแจ้งเตือน ทุกอย่างจะพร้อมใช้งานทันทีเมื่อเปิดเบราว์เซอร์ แม้ว่าจะ เครือข่ายไม่พร้อมใช้งานในเวลานั้น
ในโค้ดต่อไปนี้ เราดึงข้อมูลบางส่วนจาก API ให้แปลงการตอบสนองเป็น และใช้เพื่อป้อนข้อมูลการแจ้งเตือน
self.addEventListener('push', function(event) {
// Since there is no payload data with the first version
// of push messages, we'll grab some data from
// an API and use it to populate a notification
event.waitUntil(
fetch(SOME_API_ENDPOINT).then(function(response) {
if (response.status !== 200) {
// Either show a message to the user explaining the error
// or enter a generic message and handle the
// onnotificationclick event to direct the user to a web page
console.log('Looks like there was a problem. Status Code: ' + response.status);
throw new Error();
}
// Examine the text in the response
return response.json().then(function(data) {
if (data.error || !data.notification) {
console.error('The API returned an error.', data.error);
throw new Error();
}
var title = data.notification.title;
var message = data.notification.message;
var icon = data.notification.icon;
var notificationTag = data.notification.tag;
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
});
}).catch(function(err) {
console.error('Unable to retrieve data', err);
var title = 'An error occurred';
var message = 'We were unable to get the information for this push message';
var icon = URL_TO_DEFAULT_ICON;
var notificationTag = 'notification-error';
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
})
);
});
ขอย้ำอีกครั้งว่า event.waitUntil()
เป็นสิ่งที่คุ้มค่า
ซึ่งส่งผลให้ showNotification()
ได้คำมั่นสัญญาไว้ ซึ่งหมายความว่า
ที่ Listener เหตุการณ์จะไม่ออกจนกว่าการเรียก fetch()
แบบไม่พร้อมกันจะเสร็จสมบูรณ์ และ
การแจ้งเตือนจะแสดงขึ้น
คุณจะเห็นว่าเราแสดงการแจ้งเตือนแม้ว่าจะมีข้อผิดพลาดก็ตาม นี่คือ เพราะหากไม่ทำเช่นนั้น Chrome จะแสดงการแจ้งเตือนทั่วไปของส่วนขยายนั้นเอง
การเปิด URL เมื่อผู้ใช้คลิกการแจ้งเตือน
เมื่อผู้ใช้คลิกการแจ้งเตือน ระบบจะส่งออกเหตุการณ์ notificationclick
Service Worker ภายในเครื่องจัดการของคุณ คุณสามารถดำเนินการที่เหมาะสม
เช่น การโฟกัสแท็บหรือเปิดหน้าต่างด้วย URL ที่ต้องการ
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
// Android doesn't close the notification when you click on it
// See: http://crbug.com/463146
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(
clients.matchAll({
type: "window"
})
.then(function(clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow) {
return clients.openWindow('/');
}
})
);
});
ตัวอย่างนี้เปิดเบราว์เซอร์ไปที่รากของต้นทางของไซต์ โดยโฟกัส แท็บต้นทางเดียวกันที่มีอยู่ หากมี หรือเปิดแท็บใหม่
เราได้โพสต์เกี่ยวกับสิ่งต่างๆ ที่คุณสามารถทำได้ด้วย Notification API ที่นี่
ยกเลิกการสมัครใช้บริการอุปกรณ์ของผู้ใช้
คุณได้สมัครใช้บริการอุปกรณ์ของผู้ใช้แล้ว และผู้ใช้รายนั้นได้รับข้อความพุช แต่คุณจะ ยกเลิกการสมัครไหม
สิ่งสำคัญที่ต้องยกเลิกการสมัครรับข้อมูลของผู้ใช้คือการเรียกใช้
unsubscribe()
ใน
PushSubscription
และลบปลายทางออกจากเซิร์ฟเวอร์ (เพื่อไม่ให้
การส่งข้อความพุชที่คุณทราบว่าจะไม่ได้รับ) โค้ดด้านล่างจะ
นี่แหละ
function unsubscribe() {
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// To unsubscribe from push messaging, you need get the
// subscription object, which you can call unsubscribe() on.
serviceWorkerRegistration.pushManager.getSubscription().then(
function(pushSubscription) {
// Check we have a subscription to unsubscribe
if (!pushSubscription) {
// No subscription object, so set the state
// to allow the user to subscribe to push
isPushEnabled = false;
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
return;
}
var subscriptionId = pushSubscription.subscriptionId;
// TODO: Make a request to your server to remove
// the subscriptionId from your data store so you
// don't attempt to send them push messages anymore
// We have a subscription, so call unsubscribe on it
pushSubscription.unsubscribe().then(function(successful) {
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
isPushEnabled = false;
}).catch(function(e) {
// We failed to unsubscribe, this can lead to
// an unusual state, so may be best to remove
// the users data from your data store and
// inform the user that you have done so
console.log('Unsubscription error: ', e);
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
});
}).catch(function(e) {
console.error('Error thrown while unsubscribing from push messaging.', e);
});
});
}
ทำให้การสมัครรับข้อมูลเป็นปัจจุบันอยู่เสมอ
การสมัครรับข้อมูลอาจไม่สอดคล้องกันระหว่าง FCM กับเซิร์ฟเวอร์ของคุณ ตรวจสอบว่า
เซิร์ฟเวอร์ของคุณจะแยกวิเคราะห์เนื้อหาการตอบสนองของ POST ที่ส่งของ FCM API โดยมองหา
error:NotRegistered
และ canonical_id
ผลลัพธ์ตามที่อธิบายไว้ในเอกสารประกอบของ FCM
นอกจากนี้ การสมัครใช้บริการอาจไม่ตรงกันระหว่าง Service Worker กับ
เซิร์ฟเวอร์ ตัวอย่างเช่น หลังจากที่สมัครรับข้อมูล/ยกเลิกการสมัครสำเร็จแล้ว เหตุการณ์ที่ไม่สม่ำเสมอ
การเชื่อมต่อเครือข่ายอาจทำให้คุณอัปเดตเซิร์ฟเวอร์ไม่ได้ หรือผู้ใช้อาจ
เพิกถอนสิทธิ์การแจ้งเตือน ซึ่งทำให้เกิดการยกเลิกการสมัครโดยอัตโนมัติ แฮนเดิล
กรณีเช่นนี้โดยการตรวจสอบผลลัพธ์ของ
serviceWorkerRegistration.pushManager.getSubscription()
เป็นระยะๆ (เช่น
เมื่อหน้าเว็บโหลดขึ้น) และซิงค์ข้อมูลกับเซิร์ฟเวอร์ คุณอาจต้องการ
สมัครใช้บริการอีกครั้งโดยอัตโนมัติหากคุณไม่ได้สมัครใช้บริการแล้วและ
Notification.permission == 'granted'
ในเดือนsendSubscriptionToServer()
คุณจะต้องพิจารณาวิธีจัดการ
คำขอเครือข่ายล้มเหลวเมื่ออัปเดต endpoint
วิธีแก้ไขอย่างหนึ่งคือ
เพื่อติดตามสถานะของ endpoint
ในคุกกี้
เพื่อดูว่าเซิร์ฟเวอร์ของคุณต้องการรายละเอียดล่าสุดหรือไม่
ขั้นตอนข้างต้นทั้งหมดส่งผลให้เกิดการนำข้อความ Push มาใช้อย่างเต็มรูปแบบบน เว็บใน Chrome 46 แต่ยังคงมีฟีเจอร์จำเพาะที่จะทำให้สิ่งต่างๆ ง่ายขึ้น (เช่นเดียวกับ API มาตรฐานสำหรับเรียกข้อความพุช) แต่รุ่นนี้ช่วยให้คุณสามารถ เริ่มสร้างข้อความ Push ลงในเว็บแอปวันนี้เลย
วิธีแก้ไขข้อบกพร่องของเว็บแอป
ขณะใช้งานข้อความพุช ข้อบกพร่องจะอยู่ใน 1 ใน 2 ที่ต่อไปนี้ หรือ Service Worker ของคุณ
ข้อบกพร่องในหน้าเว็บสามารถแก้ไขข้อบกพร่องได้โดยใช้ DevTools วิธีแก้ไขข้อบกพร่องของ Service Worker ปัญหา คุณมี 2 ตัวเลือกดังนี้
- ไปที่ chrome://inspect > Service Worker มุมมองนี้ไม่มี ข้อมูลอื่นนอกจาก Service Worker ที่ทำงานอยู่ในปัจจุบัน
- ไปที่ chrome://serviceworker-internals และดู Service Worker และดูว่ามีข้อผิดพลาดหรือไม่ หน้านี้คือ ชั่วคราวจนกว่าเครื่องมือสำหรับนักพัฒนาเว็บจะมีชุดฟีเจอร์ที่คล้ายกัน
เคล็ดลับดีๆ ประการหนึ่งที่ผมสามารถมอบให้กับคนที่เพิ่งเริ่มใช้งานบริการได้ก็คือ ให้ใช้ช่องทำเครื่องหมายชื่อ "เปิดหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บและหยุดการเรียกใช้ JavaScript ชั่วคราว ในการเริ่มต้นโปรแกรมทำงานของบริการเพื่อแก้ไขข้อบกพร่อง" ช่องทำเครื่องหมายนี้จะเพิ่มเบรกพอยท์ที่ การเริ่มต้นโปรแกรมทำงานของบริการและหยุดการดำเนินการชั่วคราว ซึ่งจะช่วยให้คุณดำเนินการต่อไปนี้ได้ ประวัติการทำงานหรือขั้นตอนผ่านสคริปต์ Service Worker ของคุณและดูว่า ปัญหา
![ภาพหน้าจอแสดงตำแหน่งที่มีช่องทำเครื่องหมายการดำเนินการหยุดชั่วคราวใน serviceworker-internals](https://developer.chrome.com/static/blog/push-notifications-on-the-open-web/image/screenshot-showing-where-c2ca72dd7d118.png?authuser=9&hl=th)
หากดูเหมือนว่าจะเกิดปัญหาระหว่าง FCM กับเหตุการณ์ Push ของโปรแกรมทำงานของบริการ ก็จะไม่สามารถทำสิ่งใดเพื่อแก้ไขข้อบกพร่อง เนื่องจากไม่มีวิธีที่จะ เพื่อดูว่า Chrome ได้รับข้อมูลใดหรือไม่ สิ่งสำคัญที่ต้องมั่นใจคือ การตอบสนองจาก FCM จะสำเร็จเมื่อเซิร์ฟเวอร์ของคุณทำการเรียก API จะมีหน้าตา เช่น
{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}
สังเกตการตอบกลับ "success": 1
แต่ถ้าเห็นความล้มเหลวแทน
บ่งบอกว่ามีบางอย่างไม่ถูกต้องกับรหัสการลงทะเบียน FCM และข้อความ Push
ข้อความไม่ถูกส่งไปยัง Chrome
การแก้ไขข้อบกพร่องของ Service Worker ใน Chrome สำหรับ Android
ปัจจุบันการแก้ไขข้อบกพร่องของ Service Worker ใน Chrome สำหรับ Android ยังไม่ชัดเจน คุณต้องไปที่ chrome://inspect ค้นหาอุปกรณ์ของคุณ และมองหา รายการที่มีชื่อว่า "Worker pid:...." ซึ่งมี URL ของบริการของคุณ
![ภาพหน้าจอแสดงตำแหน่งของ Service Worker ที่อยู่ในการตรวจสอบของ Chrome](https://developer.chrome.com/static/blog/push-notifications-on-the-open-web/image/screenshot-showing-where-03978e62edfe4.png?authuser=9&hl=th)
UX สำหรับข้อความ Push
ทีม Chrome ได้จัดทำเอกสารเกี่ยวกับแนวทางปฏิบัติแนะนำ ข้อความ Push รวมทั้งเอกสารที่พูดถึง ของเคส Edge เมื่อทำงานกับข้อความ Push
อนาคตของการรับส่งข้อความพุชใน Chrome และ Open Web
ส่วนนี้จะมีรายละเอียดเล็กน้อยเกี่ยวกับ Chrome บางส่วน เฉพาะบางส่วนของการติดตั้งใช้งานนี้ที่คุณควรทราบ รวมทั้งวิธีการ จะแตกต่างจากการใช้งานเบราว์เซอร์อื่นๆ
โปรโตคอลพุชและปลายทางสำหรับเว็บ
ข้อดีของมาตรฐาน Push API คือคุณควรสามารถ ปลายทาง แล้วส่งต่อไปยังเซิร์ฟเวอร์และส่งพุช โดยใช้โปรโตคอลการพุชเว็บ
Web Push Protocol คือมาตรฐานใหม่ ที่ผู้ให้บริการพุชสามารถนำไปใช้ ทำให้นักพัฒนาซอฟต์แวร์ไม่ต้องกังวลว่า ผู้ให้บริการพุชคือใคร เพื่อหลีกเลี่ยงความจำเป็นในการลงชื่อสมัครใช้คีย์ API และส่ง ข้อมูลที่จัดรูปแบบได้ เช่นเดียวกับที่ทำกับ FCM
Chrome เป็นเบราว์เซอร์แรกที่ใช้ Push API และ FCM ไม่ได้
รองรับ Web Push Protocol ซึ่งเป็นเหตุผลที่ Chrome จำเป็นต้องใช้
gcm_sender_id
และคุณต้องใช้ API ที่เหลือสำหรับ FCM
เป้าหมายสุดท้ายของ Chrome คือการหันมาใช้ Web Push Protocol กับ Chrome และ FCM
คุณต้องตรวจหาปลายทางจนกว่าจะถึงวันที่ดังกล่าว "https://fcm.googleapis.com/fcm/send" และจัดการแยกจากปลายทางอื่นๆ เช่น จัดรูปแบบข้อมูลเพย์โหลดในรูปแบบ และเพิ่มคีย์การให้สิทธิ์
วิธีใช้งานโปรโตคอลการพุชเว็บ
ขณะนี้ Firefox Nightly กำลังดำเนินการพุชและมีแนวโน้มที่จะเป็นเบราว์เซอร์แรก เพื่อใช้งานโปรโตคอลพุชเว็บ
คำถามที่พบบ่อย
และมีรายละเอียดทางเทคนิคอะไรบ้าง
https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/
ฉันจะป้องกันการแจ้งเตือนซ้ำได้ไหมหากตัวตนบนเว็บของฉันมีต้นทางหลายแห่ง หรือหากฉันมีทั้งการแสดงข้อมูลบนเว็บและเนทีฟ
ปัจจุบันยังไม่มีวิธีแก้ปัญหาดังกล่าว แต่คุณสามารถติดตามความคืบหน้าได้ใน Chromium
สถานการณ์ที่เหมาะสมคือการมีรหัสบางอย่างสำหรับอุปกรณ์ของผู้ใช้ ฝั่งเซิร์ฟเวอร์จะจับคู่กับรหัสการสมัครใช้บริการแอปที่มาพร้อมเครื่องและเว็บแอป ตัดสินใจว่าจะส่งข้อความ Push ไปให้ใคร คุณสามารถทำได้ด้วยขนาดหน้าจอ รุ่นอุปกรณ์ โดยจะแชร์คีย์ที่สร้างขึ้นระหว่างเว็บแอปกับแอปที่มาพร้อมเครื่อง แต่ แต่ละแนวทางก็มีทั้งข้อดีและข้อเสีย
ทำไมฉันจึงต้องมี gcm_sender_id
ซึ่งเป็นสิ่งจำเป็นเพื่อให้ Chrome, Opera สำหรับ Android และเบราว์เซอร์ Samsung สามารถ ใช้ Firebase Cloud Messaging (FCM) API เป้าหมายคือการใช้ โปรโตคอลพุชเว็บเมื่อได้ข้อสรุปมาตรฐานและ FCM สามารถรองรับได้
เหตุใดจึงไม่ใช้ Web Socket หรือเหตุการณ์ที่เซิร์ฟเวอร์ส่ง (EventSource)
ข้อดีของการใช้ข้อความ Push คือ แม้จะปิดหน้าเว็บแล้ว โปรแกรมทำงานของบริการจะกลับมาทำงานและสามารถแสดงการแจ้งเตือนได้ Web Socket และ EventSource จะปิดการเชื่อมต่อเมื่อมีการปิดหน้าเว็บหรือเบราว์เซอร์
ฉันต้องทำอย่างไรหากไม่ต้องการใช้การนำส่งกิจกรรมในเบื้องหลัง
หากคุณไม่ต้องการการนำส่งในเบื้องหลัง Web Sockets ก็เป็นตัวเลือกที่ยอดเยี่ยม
ฉันสามารถใช้ข้อความ Push โดยไม่แสดงการแจ้งเตือนเมื่อใด (เช่น ข้อความ Push ในเบื้องหลัง)
ยังไม่มีลำดับเวลาว่าการอัปเดตนี้จะพร้อมใช้งานเมื่อใด แต่มี ตั้งใจที่จะใช้การซิงค์ในเบื้องหลัง และแม้จะไม่มีการตัดสินใจหรือข้อมูลจำเพาะ แต่ก็มีการพูดคุยถึงการทำให้ การพุชแบบเงียบๆ พร้อมการซิงค์ในเบื้องหลัง
ทำไมต้องใช้ HTTPS ฉันจะแก้ปัญหานี้ระหว่างการพัฒนาได้อย่างไร
Service Worker ต้องใช้ต้นทางที่ปลอดภัยเพื่อให้มั่นใจว่าสคริปต์ Service Worker มาจากต้นทางที่ตั้งใจไว้ และไม่ได้มาจากคนกลาง การโจมตี ซึ่งหมายความว่าการใช้ HTTPS ในเว็บไซต์ที่เผยแพร่อยู่ตอนนี้หมายความว่า ระหว่างการพัฒนา
การรองรับเบราว์เซอร์มีลักษณะอย่างไร
Chrome รองรับในเวอร์ชันที่เสถียรและ Mozilla ได้ทำงานพุชใน Firefox Nightly ดูข้อมูลเพิ่มเติมได้ที่ข้อบกพร่องในการใช้งาน Push API และติดตามการใช้งานการแจ้งเตือนได้ที่นี่
ฉันสามารถนำการแจ้งเตือนออกหลังจากพ้นระยะเวลาหนึ่งๆ ไปแล้วได้ไหม
ปัจจุบันยังทําไม่ได้ แต่เราวางแผนที่จะเพิ่มการสนับสนุนเพื่อให้ได้รับ รายการการแจ้งเตือนที่ปรากฏอยู่ในปัจจุบัน หากคุณมีกรณีการใช้งานในการตั้งค่า เวลาหมดอายุของการแจ้งเตือนหลังจากที่ระบบแสดงการแจ้งเตือนที่เกิดขึ้น เราอยากจะทราบว่า คืออะไร โปรดเพิ่มความคิดเห็น และเราจะส่งกลับไปให้ทีม Chrome
หากคุณต้องการเพียงแค่หยุดส่งข้อความ Push ถึงผู้ใช้ หลังจากช่วงระยะเวลาหนึ่ง และไม่สนใจว่าการแจ้งเตือนจะแสดงอยู่นานเพียงใด แล้วคุณสามารถใช้พารามิเตอร์ Time to Live (ttl) ของ FCM ดูข้อมูลเพิ่มเติมที่นี่
การรับส่งข้อความพุชใน Chrome มีข้อจำกัดอะไรบ้าง
โพสต์นี้มีข้อจำกัดบางประการ ดังนี้
- การใช้ CCM ของ Chrome เป็นบริการพุชทำให้เกิดลิขสิทธิ์ เรากำลังทำงานร่วมกับบริษัทเพื่อดูว่าจะสานต่อสิ่งเหล่านี้ได้ไหม ในอนาคต
- คุณต้องแสดงการแจ้งเตือนเมื่อได้รับข้อความพุช
- Chrome บนเดสก์ท็อปมีข้อควรระวังว่า ถ้า Chrome ไม่ทำงาน ให้พุชข้อความ ซึ่งแตกต่างจาก ChromeOS และ Android ที่ข้อความพุช จะได้รับเสมอ
เราควรใช้ API สิทธิ์ไหม
มีการใช้งาน Permissions API ใน Chrome, แต่อาจไม่มีให้ใช้งานได้ในทุกเบราว์เซอร์ ดูข้อมูลเพิ่มเติมได้ที่นี่
เหตุใด Chrome จึงไม่เปิดแท็บก่อนหน้าเมื่อฉันคลิกการแจ้งเตือน
ปัญหานี้มีผลเฉพาะกับหน้าเว็บที่บริการไม่ได้ควบคุมอยู่เท่านั้น ดูข้อมูลเพิ่มเติมได้ที่นี่
จะเกิดอะไรขึ้นหากการแจ้งเตือนล้าสมัยตามเวลาที่อุปกรณ์ของผู้ใช้ได้รับข้อความ Push ไว้
คุณจะต้องแสดงการแจ้งเตือนอยู่เสมอเมื่อได้รับข้อความพุช ในสถานการณ์ที่คุณต้องการส่งการแจ้งเตือน แต่การแจ้งเตือนจะมีประโยชน์เท่านั้น ในช่วงระยะเวลาหนึ่ง คุณสามารถใช้ฟังก์ชัน "time_to_live" พารามิเตอร์ใน CCM เพื่อที่ FCM จะไม่ส่งข้อความพุชหากเลยเวลาหมดอายุไปแล้ว
ดูรายละเอียดเพิ่มเติมได้ที่นี่
จะเกิดอะไรขึ้นหากฉันส่งข้อความพุช 10 ข้อความแต่ต้องการให้อุปกรณ์ได้รับข้อความเพียงข้อความเดียว
FCM มี "collapse_key" ที่คุณสามารถใช้เพื่อบอก FCM ให้แทนที่ ข้อความที่มี 'collapse_key' เดียวกันพร้อมด้วยข้อความใหม่