Đang hiển thị thông báo

Các tuỳ chọn thông báo được chia thành hai phần, một phần xử lý các khía cạnh hình ảnh (phần này) và một phần giải thích các khía cạnh hành vi của thông báo (phần tiếp theo).

Bạn có thể thử nghiệm nhiều tuỳ chọn thông báo trong nhiều trình duyệt trên nhiều nền tảng bằng cách sử dụng Trình tạo thông báo của Peter Beverloo.

API để hiển thị một thông báo rất đơn giản:

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

Cả hai đối số titleoptions đều không bắt buộc.

Tiêu đề là một chuỗi và các tuỳ chọn có thể là bất kỳ nội dung nào sau đây:

{
  "//": "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>",
}

Hãy xem các tuỳ chọn hình ảnh:

Giải phẫu giao diện người dùng của một Thông báo.

Tuỳ chọn tiêu đề và nội dung

Dưới đây là hình ảnh thông báo không có tiêu đề và các tuỳ chọn trong Chrome trên Windows:

Thông báo không có tiêu đề và tuỳ chọn trong Chrome trên Windows.

Như bạn có thể thấy, tên trình duyệt được dùng làm tiêu đề và phần giữ chỗ "Thông báo mới" được dùng làm nội dung thông báo.

Nếu một ứng dụng web tiến bộ được cài đặt trên thiết bị, thì tên ứng dụng web sẽ được sử dụng thay cho tên trình duyệt:

Thông báo có tên ứng dụng web thay vì tên trình duyệt.

Nếu chúng tôi chạy mã sau:

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

chúng ta sẽ nhận được thông báo này trong Chrome trên Linux:

Thông báo có tiêu đề và nội dung trong Chrome trên Linux.

Trong Firefox trên Linux, mã sẽ có dạng như sau:

Thông báo có tiêu đề và nội dung trong Firefox trên Linux.

Dưới đây là giao diện của thông báo có nhiều văn bản trong tiêu đề và nội dung trong Chrome trên Linux:

Thông báo có tiêu đề và nội dung dài trong Chrome trên Linux.

Firefox trên Linux thu gọn văn bản nội dung cho đến khi bạn di chuột qua thông báo, làm cho thông báo mở rộng:

Thông báo có tiêu đề và nội dung dài trong Firefox trên Linux.

Thông báo có tiêu đề và nội dung dài trong Firefox trên Linux khi di chuột qua thông báo.

Cùng một thông báo trong Firefox trên Windows sẽ có dạng như sau:

Thông báo có tiêu đề và nội dung trong Firefox trên Windows.

Thông báo có tiêu đề và nội dung dài trong Firefox trên Windows.

Như bạn có thể thấy, cùng một thông báo có thể có giao diện khác nhau trên các trình duyệt. Giao diện cũng có thể khác nhau trong cùng một trình duyệt trên các nền tảng khác nhau.

Chrome và Firefox sử dụng thông báo hệ thống và trung tâm thông báo trên các nền tảng có sẵn các thông báo này.

Ví dụ: thông báo hệ thống trên macOS không hỗ trợ hình ảnh và thao tác (nút và phản hồi cùng dòng).

Chrome cũng có thông báo tuỳ chỉnh cho tất cả nền tảng máy tính. Bạn có thể bật tính năng này bằng cách đặt cờ chrome://flags/#enable-system-notifications thành trạng thái Disabled.

Biểu tượng

Tuỳ chọn icon về cơ bản là một hình ảnh nhỏ mà bạn có thể hiển thị bên cạnh tiêu đề và nội dung.

Trong mã của mình, bạn cần cung cấp URL cho hình ảnh bạn muốn tải:

const title = 'Icon Notification';

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

registration.showNotification(title, options);

Bạn sẽ nhận được thông báo sau trong Chrome trên Linux:

Thông báo có biểu tượng trong Chrome trên Linux.

và trong Firefox trên Linux:

Thông báo có biểu tượng trong Firefox trên Linux.

Đáng tiếc là không có nguyên tắc nào rõ ràng về kích thước hình ảnh cần sử dụng cho biểu tượng.

Có vẻ như Android muốn có hình ảnh 64 dp (là bội số 64 px theo tỷ lệ pixel của thiết bị).

Giả sử tỷ lệ pixel cao nhất cho một thiết bị là 3, thì kích thước biểu tượng từ 192px trở lên là một lựa chọn an toàn.

Huy hiệu

badge là một biểu tượng đơn sắc nhỏ dùng để cung cấp thêm một số thông tin cho người dùng về nguồn gốc của thông báo:

const title = 'Badge Notification';

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

registration.showNotification(title, options);

Tại thời điểm viết bài, huy hiệu này chỉ được dùng trong Chrome trên Android.

Thông báo có huy hiệu trong Chrome trên Android.

Trên các trình duyệt khác (hoặc Chrome không có huy hiệu), bạn sẽ thấy biểu tượng của trình duyệt.

Thông báo có huy hiệu trong Firefox trên Android.

