การแจ้งเตือน PPush ช่วยให้คุณมอบประสบการณ์การใช้งานที่เหมือนกับการใช้แอปให้กับผู้ใช้ โดยเป็นการแจ้งให้ทราบถึงการอัปเดตที่สำคัญและทันท่วงที เช่น ข้อความแชทที่ได้รับ แพลตฟอร์มการแจ้งเตือนนี้เป็นแพลตฟอร์มที่ค่อนข้างใหม่ในเบราว์เซอร์ และเนื่องจากมีกรณีการใช้งานและข้อกำหนดต่างๆ เพิ่มมากขึ้น เราจึงเห็น API การแจ้งเตือนต่างๆ เพิ่มเข้ามา Chrome 50 (เบต้าในเดือนมีนาคม 2016) ก็ไม่มีข้อยกเว้น แต่มีฟีเจอร์ใหม่อย่างน้อย 4 รายการที่ทำให้นักพัฒนาซอฟต์แวร์ควบคุมการแจ้งเตือนได้มากขึ้น คุณจะสามารถ ทำสิ่งต่อไปนี้
- เพิ่มไอคอนลงในปุ่มการแจ้งเตือน
- แก้ไขการประทับเวลาเพื่อมอบประสบการณ์ที่สอดคล้องกัน
- ติดตามเหตุการณ์การปิดการแจ้งเตือนเพื่อช่วยซิงค์การแจ้งเตือนและให้ ข้อมูลวิเคราะห์
- สร้างประสบการณ์การแจ้งเตือนเมื่อการแจ้งเตือนเข้ามาแทนที่การแจ้งเตือนที่แสดงอยู่ในปัจจุบัน
Chrome 50 ยังได้เพิ่มเพย์โหลดสำหรับข้อความ Push อีกด้วย โปรดทำตามspecและเครื่องมือติดตามปัญหาเกี่ยวกับข้อกำหนดเพื่อติดตามข้อมูลล่าสุดเกี่ยวกับ 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)
เหตุการณ์การปิดการแจ้งเตือน
ฟีเจอร์การแจ้งเตือนที่ขอบ่อยคือความสามารถในการรู้เมื่อผู้ใช้ปิดการแจ้งเตือน เราไม่อาจทำเช่นนั้นได้จนกว่าชุดการเปลี่ยนแปลงข้อกำหนดการแจ้งเตือนล่าสุดได้เพิ่มเหตุการณ์ notificationsclose
การใช้การคลิกการแจ้งเตือนและเหตุการณ์ "ปิดการแจ้งเตือน" จะช่วยให้คุณเข้าใจวิธีที่ผู้ใช้โต้ตอบกับการแจ้งเตือนของคุณ พวกเขาเปิดทิ้งไว้นานแล้วจึงตั้งใจปิด หรือดำเนินการกับโฆษณาทันที
กรณีการใช้งานยอดนิยมอย่างหนึ่งคือ การซิงค์การแจ้งเตือนระหว่างอุปกรณ์ได้ หากผู้ใช้ปิดการแจ้งเตือนบนอุปกรณ์เดสก์ท็อป การแจ้งเตือนเดียวกันนั้นบนอุปกรณ์เคลื่อนที่ก็ควรจะถูกปิดด้วย ขณะนี้เรายังไม่สามารถดำเนินการแบบเงียบได้ (โปรดทราบว่าข้อความ Push ทุกข้อความจะต้องมีการแจ้งเตือนแสดงอยู่) แต่การใช้การแจ้งเตือน "ปิด" จะช่วยให้คุณสามารถจัดการปัญหานี้ได้โดยให้คุณติดตามสถานะการแจ้งเตือนสำหรับผู้ใช้ในเซิร์ฟเวอร์ของคุณ และซิงค์ข้อมูลนั้นกับอุปกรณ์อื่นๆ ตามที่ผู้ใช้ใช้งาน
หากต้องการใช้เหตุการณ์ "ปิดการแจ้งเตือน" ให้ลงทะเบียนไว้ใน Service Worker และจะเริ่มทำงานเมื่อผู้ใช้ปิดการแจ้งเตือนอยู่เท่านั้น เช่น หากผู้ใช้ปิดการแจ้งเตือนบางอย่างหรือปิดการแจ้งเตือนทั้งหมดในถาดข้อมูล (ใน Android)
หากแฟล็ก needInteraction เป็น false หรือไม่ได้ตั้งค่าไว้ หากผู้ใช้ไม่ได้ปิดการแจ้งเตือนด้วยตนเอง แต่ระบบทำเองโดยอัตโนมัติ เหตุการณ์ notificationsclose จะไม่ทริกเกอร์
ด้านล่างนี้เป็นตัวอย่างการใช้งานที่ไม่ซับซ้อน เมื่อผู้ใช้ปิดการแจ้งเตือน คุณจะได้รับสิทธิ์เข้าถึงออบเจ็กต์การแจ้งเตือน ซึ่งคุณสามารถดำเนินการตามตรรกะที่กำหนดเองได้
self.addEventListener('notificationclose', e => console.log(e.notification));
โดยทดสอบได้ในเครื่องมือสร้างการแจ้งเตือน โดยคุณจะได้รับการแจ้งเตือนเมื่อปิดการแจ้งเตือน
อย่าทำให้ผู้ใช้รำคาญเมื่อคุณแทนที่การแจ้งเตือนที่มีอยู่
ฉันแน่ใจว่าลุงเบนกำลังพูดถึงระบบการแจ้งเตือน ไม่ใช่พลังของ Peter Parker ตอนที่เขาพูดว่า "พลังที่ยิ่งใหญ่มาพร้อมกับความรับผิดชอบที่ยิ่งใหญ่" ระบบการแจ้งเตือนเป็นสื่อ ที่มีประสิทธิภาพในการโต้ตอบกับผู้ใช้ ถ้าคุณละเมิดความเชื่อถือของพวกเขา พวกเขาจะ ปิดการแจ้งเตือนทั้งหมดและคุณอาจสูญเสียการแจ้งเตือนเหล่านั้นไปเลย
เมื่อสร้างการแจ้งเตือน คุณสามารถตั้งค่าให้ระบบส่งเสียงเตือนหรือสั่นเพื่อดึงดูดความสนใจจากผู้ใช้ นอกจากนี้ คุณยังแทนที่การแจ้งเตือนที่มีอยู่ได้โดยใช้แอตทริบิวต์ "tag" ซ้ำในออบเจ็กต์การแจ้งเตือนใหม่
ในเวอร์ชันก่อนหน้า Chrome 50 ทุกครั้งที่คุณสร้างการแจ้งเตือนหรือแทนที่การแจ้งเตือนที่มีอยู่แล้ว อุปกรณ์จะเรียกใช้รูปแบบการสั่นหรือส่งเสียงแจ้งเตือน ซึ่งอาจก่อให้เกิดความไม่พอใจให้กับผู้ใช้ได้ ใน Chrome 50 ตอนนี้คุณควบคุมสิ่งที่เกิดขึ้นระหว่างการแจ้งเตือนซ้ำผ่านธงบูลีนง่ายๆ ที่เรียกว่า "renotify" ได้แล้ว ลักษณะการทำงานเริ่มต้นใหม่เมื่อใช้ "แท็ก" เดียวกันสำหรับการแจ้งเตือนครั้งต่อๆ ไปคือการปิดเสียง และในฐานะนักพัฒนาแอป คุณต้องเลือกใช้ "แจ้งเตือนอีกครั้ง" แก่ผู้ใช้โดยการตั้งค่าแฟล็กเป็น "จริง"
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 เท่านั้น แม้ว่าจะไม่แสดงในเดสก์ท็อป แต่จะส่งผลต่อลำดับการแจ้งเตือนทั้งในอุปกรณ์เคลื่อนที่และเดสก์ท็อป