Các tuỳ chọn thông báo được chia thành 2 phần, một phần liên quan đến hình ảnh (phần này) và một phần giải thích các khía cạnh về 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.
Tuỳ chọn trực quan
API để hiển thị 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à 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 tuỳ chọn trực quan:
Tuỳ chọn về tiêu đề và nội dung
Sau đây là giao diện của một 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ị, tên ứng dụng web sẽ được sử dụng 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 tôi sẽ nhận được thông báo này trong Chrome trên Linux:
Trong Firefox trên Linux, trình duyệt sẽ có dạng như sau:
Dưới đây là giao diện của thông báo có nhiều văn bản ở tiêu đề và nội dung 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, khiến thông báo mở rộng:
Các thông báo tương tự trong Firefox trên Windows trông giố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 ở các trình duyệt khác nhau. Biểu ngữ này cũng có thể hiển thị khác 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ó 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à câu trả lời cùng dòng).
Chrome cũng có thông báo tuỳ chỉnh dành cho tất cả nền tảng máy tính. Bạn có thể bật chế độ 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 đến 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:
và trong Firefox trên Linux:
Tiếc là không có bất kỳ nguyên tắc chắc chắn nào về kích thước hình ảnh cần sử dụng cho biểu tượng.
Có vẻ như Android muốn hình ảnh 64 dp (tức 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à an toàn.
Huy hiệu
badge là một biểu tượng đơn sắc nhỏ dùng để hiển thị thêm một chút thông tin cho người dùng về vị trí 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 huy hiệu, huy hiệu chỉ được sử 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 sẽ sử dụng.
Xem kỹ nguyên tắc của Android, kích thước đề xuất là 24 px 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 sẽ phù hợp (giả sử tỷ lệ pixel tối đa của thiết bị là 3).
Bài đăng có hình ảnh
Bạn có thể dùng tuỳ chọn image để cho người dùng thấy hình ảnh lớn hơn. Đ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, cách cắt và tỷ lệ khác nhau:
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 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 với tỷ lệ này và cho phép Android cắt hình ảnh. Dù vậy,
tuỳ chọn image vẫn có thể thay đổi.
Trên Android, dòng hướng dẫn duy nhất là chiều rộng 450 dp.
Bạn nên dùng hình ảnh có chiều rộng từ 1350px trở lên.
Hành động (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 title, action (về cơ bản là giá trị nhận dạng), icon và type. Tiêu đề và biểu tượng là nội dung bạn có thể thấy trong thông báo. Mã này được dùng khi phát hiện người dùng đã nhấp vào nút hành động (tìm hiểu thêm về nội dung 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, chỉ có các tác vụ hỗ trợ Chrome và Opera dành cho Android.
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ố lượng hành động 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 hiển thị màu sắc của chúng (xem biểu tượng bánh vòng màu hồng):
Trên Android 6 trở xuống, các biểu tượng sẽ có màu phù hợp với bảng phối màu hệ thống:
Trên Android 7 trở lên, các biểu tượng thao tác sẽ không xuất hiện.
Hy vọng Chrome sẽ thay đổi hành vi trên máy tính để bàn cho phù hợp với Android (tức là áp dụng bảng phối màu thích 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ể khớp màu văn bản của Chrome bằng cách đặt màu cho các biểu tượng có màu #333333.
Bạn cũng nên lưu ý rằng các biểu tượng trông sắc nét trên Android nhưng không phải trên máy tính để bàn.
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 để bàn là 24px x 24px. Đ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 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ả các biểu tượng hiển thị nhất quán với người dùng.
- Hãy đảm bảo ảnh đó hoạt động ở chế độ đơn sắc vì một số nền tảng có thể hiển thị ảnh theo cách đó.
- Hãy thử kích thước này và xem kích thước nào phù hợp với bạn. 128px x 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ể các biểu tượng hành động của bạn sẽ không hiển thị.
Thông số kỹ thuật về Thông báo đang khám phá cách xác định nhiều kích thước của biểu tượng, nhưng có vẻ như sẽ mất một thời gian trước khi có thoả thuận thống nhất.
Hành động (Câu trả lời cùng dòng)
Bạn có thể thêm câu trả lời cùng dòng cho thông báo bằng cách xác định một thao tác thuộ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 của giao diện trên Android:
Khi 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 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 văn bản luôn hiển thị mà không cần phải nhấp vào nút hành động:
Bạn có thể thêm nhiều thư 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 văn bản sẽ hiển thị, từ phải sang trái hay từ trái sang phải.
Trong thử nghiệm, có vẻ như hướng phần lớn đượ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, phần này nhằm gợi ý cho trình duyệt cách bố cục các tuỳ 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 xem có thể hay không, nếu không, trình duyệt nên làm đú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 sử 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 mẫu rung sẽ chạy khi một thông báo được hiển thị, 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);
Chế độ 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 sẽ 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 một 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 (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);
Những 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 thấy với thông báo là thiếu cụ thể trong thông tin mà thông báo hiển thị.
Bạn nên cân nhắc lý do ngay từ đầu vì sao bạn gửi thông báo đẩy và đảm bảo mọi tuỳ chọn thông báo đều được dùng để giúp người dùng hiểu lý do họ đọc thông báo đó.
Nói thật, bạn có thể dễ dàng xem các ví dụ và nghĩ rằng "Tôi sẽ không bao giờ mắc sai lầm đó". Tuy nhiên, bạn sẽ dễ dàng rụng vào cạm 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 tiêu đề hoặc phần nội dung. Các trình duyệt sẽ đưa miền của bạn vào thông báo để đừng sao chép miền.
- Sử dụng mọi thông tin bạn có. Nếu bạn gửi thông báo đẩy vì ai đó đã 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 tin nhắn". 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 thông báo.
Phát hiện tính năng và trình duyệt
Tại thời điểm viết bài này, có sự khác biệt khá lớn giữa Chrome và Firefox về việc hỗ trợ tính năng thông báo cho thông báo.
Thật may là bạn có thể phát hiện khả năng hỗ trợ 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.
}
Bằng cách này, chúng ta có thể thay đổi thông báo mà chúng ta 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 '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 tính năng đẩy hoạt động
- Đăng ký người dùng
- Trải nghiệm người dùng của quyền
- Gửi thông báo bằng Thư viện đẩy trên web
- Giao thức đẩy 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à lỗi báo cáo