ตัวเลือกการแจ้งเตือนจะแบ่งออกเป็น 2 ส่วน โดยส่วนแรกจะเกี่ยวกับลักษณะด้านภาพ (ส่วนนี้) ส่วนอีกส่วนจะอธิบายลักษณะพฤติกรรมของการแจ้งเตือน (ส่วนถัดไป)
ลองใช้ตัวเลือกการแจ้งเตือนต่างๆ ในเบราว์เซอร์ต่างๆ บนแพลตฟอร์มต่างๆ โดยใช้โปรแกรมสร้างการแจ้งเตือนของ Peter Beverloo
ตัวเลือกภาพ
API สำหรับการแสดงการแจ้งเตือนนั้นทำได้ง่ายมาก ดังนี้
<ServiceWorkerRegistration>.showNotification(<title>, <options>);
ทั้งอาร์กิวเมนต์ title
และ options
เป็นตัวเลือกที่ไม่บังคับ
ชื่อเป็นสตริง และตัวเลือกอาจจะเป็นอะไรก็ได้ต่อไปนี้
{
"//": "Visual Options",
"body": "<String>",
"icon": "<URL String>",
"image": "<URL String>",
"badge": "<URL String>",
"dir": "<String of 'auto' | 'ltr' | 'rtl'>",
"timestamp": "<Long>"
"//": "Both visual & behavioral options",
"actions": "<Array of Strings>",
"data": "<Anything>",
"//": "Behavioral Options",
"tag": "<String>",
"requireInteraction": "<boolean>",
"renotify": "<Boolean>",
"vibrate": "<Array of Integers>",
"sound": "<URL String>",
"silent": "<Boolean>",
}
มาดูตัวเลือกรูปภาพกัน
ตัวเลือกชื่อและเนื้อหา
นี่คือลักษณะของการแจ้งเตือนโดยไม่มีชื่อและตัวเลือกใน Chrome บน Windows
คุณจะเห็นว่ามีการใช้ชื่อเบราว์เซอร์เป็นชื่อ และตัวยึดตำแหน่ง "การแจ้งเตือนใหม่" จะใช้เป็นข้อความการแจ้งเตือน
หากติดตั้งเว็บแอปพลิเคชันแบบ Progressive ในอุปกรณ์ ระบบจะใช้ชื่อเว็บแอปแทนชื่อเบราว์เซอร์ ดังนี้
หากเราเรียกใช้โค้ดต่อไปนี้
const title = 'Simple Title';
const options = {
body: 'Simple piece of body text.\nSecond line of body text :)',
};
registration.showNotification(title, options);
เราได้รับการแจ้งเตือนนี้ใน Chrome บน Linux
ใน Firefox บน Linux จะมีลักษณะดังนี้
นี่คือลักษณะการแจ้งเตือนที่มีข้อความจำนวนมากในชื่อและเนื้อหาใน Chrome ใน Linux
Firefox บน Linux จะยุบข้อความเนื้อหาจนกว่าคุณจะวางเมาส์เหนือการแจ้งเตือน ซึ่งทำให้การแจ้งเตือนขยายใหญ่ขึ้น ดังนี้
การแจ้งเตือนเดียวกันใน Firefox บน Windows จะมีลักษณะดังนี้
ดังที่คุณเห็น การแจ้งเตือนเดียวกันอาจดูแตกต่างกันไปในเบราว์เซอร์ต่างๆ และอาจดูแตกต่างกันในเบราว์เซอร์เดียวกันบนแพลตฟอร์มต่างๆ ด้วย
Chrome และ Firefox ใช้การแจ้งเตือนของระบบและศูนย์การแจ้งเตือนในแพลตฟอร์มที่รองรับ
เช่น การแจ้งเตือนของระบบใน macOS จะไม่รองรับรูปภาพและการดำเนินการ (ปุ่มและการตอบกลับแบบแทรกในบรรทัด)
นอกจากนี้ Chrome ยังมีการแจ้งเตือนที่กำหนดเองสำหรับแพลตฟอร์มเดสก์ท็อปทั้งหมดอีกด้วย คุณเปิดใช้ได้โดยตั้งค่าแฟล็ก chrome://flags/#enable-system-notifications
เป็นสถานะ Disabled
Icon
โดยพื้นฐานแล้ว ตัวเลือก icon
คือรูปภาพขนาดเล็กที่คุณสามารถแสดงข้างชื่อและข้อความเนื้อหาได้
คุณต้องระบุ URL ไปยังรูปภาพที่ต้องการโหลดในโค้ด ดังนี้
const title = 'Icon Notification';
const options = {
icon: '/images/demos/icon-512x512.png',
};
registration.showNotification(title, options);
คุณได้รับการแจ้งเตือนนี้ใน Chrome บน Linux
และใน Firefox บน Linux:
น่าเสียดายที่ไม่มีหลักเกณฑ์ที่ตายตัวสำหรับขนาดรูปภาพที่จะใช้เป็นไอคอน
ดูเหมือนว่า Android ต้องการรูปภาพขนาด 64 dp (ซึ่งมีความละเอียดเป็น 64 พิกเซลตามอัตราส่วนพิกเซลของอุปกรณ์)
สมมติว่าอัตราส่วนพิกเซลสูงสุดของอุปกรณ์คือ 3 ไอคอนขนาด 192 พิกเซลขึ้นไปถือเป็นความปลอดภัย
ป้าย
badge
เป็นไอคอนโมโนโครมขนาดเล็กที่ใช้เพื่อแสดงข้อมูลเพิ่มเติมเล็กน้อยให้ผู้ใช้ทราบว่าการแจ้งเตือนมาจากที่ใด
const title = 'Badge Notification';
const options = {
badge: '/images/demos/badge-128x128.png',
};
registration.showNotification(title, options);
เวลาที่เขียนป้ายจะใช้ใน Chrome บน Android เท่านั้น
ในเบราว์เซอร์อื่นๆ (หรือ Chrome ที่ไม่มีป้าย) คุณจะเห็นไอคอนของเบราว์เซอร์
เช่นเดียวกับตัวเลือก icon
ไม่มีหลักเกณฑ์ที่แท้จริงเกี่ยวกับขนาดที่จะใช้
ศึกษาหลักเกณฑ์ของ Android อย่างละเอียด ขนาดที่แนะนำคือ 24px คูณด้วยอัตราส่วนพิกเซลของอุปกรณ์
ซึ่งหมายความว่ารูปภาพขนาด 72 พิกเซลขึ้นไปควรเหมาะสม (สมมติว่าอัตราส่วนพิกเซลของอุปกรณ์สูงสุดคือ 3)
รูปภาพ
ใช้ตัวเลือก image
เพื่อแสดงรูปภาพขนาดใหญ่ขึ้นให้แก่ผู้ใช้ได้ ซึ่งจะเป็นประโยชน์อย่างยิ่งในการแสดงภาพตัวอย่างแก่ผู้ใช้
const title = 'Image Notification';
const options = {
image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};
registration.showNotification(title, options);
ใน Chrome บน Linux การแจ้งเตือนจะมีลักษณะดังนี้
การครอบตัดและอัตราส่วนใน Chrome บน Android จะแตกต่างกัน
เมื่อพิจารณาจากอัตราส่วนระหว่างเดสก์ท็อปกับอุปกรณ์เคลื่อนที่ที่ต่างกัน การแนะนำหลักเกณฑ์จึงทำได้ยากมาก
เนื่องจาก Chrome บนเดสก์ท็อปไม่ได้เติมพื้นที่ว่างให้เต็มและมีอัตราส่วน 4:3 วิธีที่ดีที่สุดคือการแสดงรูปภาพที่มีอัตราส่วนนี้และอนุญาตให้ Android ครอบตัดรูปภาพ อย่างไรก็ตาม ตัวเลือก image
อาจยังมีการเปลี่ยนแปลง
สำหรับ Android หลักเกณฑ์เพียงอย่างเดียวคือความกว้าง 450dp
เมื่อใช้คำแนะนำนี้ รูปภาพที่มีความกว้าง 1350px ขึ้นไปก็น่าจะเหมาะสม
การทำงาน (ปุ่ม)
คุณกำหนด actions
ให้แสดงปุ่มที่มีการแจ้งเตือนได้โดยทำดังนี้
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
type: 'button',
title: 'Coffee',
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);
สำหรับการดำเนินการแต่ละรายการ คุณสามารถระบุ title
, action
(ซึ่งก็คือรหัส), icon
และ type
ชื่อและไอคอนคือสิ่งที่คุณเห็นในการแจ้งเตือน รหัสนี้ใช้เมื่อตรวจพบว่ามีการคลิกปุ่มการทำงาน (ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ในส่วนถัดไป) คุณละเว้นประเภทนี้ได้เนื่องจาก 'button'
เป็นค่าเริ่มต้น
ในขณะที่เขียนเฉพาะ Chrome และ Opera สำหรับ Android การดำเนินการสนับสนุน
ในตัวอย่างด้านบน มีการกระทำ 4 รายการที่กำหนดไว้เพื่อแสดงให้เห็นว่าคุณสามารถกำหนดการดำเนินการได้มากกว่าที่จะแสดง หากต้องการทราบจำนวนการดำเนินการที่เบราว์เซอร์จะแสดง ให้ตรวจสอบwindow.Notification?.maxActions
โดยทำดังนี้
const maxVisibleActions = window.Notification?.maxActions;
if (maxVisibleActions) {
options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
options.body = 'Notification actions are not supported.';
}
บนเดสก์ท็อป ไอคอนปุ่มการทำงานจะแสดงสี (เห็นโดนัทสีชมพู) ดังนี้
ใน Android 6 และเวอร์ชันก่อนหน้า ระบบจะใส่สีไอคอนเพื่อให้ตรงกับรูปแบบสีของระบบดังนี้
ใน Android 7 ขึ้นไป ไอคอนการดำเนินการจะไม่แสดงเลย
Chrome จะเปลี่ยนลักษณะการทำงานในเดสก์ท็อปให้สอดคล้องกับ Android (เช่น ใช้รูปแบบสีที่เหมาะสมเพื่อให้ไอคอนเข้ากับรูปลักษณ์ของระบบ) ในระหว่างนี้ คุณสามารถดูสีข้อความของ Chrome ได้โดยทำให้ไอคอนมีสี #333333
นอกจากนี้ เรายังควรกล่าวว่าไอคอนดูคมชัดบน Android แต่ไม่บนเดสก์ท็อป
ขนาดที่ดีที่สุดที่ฉันสามารถใช้ใน Chrome บนเดสก์ท็อปได้คือ 24 x 24 พิกเซล หน้าตาน่าเศร้ากว่าเดิม ใน Android
แนวทางปฏิบัติแนะนำที่เรานำมาใช้ได้จากความแตกต่างเหล่านี้
- ใช้รูปแบบสีที่สอดคล้องกันสำหรับไอคอนเพื่อให้อย่างน้อยไอคอนทั้งหมดแสดงต่อผู้ใช้อย่างสม่ำเสมอ
- ต้องแน่ใจว่าทำงานในรูปแบบโมโนโครมเพราะบางแพลตฟอร์มอาจแสดงผลในลักษณะดังกล่าว
- ทดสอบขนาดและดูว่าขนาดใดเหมาะกับคุณ 128px × 128px ทำงานได้ดีใน Android สำหรับฉัน แต่กลับมีคุณภาพต่ำกว่าบนเดสก์ท็อป
- คาดว่าไอคอนการดำเนินการของคุณจะไม่แสดงเลย
ข้อกำหนดการแจ้งเตือนกำลังสำรวจวิธีกำหนดไอคอนหลายขนาด แต่ดูเหมือนว่าจะใช้เวลาสักครู่ก่อนที่จะมีการตกลงกันได้
การดำเนินการ (การตอบกลับแบบแทรกในบรรทัด)
คุณเพิ่มการตอบกลับการแจ้งเตือนแบบแทรกในบรรทัดได้โดยกำหนดการดำเนินการด้วยประเภท 'text'
ดังนี้
const title = 'Alexey Rodionov';
const options = {
body: 'How are you doing? )',
image: '/images/demos/avatar-512x512.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'reply',
type: 'text',
title: 'Reply',
icon: '/images/demos/action-5-128x128.png',
}
],
};
registration.showNotification(title, options);
นี่คือลักษณะที่ปรากฏบน Android
การคลิกที่ปุ่มการทำงานจะเป็นการเปิดฟิลด์ป้อนข้อความ:
คุณปรับแต่งตัวยึดตำแหน่งสำหรับการป้อนข้อความได้โดยทำดังนี้
const title = 'Alexey Rodionov';
const options = {
body: 'How are you doing? )',
icon: '/images/demos/avatar-512x512.jpg',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'reply',
type: 'text',
title: 'Reply',
icon: '/images/demos/action-5-128x128.png',
placeholder: 'Type text here',
}
],
};
registration.showNotification(title, options);
ช่องป้อนข้อความใน Chrome บน Windows จะแสดงอยู่เสมอโดยไม่ต้องคลิกปุ่มดำเนินการ
นอกจากนี้ คุณยังเพิ่มการตอบกลับแบบแทรกในบรรทัดได้มากกว่า 1 รายการ หรือรวมปุ่มและการตอบกลับแบบแทรกในบรรทัดเข้าด้วยกัน ดังนี้
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);
ทิศทาง
พารามิเตอร์ dir
ช่วยให้คุณกำหนดทิศทางที่ข้อความจะแสดงได้ จากขวาไปซ้ายหรือซ้ายไปขวา
ในการทดสอบ ดูเหมือนว่าทิศทางจะขึ้นอยู่กับข้อความเป็นหลัก ไม่ใช่พารามิเตอร์นี้ ตามข้อกำหนดแล้ว บทความนี้มีไว้เพื่อแนะนำวิธีจัดเลย์เอาต์ตัวเลือกต่างๆ เช่น การดำเนินการ ให้แก่เบราว์เซอร์ แต่ฉันไม่เห็นความแตกต่างเลย
น่าจะดีที่สุดหากกำหนดได้ว่าคุณทำได้ ไม่เช่นนั้นเบราว์เซอร์ควรดำเนินการอย่างถูกต้องตามข้อความที่ให้มา
ควรตั้งค่าพารามิเตอร์เป็น auto
, ltr
หรือ rtl
ภาษาที่อ่านจากขวาไปซ้ายบน Chrome บน Linux มีลักษณะดังนี้
ใน Firefox (ขณะที่วางเมาส์เหนือเบราว์เซอร์) คุณจะได้รับสิ่งนี้:
สั่น
ตัวเลือกการสั่นช่วยให้คุณสามารถกำหนดรูปแบบการสั่นที่จะทำงานเมื่อมีการแสดงการแจ้งเตือน โดยถือว่าการตั้งค่าปัจจุบันของผู้ใช้อนุญาตให้มีการสั่น (เช่น อุปกรณ์ไม่ได้อยู่ในโหมดปิดเสียง)
รูปแบบของตัวเลือกการสั่นควรเป็นชุดตัวเลขที่อธิบายตัวเลขมิลลิวินาทีที่อุปกรณ์ควรสั่น ตามด้วยจำนวนมิลลิวินาทีที่อุปกรณ์ไม่ต้องสั่น
const title = 'Vibrate Notification';
const options = {
// Star Wars shamelessly taken from the awesome Peter Beverloo
// https://tests.peter.sh/notification-generator/
vibrate: [
500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
40, 500,
],
};
registration.showNotification(title, options);
การดำเนินการนี้จะส่งผลต่ออุปกรณ์ที่รองรับการสั่นเท่านั้น
เสียง
พารามิเตอร์เสียงช่วยให้คุณกำหนดเสียงที่จะเล่นเมื่อได้รับการแจ้งเตือนได้
ในขณะที่เขียน เบราว์เซอร์ไม่มีการสนับสนุนสำหรับตัวเลือกนี้
const title = 'Sound Notification';
const options = {
sound: '/demos/notification-examples/audio/notification-sound.mp3',
};
registration.showNotification(title, options);
การประทับเวลา
การประทับเวลาช่วยให้คุณบอกแพลตฟอร์มได้ว่าเกิดเหตุการณ์ขึ้นเมื่อใดซึ่งส่งผลให้ระบบส่งข้อความ Push
timestamp
ควรเป็นจำนวนมิลลิวินาทีตั้งแต่ 00:00:00 UTC ซึ่งเป็น 1 มกราคม 1970
(ซึ่งก็คือ UNIX Epoch)
const title = 'Timestamp Notification';
const options = {
body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
timestamp: Date.parse('01 Jan 2000 00:00:00'),
};
registration.showNotification(title, options);
แนวทางปฏิบัติแนะนำสำหรับ UX
ความล้มเหลวในการใช้ UX ที่ร้ายแรงที่สุดที่ฉันเห็นจากการแจ้งเตือนคือการขาดข้อมูลที่เฉพาะเจาะจงซึ่งแสดงในการแจ้งเตือน
คุณควรพิจารณาสาเหตุที่ส่งข้อความ Push ในตอนแรกและตรวจสอบว่าใช้ตัวเลือกการแจ้งเตือนทั้งหมดเพื่อช่วยให้ผู้ใช้เข้าใจเหตุผลในการอ่านการแจ้งเตือนนั้น
พูดตามตรง การดูตัวอย่างต่างๆ นั้นง่ายมากและคิดว่า "ฉันจะไม่มีทางทำผิดพลาดแบบนั้นแน่" แต่การหลงอยู่ในกับดักนั้น ง่ายกว่าที่คิดนะครับ
ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยงมีดังนี้
- อย่าใส่เว็บไซต์อยู่ในชื่อหรือเนื้อหา เบราว์เซอร์จะรวมโดเมนของคุณไว้ในการแจ้งเตือน ดังนั้นอย่าทำซ้ำ
- ใช้ข้อมูลที่คุณมีทั้งหมด หากคุณส่งข้อความพุชเนื่องจากมีคนส่งข้อความถึงผู้ใช้ แทนที่จะใช้ชื่อ "ข้อความใหม่" และเนื้อหาเป็น "คลิกที่นี่เพื่ออ่าน" ให้ใช้ชื่อ "จอห์นเพิ่งส่งข้อความใหม่" และกำหนดเนื้อหาของการแจ้งเตือนเป็นส่วนของข้อความ
การตรวจหาเบราว์เซอร์และฟีเจอร์
ในขณะที่เขียน พบว่ามีความแตกต่างค่อนข้างมากระหว่าง Chrome และ Firefox ในแง่ของการสนับสนุนฟีเจอร์สำหรับการแจ้งเตือน
โชคดีที่คุณตรวจพบการรองรับฟีเจอร์การแจ้งเตือนได้โดยดูที่ต้นแบบ window.Notification
สมมติว่าเราต้องการทราบว่าการแจ้งเตือนรองรับปุ่มการทำงานหรือไม่ เราจะทำสิ่งต่อไปนี้
if ('actions' in window.Notification?.prototype) {
// Action buttons are supported.
} else {
// Action buttons are NOT supported.
}
ด้วยเหตุนี้ เราจึงสามารถเปลี่ยนแปลงการแจ้งเตือนที่แสดงต่อผู้ใช้ได้
สำหรับตัวเลือกอื่นๆ ให้ทำเหมือนกับด้านบน โดยแทนที่ 'actions'
ด้วยชื่อพารามิเตอร์ที่ต้องการ
ขั้นตอนถัดไป
- ภาพรวมข้อความ Push ในเว็บ
- วิธีการทำงานของ Push
- การสมัครใช้บริการ
- UX ของสิทธิ์
- การส่งข้อความด้วยไลบรารีพุชจากเว็บ
- โปรโตคอลพุชจากเว็บ
- การจัดการเหตุการณ์พุช
- การแสดงการแจ้งเตือน
- ลักษณะการทำงานของการแจ้งเตือน
- รูปแบบการแจ้งเตือนทั่วไป
- คำถามที่พบบ่อยเกี่ยวกับข้อความ Push
- ปัญหาที่พบได้ทั่วไปและการรายงานข้อบกพร่อง