การแสดงการแจ้งเตือน

Alexey Rodionov

Matt Gaunt

ตัวเลือกการแจ้งเตือนแบ่งออกเป็น 2 ส่วน ได้แก่ ส่วนที่เกี่ยวข้องกับลักษณะที่ปรากฏ (ส่วนนี้) และส่วนที่อธิบายลักษณะการทำงานของการแจ้งเตือน (ส่วนถัดไป)

คุณสามารถลองใช้ตัวเลือกการแจ้งเตือนต่างๆ ในเบราว์เซอร์ต่างๆ บนแพลตฟอร์มต่างๆ โดยใช้เครื่องมือสร้างการแจ้งเตือนของ Peter Beverloo

ตัวเลือกภาพ

API สำหรับแสดงการแจ้งเตือนนั้นง่ายมาก

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

อาร์กิวเมนต์ทั้ง 2 รายการ ได้แก่ 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

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

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

หากเราเรียกใช้โค้ดต่อไปนี้

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เป็นรูปภาพขนาดเล็กที่คุณแสดงข้างชื่อและข้อความเนื้อหาได้

ในโค้ด คุณต้องระบุ URL ของรูปภาพที่ต้องการโหลด ดังนี้

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

คุณจะได้รับการแจ้งเตือนนี้ใน Chrome บน Linux

และใน Firefox บน Linux ให้ทำดังนี้

น่าเสียดายที่ไม่มีหลักเกณฑ์ที่แน่นอนเกี่ยวกับขนาดรูปภาพที่ควรใช้สำหรับไอคอน

Android ดูเหมือนจะต้องการรูปภาพขนาด 64dp (ซึ่งก็คือ 64px คูณด้วยอัตราส่วนพิกเซลของอุปกรณ์)

สมมติว่าอัตราส่วนพิกเซลสูงสุดสำหรับอุปกรณ์คือ 3 ไอคอนขนาด 192 พิกเซลขึ้นไปจึงเป็นตัวเลือกที่ปลอดภัย

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

ป้าย

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

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

ในขณะที่เขียนบทความนี้ ป้ายจะใช้ใน Chrome บน Android เท่านั้น

ในเบราว์เซอร์อื่นๆ (หรือ Chrome ที่ไม่มีป้าย) คุณจะเห็นไอคอนของเบราว์เซอร์

เช่นเดียวกับตัวเลือก icon ไม่มีหลักเกณฑ์ที่แน่นอนเกี่ยวกับขนาดที่จะใช้

เมื่อเจาะลึกหลักเกณฑ์ของ Android ขนาดที่แนะนำคือ 24 พิกเซลคูณด้วยอัตราส่วนพิกเซลของอุปกรณ์

ซึ่งหมายความว่ารูปภาพขนาด 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

เมื่อใช้หลักเกณฑ์นี้ รูปภาพที่มีความกว้าง 1350 พิกเซลขึ้นไปจึงเป็นตัวเลือกที่ดี

การดำเนินการ (ปุ่ม)

คุณสามารถกำหนด 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 บนเดสก์ท็อปคือ 24px x 24px น่าเสียดายที่แอปนี้ดูไม่เข้ากับ 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 (ขณะวางเมาส์เหนือองค์ประกอบ) คุณจะเห็นสิ่งนี้

สั่น

ข้อควรระวัง: การรองรับ vibrate เลิกใช้งานแล้วใน Android 8 ขึ้นไป

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

รูปแบบของตัวเลือกการสั่นควรเป็นอาร์เรย์ของตัวเลขที่อธิบายจำนวนมิลลิวินาทีที่อุปกรณ์ควรสั่น ตามด้วยจำนวนมิลลิวินาทีที่อุปกรณ์ไม่ควรสั่น

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 เนื่องจากมีคนส่งข้อความถึงผู้ใช้ แทนที่จะใช้ชื่อ "ข้อความใหม่" และเนื้อหา "คลิกที่นี่เพื่ออ่าน" ให้ใช้ชื่อ "John เพิ่งส่งข้อความใหม่" และตั้งค่าเนื้อหาของการแจ้งเตือนเป็นส่วนหนึ่งของข้อความ

เบราว์เซอร์และการตรวจหาฟีเจอร์

ในขณะที่เขียนบทความนี้ Chrome และ Firefox มีความแตกต่างกันค่อนข้างมากในแง่ของการรองรับฟีเจอร์สำหรับการแจ้งเตือน

โชคดีที่คุณสามารถตรวจหาการรองรับฟีเจอร์การแจ้งเตือนได้โดยดูที่ต้นแบบ window.Notification

สมมติว่าเราต้องการทราบว่าการแจ้งเตือนรองรับปุ่มดำเนินการหรือไม่ เราจะทำดังนี้

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

ซึ่งจะช่วยให้เราเปลี่ยนการแจ้งเตือนที่แสดงต่อผู้ใช้ได้

สำหรับตัวเลือกอื่นๆ ให้ทำแบบเดียวกับด้านบน โดยแทนที่ 'actions' ด้วยชื่อพารามิเตอร์ที่ต้องการ

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

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

Code Labs

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