ลักษณะการทำงานของการแจ้งเตือน

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

จนถึงตอนนี้ เราได้ดูตัวเลือกที่เปลี่ยนลักษณะที่ปรากฏของการแจ้งเตือนแล้ว นอกจากนี้ยังมีตัวเลือกที่เปลี่ยนลักษณะการทำงานของการแจ้งเตือนด้วย

โดยค่าเริ่มต้น การเรียกใช้ showNotification() ด้วยตัวเลือกภาพเท่านั้นจะมีลักษณะการทำงานดังต่อไปนี้

  • การคลิกการแจ้งเตือนไม่ส่งผลใดๆ
  • การแจ้งเตือนใหม่แต่ละรายการจะแสดงต่อกัน เบราว์เซอร์จะไม่ยุบการแจ้งเตือนไม่ว่าในกรณีใดก็ตาม
  • แพลตฟอร์มอาจเล่นเสียงหรือสั่นอุปกรณ์ของผู้ใช้ (ขึ้นอยู่กับแพลตฟอร์ม)
  • ในบางแพลตฟอร์ม การแจ้งเตือนจะหายไปหลังจากผ่านไปไม่นาน ขณะที่บางแพลตฟอร์มจะแสดงการแจ้งเตือนจนกว่าผู้ใช้จะโต้ตอบกับการแจ้งเตือนนั้น (เช่น เปรียบเทียบการแจ้งเตือนใน Android และเดสก์ท็อป)

ในส่วนนี้ เราจะดูวิธีเปลี่ยนลักษณะการทำงานเริ่มต้นเหล่านี้โดยใช้ตัวเลือกเพียงอย่างเดียว ซึ่งวิธีเหล่านี้ค่อนข้างง่ายต่อการนำไปใช้และใช้ประโยชน์

กิจกรรมการคลิกการแจ้งเตือน

เมื่อผู้ใช้คลิกการแจ้งเตือน ลักษณะการทำงานเริ่มต้นคือไม่มีอะไรเกิดขึ้น และจะไม่ปิดหรือนำการแจ้งเตือนออกด้วย

แนวทางปฏิบัติทั่วไปสำหรับการคลิกการแจ้งเตือนคือการปิดการแจ้งเตือนและดำเนินการตามตรรกะอื่นๆ (เช่น เปิดหน้าต่างหรือการเรียก API ไปยังแอปพลิเคชัน)

ในการดำเนินการนี้ คุณต้องเพิ่ม Listener เหตุการณ์ 'notificationclick' ลงใน Service Worker ระบบจะเรียกใช้ฟังก์ชันนี้เมื่อมีการคลิกการแจ้งเตือน

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

ดังที่เห็นในตัวอย่างนี้ การแจ้งเตือนที่มีการคลิกจะเข้าถึงได้เป็น event.notification จากนั้น คุณจะเข้าถึงพร็อพเพอร์ตี้และเมธอดของการแจ้งเตือนได้ ในกรณีนี้ คุณจะเรียกใช้เมธอด close() และทำงานเพิ่มเติม

การดำเนินการ

การดำเนินการช่วยให้คุณสร้างการโต้ตอบกับผู้ใช้ได้อีกระดับนอกเหนือจากการคลิกการแจ้งเตือน

ปุ่ม

ในส่วนก่อนหน้า คุณได้เห็นวิธีกำหนดปุ่มดำเนินการเมื่อเรียกใช้ showNotification() ดังนี้

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

หากผู้ใช้คลิกปุ่มดำเนินการ ให้ตรวจสอบค่า event.action ในเหตุการณ์ noticationclick เพื่อดูว่าผู้ใช้คลิกปุ่มดำเนินการใด

event.action จะมีค่า action ที่ตั้งไว้ในตัวเลือก ในตัวอย่างข้างต้น ค่า event.action จะเป็นค่าใดค่าหนึ่งต่อไปนี้ 'coffee-action', 'doughnut-action', 'gramophone-action' หรือ 'atom-action'

เราจะตรวจจับการคลิกการแจ้งเตือนหรือการคลิกการดำเนินการดังนี้

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

การตอบกลับแบบแทรกในบรรทัด

นอกจากนี้ ในส่วนก่อนหน้า คุณได้เห็นวิธีเพิ่มการตอบกลับในบรรทัดลงในการแจ้งเตือนแล้ว ดังนี้

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

event.reply จะมีค่าที่ผู้ใช้พิมพ์ในช่องป้อนข้อมูล ดังนี้

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

แท็ก

