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

Matt Gaunt

Twitter หน้าแรก

คำเตือน: บล็อกโพสต์นี้ค่อนข้างเก่าไปหน่อย หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้พุช โปรดดูเอกสารข้อความ Push ในเว็บ

หากคุณถามเหล่านักพัฒนาว่าคุณลักษณะในอุปกรณ์เคลื่อนที่ใดบ้างที่ยังไม่มีในเว็บ ข้อความ Push มักเป็นคำตอบแรกๆ ในรายการ

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

ตั้งแต่ Chrome เวอร์ชัน 42 เป็นต้นไป นักพัฒนาซอฟต์แวร์จะใช้ Push API และ Notification API ได้

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

เรายังดูสิ่งที่จะเพิ่มลงใน API ใน Chrome เวอร์ชันต่อๆ ไปอีกด้วย และสุดท้ายเราจะมีคำถามที่พบบ่อย

การนำการรับส่งข้อความพุชสำหรับ Chrome ไปใช้

ส่วนนี้จะอธิบายแต่ละขั้นตอนที่คุณต้องทำเพื่อรองรับการรับส่งข้อความในเว็บแอป

ลงทะเบียน Service Worker

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

ด้านล่างคือตัวอย่างวิธีลงทะเบียน 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 เป็นตัวแปรร่วมซึ่งจะติดตามว่าการรับส่งข้อความ Push มีการสมัครใช้บริการอยู่ในปัจจุบันหรือไม่ ระบบจะอ้างอิงสิ่งเหล่านี้ตลอด ข้อมูลโค้ด

จากนั้นเราจะตรวจสอบว่าโปรแกรมทำงานของบริการได้รับการสนับสนุนก่อนที่จะลงทะเบียนไฟล์ service-worker.js ซึ่งมีตรรกะสำหรับจัดการข้อความพุช นี่เป็นเพียงการแจ้งเบราว์เซอร์ว่าไฟล์ JavaScript นี้เป็น Service Worker สำหรับเว็บไซต์ของเรา

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

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

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

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

ณ จุดนี้ คุณอาจคิดว่ามีเพียง 2 สถานะที่ต้องจัดการ คือเปิดใช้ หรือปิดใช้ แต่ยังมีสถานะอื่นๆ บางสถานะ เกี่ยวกับการแจ้งเตือนที่คุณต้องคํานึงถึง

มี API จำนวนมากที่เราต้องตรวจสอบก่อนที่จะเปิดใช้ปุ่ม และหากรองรับทุกอย่าง เราสามารถเปิดใช้ UI และตั้งค่าสถานะเริ่มต้นเพื่อระบุว่ามีการสมัครใช้บริการการรับส่งข้อความพุชหรือไม่

เนื่องจากการตรวจสอบส่วนใหญ่นี้ส่งผลให้ 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 หากไม่เป็นเช่นนั้น เราจะไม่สามารถแสดงการแจ้งเตือนจาก Service Worker เมื่อได้รับข้อความ Push ได้
• เราตรวจสอบ Notification.permission ปัจจุบันเพื่อให้แน่ใจว่าไม่ใช่ "denied" สิทธิ์ที่ถูกปฏิเสธหมายความว่าคุณจะแสดงการแจ้งเตือนไม่ได้จนกว่าผู้ใช้จะเปลี่ยนสิทธิ์ในเบราว์เซอร์ด้วยตนเอง
• เราจะตรวจสอบว่า PushManager พร้อมใช้งานในออบเจ็กต์หน้าต่างหรือไม่ เพื่อตรวจสอบว่าระบบรองรับการรับส่งข้อความพุชหรือไม่
• สุดท้าย เราใช้ pushManager.getSubscription() เพื่อตรวจสอบว่า มีการสมัครใช้บริการแล้วหรือยัง ซึ่งถ้าส่ง เราจะส่งรายละเอียดการสมัครใช้บริการไปยังเซิร์ฟเวอร์ของเรา เพื่อให้มีข้อมูลที่ถูกต้องและตั้งค่า UI เพื่อระบุว่ามีการเปิดใช้การรับส่งข้อความพุชอยู่แล้วหรือไม่ เราจะดูรายละเอียดสิ่งที่อยู่ในออบเจ็กต์การสมัครใช้บริการ ในส่วนต่อๆ ไปของบทความนี้

เราจะรอจนกว่า navigator.serviceWorker.ready จะได้รับการแก้ไขจึงจะตรวจสอบการสมัครใช้บริการและเปิดใช้ปุ่มพุช เนื่องจากคุณจะสมัครใช้บริการข้อความ Push ได้จริงๆ เท่านั้น

