การแจ้งเตือน Push ช่วยให้คุณมอบประสบการณ์การใช้งานที่ยอดเยี่ยมเหมือนแอปให้แก่ผู้ใช้ โดยแจ้งข้อมูลอัปเดตที่สำคัญและทันท่วงที เช่น ข้อความแชทที่เข้ามา แพลตฟอร์มการแจ้งเตือนเป็นแพลตฟอร์มใหม่ในเบราว์เซอร์ และเมื่อมีการกำหนด Use Case และข้อกำหนดเพิ่มเติม เราจึงเห็นการเพิ่มเติม API สำหรับการแจ้งเตือนจำนวนมาก Chrome 50 (เบต้าในเดือนมีนาคม 2016) ก็ไม่มีข้อยกเว้น โดยมีฟีเจอร์ใหม่อย่างน้อย 4 รายการที่ช่วยให้นักพัฒนาแอปควบคุมการแจ้งเตือนได้มากขึ้น คุณจะมีสิทธิ์ดำเนินการต่อไปนี้
- เพิ่มไอคอนลงในปุ่มการแจ้งเตือน
- แก้ไขการประทับเวลาเพื่อช่วยสร้างประสบการณ์การใช้งานที่สอดคล้องกัน
- ติดตามเหตุการณ์การปิดการแจ้งเตือนเพื่อช่วยซิงค์การแจ้งเตือนและให้ข้อมูลวิเคราะห์
- จัดการประสบการณ์การแจ้งเตือนอีกครั้งเมื่อการแจ้งเตือนหนึ่งมาแทนที่การแจ้งเตือนที่แสดงอยู่
Chrome 50 ยังมีการเพิ่มเพย์โหลดสําหรับข้อความ Push ด้วย หากต้องการติดตามข่าวสารเกี่ยวกับ Notifications API ที่ใช้กับ Chrome โปรดทำตามข้อกำหนดและเครื่องมือติดตามปัญหาเกี่ยวกับข้อกำหนด
สร้างปุ่มดำเนินการที่น่าสนใจด้วยไอคอนที่กำหนดเอง
ในโพสต์เกี่ยวกับปุ่มการดำเนินการของข้อความแจ้งใน Chrome 49 ล่าสุด เราเคยพูดถึงว่าคุณไม่สามารถแนบรูปภาพกับปุ่มการแจ้งเตือนเพื่อให้ดูน่าสนใจได้ แต่คุณใช้อักขระ Unicode เพื่อแทรกอีโมจิในบรรทัดต่างๆ ได้ แต่ไม่ต้องกังวล ฟีเจอร์ล่าสุดนี้ช่วยให้คุณระบุรูปภาพบนปุ่มการดําเนินการได้แล้ว โดยทำดังนี้
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
ลักษณะของไอคอนการดำเนินการจะแตกต่างกันไปตามแพลตฟอร์ม ตัวอย่างเช่น ใน Android ไอคอนจะมีฟิลเตอร์สีเทาเข้มใน Lollipop ขึ้นไป และฟิลเตอร์สีขาวก่อน Lollipop ส่วนในเดสก์ท็อปจะเป็นภาพสี (หมายเหตุ: มีการพูดคุยเกี่ยวกับอนาคตของฟีเจอร์นี้บนเดสก์ท็อป) แพลตฟอร์มบางแพลตฟอร์มอาจแสดงไอคอนการดําเนินการไม่ได้ ดังนั้นโปรดตรวจสอบว่าคุณใช้ไอคอนเพื่อระบุบริบทของการดำเนินการ ไม่ใช่เป็นข้อบ่งชี้เดียวของเจตนา
และสุดท้าย เนื่องจากต้องดาวน์โหลดทรัพยากร คุณจึงควรทำให้ไอคอนมีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้และแคชไว้ล่วงหน้าในเหตุการณ์การติดตั้ง (ในขณะที่เขียนบทความนี้ การดึงข้อมูลแหล่งข้อมูลการแจ้งเตือนใน Chrome ยังไม่ได้ส่งผ่าน Service Worker)
เหตุการณ์การปิดการแจ้งเตือน
ฟีเจอร์ที่ผู้ใช้ขอบ่อยเกี่ยวกับการแจ้งเตือนคือการทราบเมื่อผู้ใช้ปิดการแจ้งเตือน เราไม่สามารถดำเนินการดังกล่าวได้จนกว่าชุดการเปลี่ยนแปลงล่าสุดในข้อกําหนดเฉพาะของการแจ้งเตือนจะเพิ่มเหตุการณ์ notificationclose
การใช้เหตุการณ์ notificationclick และ notificationclose ช่วยให้คุณเข้าใจวิธีที่ผู้ใช้โต้ตอบกับการแจ้งเตือน ผู้ใช้เปิดโฆษณาไว้นานแล้วปิดไป หรือดำเนินการกับโฆษณาทันที
Use Case ที่ได้รับความนิยมอย่างหนึ่งคือการซิงค์การแจ้งเตือนระหว่างอุปกรณ์ หากผู้ใช้ปิดการแจ้งเตือนในอุปกรณ์เดสก์ท็อป การแจ้งเตือนเดียวกันในอุปกรณ์เคลื่อนที่ก็ควรปิดด้วย เรายังไม่สามารถดำเนินการนี้แบบเงียบๆ ได้ (โปรดทราบว่าข้อความ Push ทุกข้อความต้องมีการแจ้งเตือนที่แสดง) แต่การใช้ notificationclose จะช่วยให้คุณจัดการเรื่องนี้ได้ด้วยการติดตามสถานะการแจ้งเตือนของผู้ใช้บนเซิร์ฟเวอร์และซิงค์กับอุปกรณ์อื่นๆ ขณะที่ผู้ใช้ใช้
หากต้องการใช้เหตุการณ์ notificationclose ให้ลงทะเบียนเหตุการณ์ดังกล่าวภายใน Service Worker และเหตุการณ์จะทริกเกอร์ก็ต่อเมื่อผู้ใช้ปิดการแจ้งเตือนอย่างตั้งใจ เช่น หากผู้ใช้ปิดการแจ้งเตือนที่เฉพาะเจาะจงหรือปิดการแจ้งเตือนทั้งหมดในถาด (บน Android)
หาก Flag requireInteraction เป็นเท็จหรือไม่ได้ตั้งค่าไว้ ระบบจะไม่ทริกเกอร์เหตุการณ์ notificationclose หากผู้ใช้ไม่ได้ปิดการแจ้งเตือนด้วยตนเอง แต่ระบบปิดให้โดยอัตโนมัติ
การใช้งานแบบง่ายแสดงอยู่ด้านล่าง เมื่อผู้ใช้ปิดการแจ้งเตือน คุณจะได้รับสิทธิ์เข้าถึงออบเจ็กต์การแจ้งเตือน ซึ่งคุณจะใช้ตรรกะที่กำหนดเองได้
self.addEventListener('notificationclose', e => console.log(e.notification));
คุณสามารถทดสอบได้ในเครื่องมือสร้างการแจ้งเตือน โดยคุณจะได้รับข้อความแจ้งเมื่อปิดการแจ้งเตือน
อย่ารบกวนผู้ใช้เมื่อคุณแทนที่การแจ้งเตือนที่มีอยู่
เราค่อนข้างมั่นใจว่าลุงเบนพูดถึงระบบการแจ้งเตือน ไม่ใช่พลังของปีเตอร์ ปาร์คเกอร์ เมื่อพูดว่า "พลังที่ยิ่งใหญ่มาพร้อมกับความรับผิดชอบอันใหญ่ยิ่ง" ระบบการแจ้งเตือนเป็นสื่อที่มีประสิทธิภาพในการโต้ตอบกับผู้ใช้ หากคุณละเมิดความไว้วางใจของผู้ติดตาม ผู้ติดตามจะปิดการแจ้งเตือนทั้งหมดและคุณอาจสูญเสียผู้ติดตามเหล่านั้นไปทั้งหมด
เมื่อสร้างการแจ้งเตือน คุณสามารถตั้งค่าให้สร้างเสียงแจ้งเตือนหรือสั่นเพื่อดึงดูดความสนใจของผู้ใช้ นอกจากนี้ คุณยังแทนที่การแจ้งเตือนที่มีอยู่ได้ด้วยการใช้แอตทริบิวต์ "แท็ก" ซ้ำในออบเจ็กต์การแจ้งเตือนใหม่
ก่อนที่จะมีการเปิดตัว Chrome 50 ทุกครั้งที่คุณสร้างการแจ้งเตือนหรือแทนที่การแจ้งเตือนที่มีอยู่ ระบบจะเปิดรูปแบบการสั่นหรือเล่นเสียงแจ้งเตือน ซึ่งอาจทำให้ผู้ใช้ไม่พอใจ ใน Chrome 50 นี้ คุณควบคุมสิ่งที่จะเกิดขึ้นระหว่างการแจ้งเตือนอีกครั้งได้ผ่าน Flag แบบบูลีนง่ายๆ ที่ชื่อ "renotify" ลักษณะการทำงานเริ่มต้นใหม่เมื่อใช้ "แท็ก" เดียวกันสำหรับการแจ้งเตือนครั้งต่อๆ ไปคือการไม่แสดง และในฐานะนักพัฒนาแอป คุณต้องเลือกใช้ "การแจ้งเตือนผู้ใช้อีกครั้ง" โดยการตั้งค่า Flag เป็น "true"
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
คุณลองใช้ฟีเจอร์นี้ได้ในเครื่องมือสร้างการแจ้งเตือน
จัดการการประทับเวลาที่แสดงต่อผู้ใช้
ใน Android การแจ้งเตือนของ Chrome จะแสดงเวลาสร้างที่มุมขวาบนโดยค่าเริ่มต้น ขออภัย นี่อาจไม่ใช่เวลาที่ระบบของคุณสร้างการแจ้งเตือน เช่น เหตุการณ์อาจทริกเกอร์เมื่ออุปกรณ์ออฟไลน์อยู่ หรืออาจแสดงการแจ้งเตือนสำหรับการประชุมที่กําลังจะมาถึง ตั้งแต่ Chrome 50 เป็นต้นไป Chrome ได้เพิ่มพร็อพเพอร์ตี้ "การประทับเวลา" ใหม่ ซึ่งช่วยให้นักพัฒนาแอประบุเวลาที่ควรแสดงในการแจ้งเตือนได้
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
ขณะนี้การประทับเวลาจะแสดงใน Chrome สำหรับ Android เท่านั้น แม้ว่าจะไม่เห็นการตั้งค่านี้ในเดสก์ท็อป แต่การตั้งค่านี้จะส่งผลต่อลําดับการแจ้งเตือนทั้งในอุปกรณ์เคลื่อนที่และเดสก์ท็อป