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

อเล็กซี โรดิโอนอฟ
อัลเล็กซี โรดิโอนอฟ

ตัวเลือกการแจ้งเตือนจะแบ่งออกเป็น 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>",
}

มาดูตัวเลือกรูปภาพกัน

การผ่า UI ของการแจ้งเตือน

ตัวเลือกชื่อและเนื้อหา

นี่คือลักษณะของการแจ้งเตือนโดยไม่มีชื่อและตัวเลือกใน Chrome บน Windows

การแจ้งเตือนที่ไม่มีชื่อและตัวเลือกใน 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

การแจ้งเตือนพร้อมชื่อและข้อความใน Chrome บน Linux

ใน Firefox บน Linux จะมีลักษณะดังนี้

การแจ้งเตือนที่มีชื่อและเนื้อความใน Firefox บน Linux

นี่คือลักษณะการแจ้งเตือนที่มีข้อความจำนวนมากในชื่อและเนื้อหาใน Chrome ใน Linux

การแจ้งเตือนที่มีชื่อเรื่องและข้อความเนื้อหายาวใน Chrome บน Linux

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

การแจ้งเตือนที่มีชื่อเรื่องและเนื้อหายาวใน Firefox บน Linux

การแจ้งเตือนที่มีชื่อเรื่องและข้อความเนื้อหายาวใน Firefox บน Linux ขณะเลื่อนเคอร์เซอร์ของเมาส์ไปวางเหนือการแจ้งเตือน

การแจ้งเตือนเดียวกันใน Firefox บน Windows จะมีลักษณะดังนี้

การแจ้งเตือนที่มีชื่อและเนื้อความใน Firefox บน Windows

การแจ้งเตือนที่มีชื่อเรื่องและเนื้อหายาวใน 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

การแจ้งเตือนที่มีไอคอนใน Chrome บน Linux

และใน Firefox บน 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 บน Android

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

การแจ้งเตือนที่มีป้ายใน Firefox บน Android

เช่นเดียวกับตัวเลือก 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 บน Linux

การครอบตัดและอัตราส่วนใน Chrome บน Android จะแตกต่างกัน

การแจ้งเตือนพร้อมรูปภาพใน 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.';
}

บนเดสก์ท็อป ไอคอนปุ่มการทำงานจะแสดงสี (เห็นโดนัทสีชมพู) ดังนี้

การแจ้งเตือนพร้อมปุ่มการทำงานใน Chrome ใน Linux

ใน Android 6 และเวอร์ชันก่อนหน้า ระบบจะใส่สีไอคอนเพื่อให้ตรงกับรูปแบบสีของระบบดังนี้

การแจ้งเตือนด้วยปุ่มการทำงานใน Chrome สำหรับ Android

ใน 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

การแจ้งเตือนบน Android พร้อมปุ่มการทำงานตอบกลับ

การคลิกที่ปุ่มการทำงานจะเป็นการเปิดฟิลด์ป้อนข้อความ:

การแจ้งเตือนบน 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);

การแจ้งเตือนบน Android พร้อมตัวยึดตำแหน่งที่กำหนดเองสำหรับป้อนข้อความ

ช่องป้อนข้อความใน Chrome บน Windows จะแสดงอยู่เสมอโดยไม่ต้องคลิกปุ่มดำเนินการ

การแจ้งเตือนใน 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);

การแจ้งเตือนใน Windows พร้อมช่องป้อนข้อความและปุ่มการทำงาน 2 ปุ่ม

ทิศทาง

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

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

น่าจะดีที่สุดหากกำหนดได้ว่าคุณทำได้ ไม่เช่นนั้นเบราว์เซอร์ควรดำเนินการอย่างถูกต้องตามข้อความที่ให้มา

ควรตั้งค่าพารามิเตอร์เป็น auto, ltr หรือ rtl

ภาษาที่อ่านจากขวาไปซ้ายบน Chrome บน Linux มีลักษณะดังนี้

การแจ้งเตือนด้วยภาษาแบบขวาไปซ้ายใน Chrome ใน Linux

ใน Firefox (ขณะที่วางเมาส์เหนือเบราว์เซอร์) คุณจะได้รับสิ่งนี้:

การแจ้งเตือนด้วยภาษาที่เขียนจากขวาไปซ้ายบน Firefox บน Linux

สั่น

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

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

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' ด้วยชื่อพารามิเตอร์ที่ต้องการ

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

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