ขั้นตอนถัดไปคือจัดการเมื่อผู้ใช้ต้องการเปิดใช้ข้อความพุช แต่ก่อนที่เราจะทำเช่นนั้นได้ เราต้องสร้างโปรเจ็กต์แผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google และเพิ่มพารามิเตอร์บางอย่างลงในไฟล์ Manifest เพื่อใช้การรับส่งข้อความในระบบคลาวด์ของ Firebase (FCM) ซึ่งเดิมเรียกว่าการรับส่งข้อความในระบบคลาวด์ของ Google (GCM)

สร้างโปรเจ็กต์บน Firebase Developer Console

Chrome ใช้ FCM เพื่อจัดการการส่งและการส่งข้อความพุช อย่างไรก็ตาม หากต้องการใช้ FCM API คุณต้องตั้งค่าโปรเจ็กต์ใน Firebase Developer Console

ขั้นตอนต่อไปนี้มีไว้สำหรับเบราว์เซอร์ Chrome, Opera for 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

การดำเนินการนี้จะขอให้ผู้ใช้ให้สิทธิ์ต้นทางในการส่งข้อความ Push หากไม่มีสิทธิ์นี้ คุณจะไม่สามารถสมัครใช้บริการได้สำเร็จ

หาก promise ที่แสดงผลโดยเมธอด 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';
        }
        });
    });
}

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

Listener เหตุการณ์พุชของ 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 ข้อความไปยังปลายทางเดียวกันโดยมีความล่าช้าสั้นๆ ระหว่างข้อความดังกล่าว และแสดงการแจ้งเตือนด้วยแท็กเดียวกัน เบราว์เซอร์จะแสดงการแจ้งเตือนแรกและแทนที่ด้วยการแจ้งเตือนที่ 2 เมื่อได้รับข้อความ Push

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

การส่งข้อความพุช

เราได้สมัครรับข้อมูลข้อความพุชและ Service Worker ของเราพร้อมที่จะแสดงการแจ้งเตือนแล้ว ถึงเวลาส่งข้อความพุชผ่าน 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 หรือไม่ และหากเป็นปลายทาง ให้แยก registration_id ออก การดำเนินการใน 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_REGISTRATION_ID>\"]}"

เมื่อคุณพัฒนาตรรกะแบ็กเอนด์ โปรดทราบว่าส่วนหัวการให้สิทธิ์และรูปแบบเนื้อหาของ POST นั้นมีไว้สำหรับปลายทาง FCM โดยเฉพาะ ดังนั้นให้ตรวจหาเมื่อปลายทางคือ FCM จากนั้นเพิ่มส่วนหัวและจัดรูปแบบเนื้อหาของ POST ตามเงื่อนไข คุณจะต้องใช้โปรโตคอล Web Push สำหรับเบราว์เซอร์อื่นๆ (และคาดว่าจะใช้ Chrome ในอนาคต)

ข้อเสียของการใช้งาน Push API ในปัจจุบันใน Chrome คือคุณไม่สามารถส่งข้อมูลใดๆ ด้วยข้อความ Push ได้ ไม่ต้องทำอะไร เหตุผลก็คือ ในการใช้งานในอนาคต ข้อมูลเพย์โหลดจะต้องมีการเข้ารหัสบนเซิร์ฟเวอร์ของคุณก่อนที่จะส่งไปยังปลายทางการรับส่งข้อความพุช วิธีนี้ทำให้ปลายทางไม่ว่าจะเป็นผู้ให้บริการพุชรายใดก็ตาม จะดูเนื้อหาของข้อความ 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 จะแสดงการแจ้งเตือนทั่วไปของ 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 ที่นี่โดยเฉพาะ

ยกเลิกการสมัครอุปกรณ์ของผู้ใช้

คุณสมัครรับข้อมูลอุปกรณ์ของผู้ใช้และพวกเขาได้รับข้อความ Push อยู่ แต่คุณจะยกเลิกการสมัครได้อย่างไร

สิ่งสำคัญที่จำเป็นต่อการยกเลิกการสมัครในอุปกรณ์ของผู้ใช้คือการเรียกใช้เมธอด 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 ในคุกกี้เพื่อพิจารณาว่าเซิร์ฟเวอร์ของคุณต้องการรายละเอียดล่าสุดหรือไม่

ทุกขั้นตอนข้างต้นจะส่งผลให้มีการใช้ข้อความพุชบนเว็บอย่างเต็มรูปแบบใน Chrome 46 ยังมีฟีเจอร์แบบเจาะจงที่จะทำให้ทุกอย่างง่ายขึ้น (เช่น API มาตรฐานสำหรับเรียกข้อความพุช) แต่รุ่นนี้ช่วยให้คุณเริ่มสร้างการรับส่งข้อความพุชลงในเว็บแอปได้แล้ววันนี้

