เมื่อต้นปี 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'}]
});
วิธีนี้จะสร้างการแจ้งเตือนง่ายๆ ที่มีสองปุ่ม โปรดทราบว่าคุณเพิ่มไอคอนลงในการดำเนินการโดยตรงไม่ได้ (ยัง) แต่คุณใช้อีโมจิและชุดอักขระ Unicode แบบขยายเพื่อเพิ่มบริบทให้กับปุ่มการแจ้งเตือนได้
เช่น
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
คุณได้สร้างการแจ้งเตือนและทำให้ดูเหมือน 😻 แล้ว ผู้ใช้อาจโต้ตอบกับการแจ้งเตือนนั้นในอนาคต การโต้ตอบกับการแจ้งเตือนทั้งหมดในปัจจุบัน (ตั้งแต่ Chrome 48) มาจากเหตุการณ์ notificationclick
ที่ลงทะเบียนไว้ใน Service Worker และอาจเป็นการคลิกทั่วไปสำหรับการแจ้งเตือนหรือการแตะปุ่มใดปุ่มหนึ่งโดยเฉพาะก็ได้ โปรดทราบว่าในอนาคตคุณจะตอบกลับกิจกรรมnotificationclose ได้ด้วย
หากต้องการทราบว่าผู้ใช้ดำเนินการใด คุณต้องตรวจสอบพร็อพเพอร์ตี้ 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 ได้) สำหรับการดำเนินการที่ต้องมีการโต้ตอบกับผู้ใช้ คุณจะต้องเปิดหน้าต่างให้ผู้ใช้ตอบกลับ
เนื่องจากแพลตฟอร์มจะไม่รองรับการดำเนินการในจำนวนเท่าเดิม หรือในบางกรณีอาจไม่รองรับปุ่มการทำงานสำหรับการแจ้งเตือนเลย คุณจึงต้องดูแลให้มีทางเลือกสำรองที่สมเหตุสมผลทุกครั้งให้กับงานที่คุณคาดหวังให้ผู้ใช้ทำหากเพียงแค่คลิกการแจ้งเตือน
หากต้องการดูสถานการณ์จริงในปัจจุบัน ลองดูการทดสอบการแจ้งเตือนของ Harne ของ Peter Beverloo และอ่านข้อกำหนดการแจ้งเตือน หรือทำตามข้อกำหนดเมื่อมีการอัปเดต