เมื่อต้นปี 2015 เราได้เปิดตัวการรับส่งข้อความ Push และการแจ้งเตือนใน Chrome สำหรับ Android และเดสก์ท็อป นี่เป็นก้าวสำคัญบนเว็บ ผู้ใช้จะเริ่มมีส่วนร่วมกับประสบการณ์การใช้งานบนเว็บได้มากขึ้นแม้ว่าเบราว์เซอร์จะปิดอยู่ก็ตาม
แม้ว่าคุณจะส่งข้อความเหล่านี้ได้ แต่สิ่งที่คุณทำได้กับข้อความดังกล่าวมีเพียงคลิกเพื่อเปิดหน้าเว็บหรือปิดข้อความไปเลย
หากคุณดูการแจ้งเตือนที่ให้บริการในแอปบนแพลตฟอร์มอุปกรณ์เคลื่อนที่โดยค่าเริ่มต้น เช่น iOS และ Android แพลตฟอร์มแต่ละแพลตฟอร์มจะอนุญาตให้นักพัฒนาแอปกำหนดการดำเนินการตามบริบทที่ผู้ใช้เรียกใช้และโต้ตอบได้ ใน Chrome 48 เราได้เพิ่มความสามารถที่คล้ายกับการแจ้งเตือนทางเว็บในเดสก์ท็อปและ Chrome สำหรับ Android แล้ว
การเพิ่มลงใน API นั้นค่อนข้างง่าย คุณเพียงแค่ต้องสร้างอาร์เรย์ของการดำเนินการและเพิ่มลงในออบเจ็กต์ NotificationOptions เมื่อเรียกใช้ showNotification จากการลงทะเบียน ServiceWorker (ใน ServiceWorker โดยตรงหรือในหน้าเว็บผ่าน navigator.serviceWorker.ready)
ปัจจุบัน Chrome รองรับการดำเนินการ 2 อย่างในการแจ้งเตือนแต่ละรายการเท่านั้น
บางแพลตฟอร์มอาจรองรับได้มากกว่านี้ และบางแพลตฟอร์มอาจรองรับน้อยกว่าหรือไม่รองรับเลย คุณตรวจสอบได้ว่าแพลตฟอร์มรองรับอะไรบ้างโดยดูที่ Notification.maxActions ในตัวอย่างต่อไปนี้ เราจะสมมติว่าแพลตฟอร์มรองรับการดำเนินการ 2 รายการ
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like'},
{action: 'reply', title: 'Reply'}]
});
ซึ่งจะสร้างการแจ้งเตือนแบบง่ายที่มีปุ่ม 2 ปุ่ม โปรดทราบว่าคุณไม่สามารถเพิ่มไอคอนลงในการดำเนินการได้โดยตรง (ยัง) แต่สามารถใช้อีโมจิและชุดอักขระ Unicode เพิ่มเติมเพื่อเพิ่มบริบทให้กับปุ่มการแจ้งเตือนได้
เช่น
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
เมื่อสร้างการแจ้งเตือนและทำให้ดูน่าสนใจแล้ว ผู้ใช้อาจโต้ตอบกับการแจ้งเตือนในอนาคต การโต้ตอบกับการแจ้งเตือนทั้งหมดในปัจจุบัน (ใน Chrome เวอร์ชัน 48) มาจากเหตุการณ์ notificationclick ที่ลงทะเบียนไว้ใน Service Worker และอาจเป็นการคลิกทั่วไปหรือการแตะปุ่มดำเนินการอย่างใดอย่างหนึ่งก็ได้ หมายเหตุ: ในอนาคตคุณจะตอบสนองต่อnotificationcloseevent ได้ด้วย
หากต้องการทําความเข้าใจการดําเนินการที่ผู้ใช้ทํา คุณจะต้องตรวจสอบพร็อพเพอร์ตี้ action ในเหตุการณ์ จากนั้นคุณเลือกได้ว่าจะเปิดหน้าใหม่เพื่อให้ผู้ใช้ดําเนินการจนเสร็จสมบูรณ์ หรือจะดําเนินการในเบื้องหลัง
self.addEventListener('notificationclick', function(event) {
var messageId = event.notification.data;
event.notification.close();
if (event.action === 'like') {
silentlyLikeItem();
}
else if (event.action === 'reply') {
clients.openWindow("/messages?reply=" + messageId);
}
else {
clients.openWindow("/messages?reply=" + messageId);
}
}, false);
สิ่งที่น่าสนใจคือการดำเนินการไม่จำเป็นต้องเปิดหน้าต่างใหม่ การดำเนินการสามารถโต้ตอบกับแอปพลิเคชันทั่วไปได้โดยไม่ต้องสร้างอินเทอร์เฟซผู้ใช้ เช่น ผู้ใช้อาจ "กดชอบ" หรือ "ลบ" โพสต์โซเชียลมีเดีย ซึ่งจะดำเนินการกับข้อมูลในเครื่องของผู้ใช้ จากนั้นจึงซิงค์กับระบบคลาวด์โดยไม่ต้องเปิด UI (แม้ว่าแนวทางปฏิบัติแนะนำคือส่งข้อความแจ้งการเปลี่ยนแปลงข้อมูลไปยังหน้าต่างที่เปิดอยู่เพื่อให้ UI อัปเดตได้) สําหรับการดําเนินการที่กําหนดให้ผู้ใช้โต้ตอบ คุณจะต้องเปิดหน้าต่างเพื่อให้ผู้ใช้ตอบกลับ
เนื่องจากแพลตฟอร์มต่างๆ จะไม่รองรับการดำเนินการในจำนวนที่เท่ากัน หรือในบางกรณีอาจไม่รองรับปุ่มการดำเนินการจากการแจ้งเตือนเลย คุณจึงต้องตรวจสอบว่าได้ระบุการดำเนินการสำรองที่เหมาะสมสำหรับงานที่คุณต้องการให้ผู้ใช้ทำหากคลิกการแจ้งเตือน
หากต้องการดูการทํางานของฟีเจอร์นี้ในวันนี้ โปรดดูNotification Test Harnesของ Peter Beverloo และอ่านข้อกําหนดเฉพาะเกี่ยวกับการแจ้งเตือน หรือติดตามข้อกําหนดเฉพาะเมื่อมีการอัปเดต