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

ตัวเลือกการแจ้งเตือนจะแบ่งออกเป็น 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 Web Application ในอุปกรณ์ ระบบจะใช้ชื่อเว็บแอปแทนชื่อเบราว์เซอร์

การแจ้งเตือนที่มีชื่อเว็บแอปแทนชื่อเบราว์เซอร์

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

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 ยังมีการแจ้งเตือนที่กำหนดเองสำหรับแพลตฟอร์มเดสก์ท็อปทั้งหมดด้วย คุณสามารถเปิดใช้ได้โดยตั้งค่า Flag 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 ต้องการรูปภาพขนาด 64dp (ซึ่งคือ 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 ขนาดที่แนะนำคือ 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 บน Linux

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

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

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

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

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

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

ใน Android 7 ขึ้นไป ไอคอนการดำเนินการจะไม่แสดงเลย

เราหวังว่า Chrome จะเปลี่ยนลักษณะการทำงานในเดสก์ท็อปให้เหมือนกับ Android (เช่น ใช้รูปแบบสีที่เหมาะสมเพื่อให้ไอคอนเข้ากับรูปลักษณ์และความรู้สึกของระบบ) ในระหว่างนี้ คุณจับคู่สีข้อความของ Chrome โดยทำให้ไอคอนมีสี #333333 ได้

อีกอย่างคือ ไอคอนดูคมชัดบน Android แต่ไม่เป็นไอคอนบนเดสก์ท็อป

ขนาดที่ดีที่สุดที่เราใช้ได้ใน Chrome บนเดสก์ท็อปคือ 24 x 24 พิกเซล น่าเสียดายที่ไอคอนนี้ดูไม่เข้าทีใน Android

แนวทางปฏิบัติแนะนำที่เราได้เรียนรู้จากความแตกต่างเหล่านี้มีดังนี้

  • ใช้รูปแบบสีที่สอดคล้องกันสำหรับไอคอนเพื่อให้ไอคอนทั้งหมดแสดงต่อผู้ใช้อย่างสม่ำเสมอเป็นอย่างน้อย
  • ตรวจสอบว่ารูปภาพทำงานแบบโมโนโครมได้ เนื่องจากบางแพลตฟอร์มอาจแสดงรูปภาพแบบนั้น
  • ลองใช้ขนาดต่างๆ เพื่อดูว่าขนาดใดเหมาะกับคุณ 128 พิกเซล × 128 พิกเซลใช้งานได้ดีบน 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)

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

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

Codelabs