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

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 คุณสามารถเข้าถึงพร็อพเพอร์ตี้และวิธีการของการแจ้งเตือนได้จากส่วนนี้ ในกรณีนี้ ให้เรียกใช้เมธอด close() และดำเนินการเพิ่มเติม

คำเตือน: คุณต้องใช้ event.waitUntil() เพื่อให้โปรแกรมทำงานของบริการทำงานขณะที่โค้ดไม่ว่าง

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

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

ปุ่ม

ในส่วนก่อนหน้านี้ คุณได้เห็นวิธีกำหนดปุ่มการทำงานเมื่อเรียกใช้ 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);

การแจ้งเตือนแรกที่จะแสดง

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

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

ต่อไปแสดงการแจ้งเตือนครั้งที่ 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 จะช่วยแก้ปัญหานี้ได้

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

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

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

const title = 'Notification 2 of 2';

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

registration.showNotification(title, options);

คำเตือน: หากตั้งค่า renotify เป็น true ในการแจ้งเตือนที่ไม่มี tag ระบบจะแสดงข้อผิดพลาดต่อไปนี้ TypeError: Failed to execute 'showNotification' on 'ServiceWorkerRegistration': Notifications which set the renotify flag must specify a non-empty tag

เงียบ

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

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

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

หมายเหตุ: หากคุณกำหนดทั้ง silent และ renotify จะถือว่า silent มีความสำคัญเหนือกว่า

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

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

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

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

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

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

ขั้นตอนถัดไป

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

ห้องทดลองการเขียนโค้ด

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