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

Alexey Rodionov

Matt Gaunt

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

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

สมมติว่าอัตราส่วนพิกเซลสูงสุดสำหรับอุปกรณ์คือ 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 for 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 จะเปลี่ยนลักษณะการทำงานของ 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 (เมื่อวางเมาส์เหนือรายการนั้นๆ) คุณจะได้รับข้อมูลต่อไปนี้

สั่น

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

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

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);

การประทับเวลา

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

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 ที่ล้มเหลวมากที่สุดที่ฉันเห็นจากการแจ้งเตือนคือการขาดข้อมูลที่เฉพาะเจาะจง จะแสดงขึ้นตามการแจ้งเตือน

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

บอกตามตรง คุณสามารถดูตัวอย่างและคิดว่า "ฉันจะไม่ทำผิดพลาดอย่างนั้น" แต่ทำได้ง่ายกว่า เกิดกับดักนั้น อย่างที่คุณคิด

ข้อผิดพลาดที่พบบ่อยบางส่วนที่ควรหลีกเลี่ยงมีดังนี้

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

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

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

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

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

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

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

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

สถานที่ที่จะไปต่อ

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

Code Lab

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