ตัวเลือก tag เป็นรหัสสตริงที่ "จัดกลุ่ม" การแจ้งเตือนเข้าด้วยกัน ซึ่งช่วยให้ระบุวิธีแสดงการแจ้งเตือนหลายรายการต่อผู้ใช้ได้ง่ายๆ เราจะอธิบายเรื่องนี้ได้ง่ายที่สุด ด้วยตัวอย่าง

มาแสดงการแจ้งเตือนและติดแท็ก 'message-group-1' กัน เราจะแสดงการแจ้งเตือนด้วยโค้ดนี้

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

ซึ่งจะแสดงการแจ้งเตือนแรกของเรา

การแจ้งเตือนครั้งแรกที่มีแท็กของกลุ่มข้อความ 1

มาแสดงการแจ้งเตือนที่ 2 พร้อมแท็กใหม่เป็น 'message-group-2' กัน ดังนี้

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

ซึ่งจะแสดงการแจ้งเตือนครั้งที่ 2 แก่ผู้ใช้

การแจ้งเตือน 2 รายการ โดยที่แท็กที่ 2 ของกลุ่มข้อความ 2

ตอนนี้เราจะแสดงการแจ้งเตือนที่ 3 แต่ใช้แท็กแรกของ 'message-group-1' ซ้ำ การดำเนินการนี้จะปิดการแจ้งเตือนแรกและแทนที่ด้วยการแจ้งเตือนใหม่

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

ตอนนี้เรามีการแจ้งเตือน 2 รายการแม้ว่าจะมีการเรียกใช้ showNotification() 3 ครั้งก็ตาม

การแจ้งเตือน 2 รายการ โดยการแจ้งเตือนแรกจะถูกแทนที่ด้วยการแจ้งเตือนที่ 3

ตัวเลือก tag เป็นเพียงวิธีจัดกลุ่มข้อความเพื่อให้การแจ้งเตือนเก่าที่แสดงอยู่ในปัจจุบันปิดลงหากมีแท็กเดียวกับการแจ้งเตือนใหม่

ความละเอียดอ่อนในการใช้ tag คือเมื่อแทนที่การแจ้งเตือน ระบบจะดำเนินการโดยไม่มีเสียงหรือการสั่น

ตัวเลือก renotify จึงเข้ามามีบทบาทในจุดนี้

แจ้งเตือนอีกครั้ง

ซึ่งส่วนใหญ่จะใช้กับอุปกรณ์เคลื่อนที่ในขณะที่เขียน การตั้งค่าตัวเลือกนี้จะทำให้การแจ้งเตือนใหม่สั่นและเล่นเสียงของระบบ

ในบางกรณี คุณอาจต้องการให้การแจ้งเตือนที่แทนที่แจ้งเตือนผู้ใช้แทนที่จะอัปเดตโดยไม่มีเสียง แอปพลิเคชันแชทเป็นตัวอย่างที่ดี ในกรณีนี้ คุณควรตั้งค่า tag และ renotify เป็น true

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

เงียบ

ตัวเลือกนี้ช่วยให้คุณแสดงการแจ้งเตือนใหม่ได้ แต่จะป้องกันลักษณะการทำงานเริ่มต้นของการสั่น เสียง และการเปิดจอแสดงผลของอุปกรณ์

วิธีนี้เหมาะอย่างยิ่งหากการแจ้งเตือนไม่จำเป็นต้องได้รับความสนใจจากผู้ใช้ในทันที

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

ต้องมีการโต้ตอบ

Chrome บนเดสก์ท็อปจะแสดงการแจ้งเตือนเป็นระยะเวลาหนึ่งก่อนที่จะซ่อน Chrome บน Android ไม่มีลักษณะการทำงานนี้ การแจ้งเตือนจะแสดงจนกว่าผู้ใช้จะโต้ตอบกับการแจ้งเตือนนั้น

หากต้องการบังคับให้การแจ้งเตือนแสดงอยู่จนกว่าผู้ใช้จะโต้ตอบ ให้เพิ่มตัวเลือก requireInteraction ซึ่งจะแสดงการแจ้งเตือนจนกว่าผู้ใช้จะปิดหรือคลิกการแจ้งเตือน

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

โปรดพิจารณาให้ดีก่อนใช้ตัวเลือกนี้ การแสดงการแจ้งเตือนและบังคับให้ผู้ใช้หยุดสิ่งที่กำลังทำอยู่เพื่อปิดการแจ้งเตือนอาจสร้างความรำคาญใจได้

ในส่วนถัดไป เราจะมาดูรูปแบบทั่วไปที่ใช้บนเว็บเพื่อจัดการการแจ้งเตือนและดำเนินการต่างๆ เช่น การเปิดหน้าเว็บเมื่อมีการคลิกการแจ้งเตือน

ขั้นตอนต่อไป

Code Labs