ข้อความ Push ใน Open Web

ถ้าคุณถามกลุ่มนักพัฒนาว่าคุณลักษณะใดของ อุปกรณ์เคลื่อนที่ที่ขาดหายไป ข้อความ 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 สำหรับเว็บไซต์ของเรา

ตั้งค่าสถานะเริ่มต้น

เมื่อลงทะเบียน Service Worker แล้ว เราจำเป็นต้องตั้งค่าสถานะของ UI

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

คุณดูหลักเกณฑ์ด้าน UX ได้ในเอกสารนี้ ในบทความนี้ เราจะเน้นด้านเทคนิค

ณ จุดนี้คุณอาจคิดว่ามีเพียง 2 รัฐที่ต้องจัดการ เปิดหรือปิดใช้งาน อย่างไรก็ตาม ยังมีรัฐอื่นๆ โดยรอบ การแจ้งเตือนที่ต้องพิจารณาด้วย

มี 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\"]}"

เมื่อพัฒนาตรรกะแบ็กเอนด์ โปรดทราบว่าส่วนหัวการให้สิทธิ์และ ของส่วนเนื้อหา 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 ตัวเลือกดังนี้

1. ไปที่ chrome://inspect > Service Worker มุมมองนี้ไม่มี ข้อมูลอื่นนอกจาก Service Worker ที่ทำงานอยู่ในปัจจุบัน
2. ไปที่ chrome://serviceworker-internals และดู Service Worker และดูว่ามีข้อผิดพลาดหรือไม่ หน้านี้คือ ชั่วคราวจนกว่าเครื่องมือสำหรับนักพัฒนาเว็บจะมีชุดฟีเจอร์ที่คล้ายกัน

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

หากดูเหมือนว่าจะเกิดปัญหาระหว่าง 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 ของบริการของคุณ

UX สำหรับข้อความ Push

ทีม Chrome ได้จัดทำเอกสารเกี่ยวกับแนวทางปฏิบัติแนะนำ ข้อความ Push รวมทั้งเอกสารที่พูดถึง ของเคส Edge เมื่อทำงานกับข้อความ Push

• แนวทางปฏิบัติแนะนำสำหรับ UX ของสิทธิ์ข้อความ Push
• เคส Push Edge และการบรรเทาปัญหา

อนาคตของการรับส่งข้อความพุชใน 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' เดียวกันพร้อมด้วยข้อความใหม่

ดูรายละเอียดเพิ่มเติมได้ที่นี่