การแจ้งให้คุณทราบเกี่ยวกับการเปลี่ยนแปลงการแจ้งเตือน

ก่อนอื่น เราต้องขออภัยสำหรับชื่อวิดีโอที่ไม่เหมาะสม แต่เราไม่สามารถทำได้

ใน Chrome 44 จะมีการเพิ่มและเปิด Notfication.data และ ServiceWorkerRegistration.getNotifications() / ลดความซับซ้อนของกรณีการใช้งานที่พบบ่อยบางส่วนเมื่อจัดการกับการแจ้งเตือนที่มีข้อความ Push

ข้อมูลการแจ้งเตือน

Notification.data ให้คุณเชื่อมโยงออบเจ็กต์ JavaScript กับการแจ้งเตือน

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

ตัวอย่างเช่น การสร้างออบเจ็กต์ข้อมูลและเพิ่มลงในตัวเลือกการแจ้งเตือน เช่น

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';
    var data = {
    doge: {
        wow: 'such amaze notification data'
    }
    };

    event.waitUntil(
    self.registration.showNotification(title, {
        body: body,
        icon: icon,
        tag: tag,
        data: data
    })
    );
});

หมายความว่าเราสามารถได้รับข้อมูลในเหตุการณ์ notificationsclick ดังนี้

self.addEventListener('notificationclick', function(event) {
    var doge = event.notification.data.doge;
    console.log(doge.wow);
});

ก่อนหน้านี้คุณต้องซ่อนข้อมูลใน IndexDB หรือใส่ข้อความต่อท้าย URL ไอคอน - eek

ServiceWorkerRegistration.getNotifications()

คำขอหนึ่งจากนักพัฒนาซอฟต์แวร์ที่ทำงานเกี่ยวกับข้อความ Push คือให้สามารถควบคุมการแจ้งเตือนที่แสดงได้ดีขึ้น

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

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

ตัวอย่างการจัดกลุ่มการแจ้งเตือนไว้ด้วยกัน

โค้ดในการดำเนินการนั้นค่อนข้างง่าย ภายในเหตุการณ์พุช ให้เรียก ServiceWorkerRegistration.getNotifications() เพื่อรับอาร์เรย์ของการแจ้งเตือนปัจจุบัน และจากจุดนี้เพื่อกำหนดลักษณะการทำงานที่ถูกต้อง ไม่ว่าจะเป็นการยุบการแจ้งเตือนทั้งหมดหรือใช้ Notification.tag

function showNotification(title, body, icon, data) {
    var notificationOptions = {
    body: body,
    icon: icon ? icon : 'images/touch/chrome-touch-icon-192x192.png',
    tag: 'simple-push-demo-notification',
    data: data
    };

    self.registration.showNotification(title, notificationOptions);
    return;
}

self.addEventListener('push', function(event) {
    console.log('Received a push message', event);

    // Since this is no payload data with the first version
    // of Push notifications, here we'll grab some data from
    // an API and use it to populate a notification
    event.waitUntil(
    fetch(API_ENDPOINT).then(function(response) {
        if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
            response.status);
        // Throw an error so the promise is rejected and catch() is executed
        throw new Error();
        }

        // Examine the text in the response
        return response.json().then(function(data) {
        var title = 'You have a new message';
        var message = data.message;
        var icon = 'images/notification-icon.png';
        var notificationTag = 'chat-message';

        var notificationFilter = {
            tag: notificationTag
        };
        return self.registration.getNotifications(notificationFilter)
            .then(function(notifications) {
            if (notifications && notifications.length > 0) {
                // Start with one to account for the new notification
                // we are adding
                var notificationCount = 1;
                for (var i = 0; i < notifications.length; i++) {
                var existingNotification = notifications[i];
                if (existingNotification.data &&
                    existingNotification.data.notificationCount) {
                    notificationCount +=
existingNotification.data.notificationCount;
                } else {
                    notificationCount++;
                }
                existingNotification.close();
                }
                message = 'You have ' + notificationCount +
                ' weather updates.';
                notificationData.notificationCount = notificationCount;
            }

            return showNotification(title, message, icon, notificationData);
            });
        });
    }).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';

        return showNotification(title, message);
    })
    );
});

