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