Cũng như tuỳ chọn icon, không có nguyên tắc thực sự nào về kích thước cần sử dụng.

Theo nguyên tắc của Android, kích thước đề xuất là 24px nhân với tỷ lệ pixel của thiết bị.

Tức là hình ảnh có kích thước từ 72 px trở lên là tốt (giả sử tỷ lệ pixel tối đa của thiết bị là 3).

Hình ảnh

Bạn có thể dùng tuỳ chọn image để hiển thị hình ảnh lớn hơn cho người dùng. Điều này đặc biệt hữu ích khi hiển thị hình ảnh xem trước cho người dùng.

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

Trong Chrome trên Linux, thông báo sẽ có dạng như sau:

Thông báo có hình ảnh trong Chrome trên Linux.

Trong Chrome trên Android, tỷ lệ và cách cắt khác nhau:

Thông báo có hình ảnh trong Chrome trên Android.

Do sự khác biệt về tỷ lệ giữa máy tính và thiết bị di động, rất khó để đề xuất các nguyên tắc.

Vì Chrome trên máy tính không lấp đầy không gian có sẵn và có tỷ lệ 4:3, nên có lẽ phương pháp tốt nhất là phân phát hình ảnh có tỷ lệ này và cho phép Android cắt hình ảnh. Tuy nhiên, tuỳ chọn image vẫn có thể thay đổi.

Trên Android, nguyên tắc duy nhất là chiều rộng 450 dp.

Sử dụng nguyên tắc này, hình ảnh có chiều rộng 1350px trở lên sẽ là lựa chọn tốt.

Thao tác (Nút)

Bạn có thể xác định actions để hiển thị các nút có thông báo:

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

Đối với mỗi hành động, bạn có thể xác định một title, một action (về cơ bản là một mã nhận dạng), một icon và một type. Tiêu đề và biểu tượng là những gì bạn có thể thấy trong thông báo. Mã nhận dạng này được dùng khi phát hiện rằng nút hành động đã được nhấp vào (xem thêm về mã này trong phần tiếp theo). Bạn có thể bỏ qua loại này vì 'button' là giá trị mặc định.

Tại thời điểm viết bài, chỉ Chrome và Opera cho Android mới hỗ trợ các thao tác.

Trong ví dụ trên, có 4 hành động được xác định để minh hoạ rằng bạn có thể xác định nhiều hành động hơn số hành động sẽ hiển thị. Nếu muốn biết số lượng thao tác mà trình duyệt sẽ hiển thị, bạn có thể xem 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.';
}

Trên máy tính, các biểu tượng nút hành động sẽ hiển thị màu sắc (xem bánh donut màu hồng):

Thông báo có các nút hành động trên Chrome trên Linux.

Trên Android 6 trở xuống, các biểu tượng được tô màu để khớp với bảng phối màu của hệ thống:

Thông báo có các nút hành động trên Chrome cho Android.

Trên Android 7 trở lên, các biểu tượng hành động sẽ không xuất hiện.

Chrome hy vọng sẽ thay đổi hành vi của trình duyệt này trên máy tính để bàn để phù hợp với Android (tức là áp dụng bảng phối màu phù hợp để làm cho các biểu tượng phù hợp với giao diện của hệ thống). Trong thời gian chờ đợi, bạn có thể thay đổi màu văn bản của Chrome bằng cách làm cho các biểu tượng có màu #333333.

Cũng cần lưu ý rằng các biểu tượng trông sắc nét trên Android nhưng không sắc nét trên máy tính.

Kích thước tốt nhất mà tôi có thể sử dụng trên Chrome dành cho máy tính là 24px x 24px. Thật đáng tiếc là điều này có vẻ không phù hợp trên Android.

Sau đây là phương pháp hay nhất mà chúng ta có thể rút ra từ những điểm khác biệt này:

  • Hãy duy trì bảng phối màu nhất quán cho các biểu tượng để ít nhất tất cả biểu tượng đều được hiển thị nhất quán cho người dùng.
  • Hãy đảm bảo các hình ảnh này hoạt động ở chế độ đơn sắc vì một số nền tảng có thể hiển thị hình ảnh theo cách đó.
  • Hãy thử nghiệm kích thước và xem kích thước nào phù hợp với bạn. 128px × 128px hoạt động tốt trên Android đối với tôi nhưng chất lượng kém trên máy tính để bàn.
  • Có thể biểu tượng hành động của bạn sẽ không hiển thị.

Thông số kỹ thuật của Thông báo đang tìm hiểu cách xác định nhiều kích thước biểu tượng, nhưng có vẻ như sẽ mất một chút thời gian trước khi có bất kỳ điều gì được đồng ý.

Thao tác (Câu trả lời cùng dòng)

Bạn có thể thêm một câu trả lời cùng dòng vào thông báo bằng cách xác định một hành động có loại '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);

Sau đây là giao diện của ứng dụng trên Android:

Thông báo trên Android có nút hành động trả lời.

Khi nhấp vào nút hành động, một trường nhập văn bản sẽ mở ra:

Thông báo trên Android với trường nhập dữ liệu văn bản đã mở.

