Các lựa chọn thông báo được chia thành hai phần, một phần liên quan đến 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 lựa 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.
Tùy chọn hình ảnh
API để hiện thông báo rất đơn giản:
<ServiceWorkerRegistration>.showNotification(<title>, <options>);
Cả hai đối số title và options đề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ỳ tuỳ chọn 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 cùng xem các lựa chọn về hình ảnh:
Các lựa chọn về tiêu đề và nội dung
Dưới đây là hình ảnh của một thông báo không có tiêu đề và các lựa 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 dùng thay cho tên trình duyệt:
Nếu chúng ta 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:
Trong Firefox trên Linux, giao diện sẽ có dạng như sau:
Dưới đây là hình ảnh thông báo có nhiều văn bản trong tiêu đề và nội dung trong Chrome trên Linux:
Firefox trên Linux thu gọn nội dung văn bản cho đến khi bạn di chuột qua thông báo, khiến thông báo mở rộng:
Cùng một thông báo trong Firefox trên Windows sẽ có dạng như sau:
Như bạn có thể thấy, cùng một thông báo có thể trông khác nhau trên các trình duyệt khác nhau. 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 những nền tảng có các tính năng này.
Ví dụ: thông báo hệ thống trên macOS không hỗ trợ hình ảnh và hành động (nút và trả lờ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
Lựa 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 văn bản.
Trong mã, bạn cần cung cấp URL cho hình ảnh mà bạn muốn tải:
const title = 'Icon Notification';
const options = {
icon: '/images/demos/icon-512x512.png',
};
registration.showNotification(title, options);
Bạn nhận được thông báo này trong Chrome trên Linux:
và trong Firefox trên Linux:
Rất tiếc là không có nguyên tắc cụ thể nào về kích thước hình ảnh cần sử dụng cho biểu tượng.
Android có vẻ muốn có hình ảnh 64 dp (tức là 64 px nhân với 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à 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 chút 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.
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.
Giống như tuỳ chọn icon, không có nguyên tắc thực tế nào về kích thước cần sử dụng.
Khi tìm hiểu kỹ 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ị.
Nghĩa là hình ảnh có kích thước từ 72px trở lên là phù hợp (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:
Trong Chrome trên Android, việc cắt và tỷ lệ sẽ khác:
Do sự khác biệt về tỷ lệ giữa máy tính và thiết bị di động, nên rất khó để đưa ra hướng dẫn.
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, lựa 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.
Theo nguyên tắc này, bạn nên sử dụng hình ảnh có chiều rộng từ 1350px trở lên.
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 (thông tin chi tiết về vấn đề này có 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ỉ có Chrome và Opera dành cho Android hỗ trợ các thao tác.
Trong ví dụ trên, có 4 thao tác được xác định để minh hoạ rằng bạn có thể xác định nhiều thao tác hơn số lượng thao tác sẽ hiển thị. Nếu muốn biết số lượng hành động mà trình duyệt sẽ hiển thị, bạn có thể kiểm tra 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 hình bánh rán màu hồng):
Trên Android 6 trở xuống, các biểu tượng được tô màu cho phù hợp với bảng phối màu của hệ thống:
Trên Android 7 trở lên, các biểu tượng hành động hoàn toàn không xuất hiện.
Hy vọng Chrome sẽ thay đổi hành vi trên máy tính cho phù hợp với Android (tức là áp dụng bảng phối màu phù hợp để 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ể điều chỉnh màu văn bản của Chrome cho phù hợp bằng cách đặt màu cho các biểu tượng là #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 phù hợp 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 không may, điều này có vẻ không phù hợp trên Android.
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:
- Sử dụng 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 của bạn đều được hiển thị nhất quán cho người dùng.
- Hãy đảm bảo rằng các biểu tượng này hoạt động ở chế độ đơn sắc vì một số nền tảng có thể hiển thị biểu tượng 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. Kích thước 128px × 128px hoạt động tốt trên Android nhưng chất lượng kém trên máy tính.
- Biểu tượng hành động của bạn sẽ không xuất hiện.
Thông số kỹ thuật của Thông báo đang tìm 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 thời gian trước khi có sự thống nhất.
Thao tác (câu trả lời cùng dòng)
Bạn có thể thêm 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);
Đây là giao diện trên Android:
Khi bạn nhấp vào nút hành động, một trường nhập dữ liệu sẽ mở ra:
Bạn có thể tuỳ chỉnh phần giữ chỗ cho trường nhập dữ liệu 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);
Trong Chrome trên Windows, trường nhập dữ liệu văn bản luôn hiển thị mà không cần nhấp vào nút hành động:
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);
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 thử nghiệm, có vẻ như hướng chủ yếu được xác định bằng văn bản chứ không phải tham số này. Theo thông số kỹ thuật, thuộc tính này nhằm đề xuất cho trình duyệt cách bố cục các lựa chọn như hành động, nhưng tôi không thấy có gì khác biệt.
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 nên đặt tham số này thành auto, ltr hoặc rtl.
Một ngôn ngữ viết từ phải sang trái được dùng trên Chrome trên Linux sẽ có dạng như sau:
Trong Firefox (khi di chuột qua), bạn sẽ thấy:
Rung
Tuỳ chọn rung cho phép bạn xác định kiể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
Tham số âm thanh cho phép bạn xác định âm thanh sẽ phát khi nhận được thông báo.
Tại thời điểm viết bài, chưa có trình duyệt nào hỗ trợ lựa 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 UTC, tức là ngày 1 tháng 1 năm 1970 (thời gian 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 UX lớn nhất mà tôi từng thấy đối với thông báo là thiếu thông tin cụ thể trong thông báo.
Bạn nên cân nhắc lý do gửi thông báo đẩy ngay từ đầu và đảm bảo rằng tất cả các lựa chọn thông báo đều được sử dụng để giúp người dùng hiểu lý do họ đọc thông báo đó.
Thành thật mà nói, khi xem các ví dụ, bạn rất dễ nghĩ rằng "Tôi sẽ không bao giờ mắc phải sai lầm đó". Nhưng bạn dễ rơi vào bẫy đó hơn bạn nghĩ.
Một số lỗi phổ biến cần tránh:
- Đừng đưa trang web của bạn vào tiêu đề hoặc nội dung. Trình duyệt sẽ thêm miền của bạn vào thông báo, vì vậy, đừng lặp lại 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 tin nhắn cho người dùng, thay vì sử dụng tiêu đề "Tin nhắn mới" và nội dung "Nhấp vào đây để đọc", hãy sử dụng tiêu đề "John vừa gửi tin nhắn mới" và đặt nội dung thông báo thành một phần của tin nhắn.
Trình duyệt và tính năng phát hiện
Tại thời điểm viết bài, có sự khác biệt khá lớn giữa Chrome và Firefox về khả năng hỗ trợ tính năng cho thông báo.
May mắn là bạn có thể phát hiện khả năng hỗ trợ cho các tính năng 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ợ các 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.
Điểm đến tiếp theo
- Tổng quan về thông báo đẩy trên web
- Cách hoạt động của thông báo đẩy
- Đăng ký cho người dùng
- Trải nghiệm người dùng về quyền
- Gửi thông báo bằng thư viện thông báo đẩy trên web
- Giao thức thông báo đẩy trên web
- Xử lý sự kiện đẩy
- Hiển thị thông báo
- Hành vi thông báo
- Các mẫu thông báo phổ biến
- Câu hỏi thường gặp về thông báo đẩy
- Các vấn đề thường gặp và cách báo cáo lỗi