self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event);

    if (Notification.prototype.hasOwnProperty('data')) {
    console.log('Using Data');
    var url = event.notification.data.url;
    event.waitUntil(clients.openWindow(url));
    } else {
    event.waitUntil(getIdb().get(KEY_VALUE_STORE_NAME,
event.notification.tag).then(function(url) {
        // At the moment you cannot open third party URL's, a simple trick
        // is to redirect to the desired URL from a URL on your domain
        var redirectUrl = '/redirect.html?redirect=' +
        url;
        return clients.openWindow(redirectUrl);
    }));
    }
});

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

var notificationFilter = {
    tag: notificationTag
};
return self.registration.getNotifications(notificationFilter)

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

var notificationCount = 1;
for (var i = 0; i < notifications.length; i++) {
    var existingNotification = notifications[i];
    if (existingNotification.data && existingNotification.data.notificationCount) {
    notificationCount += existingNotification.data.notificationCount;
    } else {
    notificationCount++;
    }
    existingNotification.close();
}

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

นี่เป็นเพียงตัวอย่างหนึ่งของ getNotifications() เท่านั้น และอย่างที่เราทราบกันดีว่า API นี้จะเปิด Use Case อื่นๆ ที่หลากหลาย

NotificationOptions.vibrate

ตั้งแต่ Chrome 45 เป็นต้นไป คุณระบุรูปแบบการสั่นเมื่อสร้างการแจ้งเตือนได้ ในอุปกรณ์ที่รองรับ API การสั่น ซึ่งขณะนี้มีเฉพาะ Chrome สำหรับ Android เท่านั้น โดยจะให้คุณปรับแต่งรูปแบบการสั่นที่จะใช้เมื่อมีการแสดงการแจ้งเตือน

รูปแบบการสั่นอาจเป็นอาร์เรย์ของตัวเลข หรือตัวเลขเดี่ยวที่ถือเป็นอาร์เรย์ของตัวเลขเดียวก็ได้ ค่าในอาร์เรย์แสดงเวลาในหน่วยมิลลิวินาที โดยที่ดัชนีคู่ (0, 2, 4, ...) คือระยะเวลาที่จะสั่น และดัชนีคี่คือระยะเวลาที่จะหยุดชั่วคราวก่อนการสั่นครั้งต่อไป

self.registration.showNotification('Buzz!', {
    body: 'Bzzz bzzzz',
    vibrate: [300, 100, 400] // Vibrate 300ms, pause 100ms, then vibrate 400ms
});

คำขอฟีเจอร์ที่พบได้บ่อยที่เหลือ

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

ในขณะนี้ ยังไม่มีวิธีที่คุณสามารถทำได้และไม่มีสิ่งใดในข้อกำหนดเฉพาะที่ทำให้สามารถใช้งานได้ :( แต่ทีมวิศวกรของ Chrome ทราบดีถึงกรณีการใช้งานนี้

การแจ้งเตือนของ Android

ในเดสก์ท็อป คุณสามารถสร้างการแจ้งเตือนด้วยรหัสต่อไปนี้

new Notification('Hello', {body: 'Yay!'});

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

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

if (!'Notification' in window) {
    // Notifications aren't supported
    return;
}

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

_Uncaught TypeError: Failed to construct 'Notification': Illegal constructor.
Use ServiceWorkerRegistration.showNotification() instead_

วิธีที่ดีที่สุดในการตรวจหาฟีเจอร์สำหรับ Android และเดสก์ท็อปในขณะนี้คือการดำเนินการต่อไปนี้

    function isNewNotificationSupported() {
        if (!window.Notification || !Notification.requestPermission)
            return false;
        if (Notification.permission == 'granted')
            throw new Error('You must only call this \*before\* calling
    Notification.requestPermission(), otherwise this feature detect would bug the
    user with an actual notification!');
        try {
            new Notification('');
        } catch (e) {
            if (e.name == 'TypeError')
                return false;
        }
        return true;
    }

ซึ่งอาจนำไปใช้ได้ดังนี้

    if (window.Notification && Notification.permission == 'granted') {
        // We would only have prompted the user for permission if new
        // Notification was supported (see below), so assume it is supported.
        doStuffThatUsesNewNotification();
    } else if (isNewNotificationSupported()) {
        // new Notification is supported, so prompt the user for permission.
        showOptInUIForNotifications();
    }