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

Alexey Rodionov

Matt Gaunt

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

โดยค่าเริ่มต้น การเรียกใช้ 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 จากหน้านี้ คุณสามารถเข้าถึงพร็อพเพอร์ตี้และวิธีการของการแจ้งเตือนได้ ด้วยวิธีนี้ คุณเรียกใช้ Method ของ 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 ก็คือรหัสสตริงที่ "groups" การแจ้งเตือนต่างๆ ร่วมกัน โดยทำให้ กำหนดวิธีแสดงการแจ้งเตือนหลายรายการต่อผู้ใช้ ขั้นตอนนี้อธิบายได้ง่ายที่สุด พร้อมตัวอย่าง

แสดงการแจ้งเตือนและเพิ่มแท็ก '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);

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

เรามาแสดงการแจ้งเตือนครั้งที่ 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 แก่ผู้ใช้

คราวนี้มาแสดงการแจ้งเตือนครั้งที่ 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 ครั้ง

ตัวเลือก 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);

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

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

สถานที่ที่จะไปต่อ

• ภาพรวมข้อความ Push จากเว็บ
• วิธีการทำงานของพุช
• การสมัครใช้บริการผู้ใช้
• UX สิทธิ์
• การส่งข้อความด้วยไลบรารีพุชบนเว็บ
• โปรโตคอลการพุชในเว็บ
• การจัดการเหตุการณ์พุช
• การแสดงการแจ้งเตือน
• ลักษณะการทำงานของการแจ้งเตือน
• รูปแบบการแจ้งเตือนทั่วไป
• คำถามที่พบบ่อยเกี่ยวกับข้อความ Push
• ปัญหาที่พบบ่อยและการรายงานข้อบกพร่อง

Code Lab

• สร้างไคลเอ็นต์ข้อความ Push
• สร้างเซิร์ฟเวอร์ข้อความ Push