การดำเนินการการแจ้งเตือนใน Chrome 48

เมื่อต้นปี 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 และอ่านข้อกำหนดการแจ้งเตือน หรือทำตามข้อกำหนดเมื่อมีการอัปเดต