Bạn có thể tuỳ chỉnh phần giữ chỗ cho trường nhập văn bản:

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

Thông báo trên Android có phần giữ chỗ tuỳ chỉnh cho trường nhập văn bản.

Trong Chrome trên Windows, trường nhập văn bản sẽ luôn hiển thị mà không cần phải nhấp vào nút hành động:

Thông báo trên Windows có trường nhập văn bản và nút hành động trả lời.

Bạn có thể thêm nhiều câu trả lời cùng dòng hoặc kết hợp các nút và câu trả lời cùng dòng:

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

Thông báo trên Windows có trường nhập dữ liệu văn bản và 2 nút hành động.

Hướng

Tham số dir cho phép bạn xác định hướng hiển thị văn bản, từ phải sang trái hoặc từ trái sang phải.

Trong quá trình kiểm thử, có vẻ như hướng được xác định chủ yếu bởi văn bản thay vì tham số này. Theo thông số kỹ thuật, mục đích của việc này là đề xuất cho trình duyệt cách bố trí các tuỳ chọn như thao tác, nhưng tôi không thấy sự khác biệt nào.

Tốt nhất là bạn nên xác định nếu có thể, nếu không, trình duyệt sẽ thực hiện đúng theo văn bản được cung cấp.

Bạn phải đặt tham số này thành auto, ltr hoặc rtl.

Ngôn ngữ viết từ phải sang trái được dùng trên Chrome trên Linux có dạng như sau:

Thông báo bằng ngôn ngữ viết từ phải sang trái trên Chrome trên Linux.

Trong Firefox (khi di chuột qua), bạn sẽ thấy:

Thông báo có ngôn ngữ viết từ phải sang trái trên Firefox trên Linux.

Rung

Tuỳ chọn rung cho phép bạn xác định một mẫu rung sẽ chạy khi thông báo xuất hiện, giả sử chế độ cài đặt hiện tại của người dùng cho phép rung (tức là thiết bị không ở chế độ im lặng).

Định dạng của tuỳ chọn rung phải là một mảng số mô tả số mili giây mà thiết bị sẽ rung, theo sau là số mili giây mà thiết bị không rung.

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

Điều này chỉ ảnh hưởng đến các thiết bị hỗ trợ chế độ rung.

Âm thanh

Thông số âm thanh cho phép bạn xác định âm thanh để phát khi nhận được thông báo.

Tại thời điểm viết bài, không có trình duyệt nào hỗ trợ tuỳ chọn này.

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

Dấu thời gian

Dấu thời gian cho phép bạn cho nền tảng biết thời điểm xảy ra sự kiện dẫn đến việc gửi thông báo đẩy.

timestamp phải là số mili giây kể từ 00:00:00 giờ UTC, tức là ngày 1 tháng 1 năm 1970 (là thời gian bắt đầu của hệ thống 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);

Các phương pháp hay nhất về trải nghiệm người dùng

Lỗi trải nghiệm người dùng lớn nhất mà tôi từng thấy đối với thông báo là thông tin mà thông báo hiển thị thiếu tính cụ thể.

Trước tiên, bạn nên cân nhắc lý do gửi thông báo đẩy và đảm bảo rằng tất cả các tuỳ chọn thông báo đều được sử dụng để giúp người dùng hiểu lý do họ đang đọc thông báo đó.

Thật lòng mà nói, rất dễ để bắt gặp các ví dụ và nghĩ rằng "Tôi sẽ không bao giờ mắc sai lầm như vậy". Tuy nhiên, bạn dễ rơi vào cái bẫy đó hơn bạn nghĩ.

Một số sai lầm phổ biến cần tránh:

  • Đừng đặt trang web của bạn trong phần tiêu đề hoặc phần nội dung. Trình duyệt sẽ đưa miền của bạn vào thông báo, vì vậy, đừng sao chép miền đó.
  • Sử dụng tất cả thông tin bạn có. Nếu bạn gửi thông báo đẩy vì có người gửi thông báo cho người dùng, thay vì sử dụng tiêu đề "Thông báo mới" và nội dung "Nhấp vào đây để đọc thông báo", hãy sử dụng tiêu đề "John vừa gửi thông báo mới" và đặt nội dung của thông báo thành một phần của thông báo.

Phát hiện trình duyệt và tính năng

Tại thời điểm viết bài, có sự chênh lệch khá lớn giữa Chrome và Firefox về tính năng hỗ trợ thông báo.

May mắn thay, bạn có thể phát hiện tính năng hỗ trợ thông báo bằng cách xem nguyên mẫu window.Notification.

Giả sử chúng ta muốn biết liệu một thông báo có hỗ trợ nút hành động hay không, chúng ta sẽ làm như sau:

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

Nhờ đó, chúng ta có thể thay đổi thông báo hiển thị cho người dùng.

Với các tuỳ chọn khác, bạn chỉ cần làm tương tự như trên, thay thế 'actions' bằng tên tham số mong muốn.

Bước tiếp theo

Lớp học lập trình