วิธีแก้ไขข้อบกพร่องของเว็บแอป

ขณะใช้ข้อความพุช ข้อบกพร่องจะอยู่ใน 1 ใน 2 ที่ ได้แก่ หน้าเว็บหรือ Service Worker

คุณแก้ไขข้อบกพร่องในหน้าได้โดยใช้DevTools คุณมี 2 ตัวเลือกในการแก้ไขข้อบกพร่องของ Service Worker ดังนี้

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

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

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

{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}

สังเกตการตอบสนอง "success": 1 แต่ถ้าเห็นข้อผิดพลาดแทน แสดงว่ามีบางอย่างไม่ถูกต้องโดยใช้รหัสการลงทะเบียน FCM และข้อความพุชไม่ถูกส่งไปยัง Chrome

การแก้ไขข้อบกพร่องของ Service Worker ใน Chrome สำหรับ Android

ขณะนี้การแก้ไขข้อบกพร่องของ Service Worker ใน Chrome สำหรับ Android ยังไม่ชัดเจน คุณต้องไปที่ chrome://inspect ค้นหาอุปกรณ์ แล้วมองหารายการชื่อ "Worker pid:...." ซึ่งมี URL ของ Service Worker

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

ทีม Chrome ได้รวบรวมเอกสารแนวทางปฏิบัติแนะนำ สำหรับ UX ข้อความ Push และเอกสารที่พูดถึงกรณีสุดโต่งบางส่วนเมื่อใช้งานข้อความ Push

• แนวทางปฏิบัติแนะนำสำหรับสิทธิ์ข้อความ Push ของ UX
• กรณีปัญหาและการลดข้อผิดพลาดแบบพุชการแจ้งเตือน

อนาคตของการรับส่งข้อความพุชบน Chrome และเว็บแบบเปิด

ส่วนนี้จะอธิบายรายละเอียดเล็กๆ น้อยๆ เกี่ยวกับส่วนเฉพาะของ Chrome บางส่วนเกี่ยวกับการใช้งานนี้ที่คุณควรทราบ และความแตกต่างจะแตกต่างจากการใช้งานเบราว์เซอร์แบบอื่นๆ

โปรโตคอล Web Push และปลายทาง

ข้อดีของมาตรฐาน Push API คือคุณควรสามารถนำปลายทาง ส่งไปยังเซิร์ฟเวอร์ และส่งข้อความพุชได้โดยใช้โปรโตคอล Web Push

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

Chrome เป็นเบราว์เซอร์แรกที่ใช้ Push API ในขณะที่ FCM ไม่รองรับโปรโตคอล Web Push ซึ่งเป็นเหตุผลที่ Chrome ต้องใช้ gcm_sender_id และคุณต้องใช้ API ที่เหลือสำหรับ FCM

เป้าหมายสุดท้ายของ Chrome คือการใช้ Web Push Protocol กับ Chrome และ FCM

ในระหว่างนี้ คุณต้องตรวจหาปลายทาง "https://fcm.googleapis.com/fcm/send" และจัดการแยกต่างหากจากปลายทางอื่นๆ เช่น จัดรูปแบบข้อมูลเพย์โหลดตามวิธีที่กำหนดและเพิ่มคีย์การให้สิทธิ์

วิธีใช้งานโปรโตคอล Web Push

ขณะนี้ Firefox Nightly กำลังทดสอบพุชอยู่ และน่าจะเป็นเบราว์เซอร์แรกที่ติดตั้งโปรโตคอล Web Push

คำถามที่พบบ่อย

มีรายละเอียดทางเทคนิคที่ใด

https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/

ฉันจะป้องกันการแจ้งเตือนซ้ำได้ไหมหากตัวตนบนเว็บของฉันมีหลายต้นทาง หรือหากมีทั้งเว็บและตัวตนในเครื่อง

ขณะนี้ยังไม่มีวิธีแก้ปัญหานี้ แต่คุณสามารถติดตามความคืบหน้าได้ใน Chromium

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

ทำไมฉันจึงต้องมี gcm_sender_id

ซึ่งเป็นสิ่งจำเป็นเพื่อให้ Chrome, Opera สำหรับ Android และเบราว์เซอร์ Samsung สามารถใช้ Firebase Cloud Messaging (FCM) API ได้ เป้าหมายคือการใช้ Web Push Protocol เมื่อมีการสรุปมาตรฐานและ FCM สามารถรองรับโปรโตคอลนั้นได้

