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

Matt Gaunt

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

หากคุณถามเหล่านักพัฒนาว่าฟีเจอร์ใดของอุปกรณ์เคลื่อนที่ซึ่งยังไม่มีในเว็บ ข้อความ Push มักอยู่ในรายการยอดนิยมเสมอ

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

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

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

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

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

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

ลงทะเบียน Service Worker

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

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

ขั้นตอนถัดไปคือการจัดการเมื่อผู้ใช้ต้องการเปิดใช้ข้อความพุช แต่ก่อนที่จะทำได้ เราต้องตั้งค่าโครงการ Google Developer Console และเพิ่มพารามิเตอร์บางรายการลงในไฟล์ Manifest เพื่อใช้ Firebase Cloud Messaging (FCM) ซึ่งก่อนหน้านี้เรียกว่า Google Cloud Messaging (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 ของเว็บไซต์ได้

ในการสมัครใช้บริการ คุณต้องเรียกใช้เมธอด Subscription() ในออบเจ็กต์ PushManager ซึ่งเข้าถึงได้ผ่าน ServiceWorkerRegistration

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

หาก promise ที่แสดงผลโดยเมธอด subscriptions() ได้รับการแก้ไข คุณจะได้รับออบเจ็กต์ PushSubscription ซึ่งจะมี endpoint

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

โค้ดต่อไปนี้สมัครรับข้อความ 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

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

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 แสดงการแจ้งเตือนนี้หรือยัง

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

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

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

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

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

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

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

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

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

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

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

และมีรายละเอียดทางเทคนิคอะไรบ้าง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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