เหตุใดจึงไม่ใช้ Web Sockets หรือเหตุการณ์ที่เซิร์ฟเวอร์ส่ง (EventSource)

ข้อดีของการใช้ข้อความ Push คือแม้เพจจะปิดอยู่ก็ตาม แต่โปรแกรมทำงานของบริการจะยังตื่นอยู่และแสดงการแจ้งเตือนได้ Web Sockets และ EventSource จะปิดการเชื่อมต่อเมื่อปิดหน้าหรือเบราว์เซอร์

ฉันต้องทำอย่างไรหากไม่ต้องการส่งกิจกรรมในเบื้องหลัง

หากคุณไม่ต้องการนำส่งในเบื้องหลัง Web Socket ก็เป็นตัวเลือกที่ดี

ฉันจะใช้ข้อความ Push โดยไม่แสดงการแจ้งเตือนได้เมื่อใด (เช่น พุชในพื้นหลังแบบไม่มีเสียง)

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

เหตุใดจึงต้องใช้ HTTPS ฉันจะแก้ปัญหานี้ในระหว่างการพัฒนาได้อย่างไร

Service Worker ต้องใช้ต้นทางที่ปลอดภัยเพื่อให้มั่นใจว่าสคริปต์ Service Worker มาจากต้นทางที่ต้องการและไม่ได้มาจากการโจมตีแบบแทรกกลางการสื่อสาร ซึ่งนั่นหมายถึงการใช้ HTTPS ในเว็บไซต์ที่เผยแพร่อยู่ แม้ว่า localhost จะอยู่ระหว่างการพัฒนาก็ตาม

การรองรับเบราว์เซอร์มีลักษณะอย่างไร

Chrome รองรับในเวอร์ชันที่มีความเสถียรและมีการพุช Mozilla กำลังทำงานใน Firefox Nightly ดูข้อมูลเพิ่มเติมได้ที่ข้อบกพร่องของการใช้งาน Push API และคุณสามารถติดตามการใช้งานการแจ้งเตือนได้ที่นี่

ฉันสามารถนำการแจ้งเตือนออกหลังจากผ่านไประยะเวลาหนึ่งได้หรือไม่

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

หากเพียงต้องการหยุดการส่งข้อความ Push ไปยังผู้ใช้หลังจากช่วงเวลาหนึ่ง และไม่สนใจว่าการแจ้งเตือนจะยังปรากฏให้เห็นอยู่นานเท่าใด คุณอาจใช้พารามิเตอร์ Time to Live (ttl) ของ FCM ได้ ดูข้อมูลเพิ่มเติมที่นี่

ข้อจำกัดของการรับส่งข้อความพุชใน Chrome มีอะไรบ้าง

โพสต์นี้มีข้อจำกัดบางประการดังนี้

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

เราควรใช้ API สิทธิ์หรือไม่

Permission API มีการใช้งานใน Chrome แต่ก็ไม่ได้พร้อมใช้งานในทุกเบราว์เซอร์ ดูข้อมูลเพิ่มเติมได้ที่นี่

เหตุใด Chrome จึงไม่เปิดแท็บก่อนหน้าเมื่อฉันคลิกการแจ้งเตือน

ปัญหานี้มีผลเฉพาะกับหน้าเว็บที่ไม่ได้ควบคุมโดยโปรแกรมทำงานของบริการ ดูข้อมูลเพิ่มเติมได้ที่นี่

จะเกิดอะไรขึ้นหากการแจ้งเตือนไม่อัปเดตก่อนที่อุปกรณ์ของผู้ใช้ได้รับพุช

คุณจะต้องแสดงการแจ้งเตือนเสมอเมื่อได้รับข้อความ Push ในสถานการณ์ที่คุณต้องการส่งการแจ้งเตือนแต่มีประโยชน์เพียงช่วงเวลาหนึ่งเท่านั้น คุณสามารถใช้พารามิเตอร์ "time_to_live" ใน CCM เพื่อให้ FCM ไม่ส่งข้อความพุชหากเลยเวลาหมดอายุ

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

จะเกิดอะไรขึ้นหากฉันส่งข้อความพุช 10 ข้อความ แต่ต้องการให้อุปกรณ์ได้รับเพียงข้อความเดียว

FCM มีพารามิเตอร์ "collapse_key" ที่คุณสามารถใช้ในการบอกให้ FCM แทนที่ข้อความที่รอดำเนินการซึ่งมี "collapse_key" เดียวกันด้วยข้อความใหม่

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