Tới đây, chúng ta đã xem xét các tuỳ chọn thay đổi giao diện của một thông báo. Có cũng có các tuỳ chọn làm thay đổi hoạt động của thông báo.
Theo mặc định, việc gọi showNotification()
chỉ bằng các tuỳ chọn hình ảnh sẽ có những nội dung sau
hành vi:
- Việc nhấp vào thông báo sẽ không có tác dụng gì.
- Mỗi thông báo mới sẽ hiển thị lần lượt. Trình duyệt sẽ không thu gọn thông báo theo bất kỳ cách nào.
- Nền tảng có thể phát ra âm thanh hoặc rung thiết bị của người dùng (tuỳ thuộc vào nền tảng).
- Trên một số nền tảng, thông báo sẽ biến mất sau một khoảng thời gian ngắn, trong khi những nền tảng khác thì hiện thông báo trừ phi người dùng tương tác với thông báo đó. (Ví dụ: so sánh các thông báo của bạn trên Android và máy tính.)
Trong phần này, chúng ta sẽ xem xét cách thay đổi những hành vi mặc định này bằng các tuỳ chọn một mình. Việc triển khai và tận dụng các tính năng này tương đối dễ dàng.
Sự kiện nhấp vào thông báo
Khi người dùng nhấp vào một thông báo, hành vi mặc định sẽ không có gì xảy ra. Không thậm chí là đóng hoặc xoá thông báo.
Phương pháp phổ biến đối với một lượt nhấp vào thông báo là đóng và thực hiện một số logic khác (ví dụ: mở một cửa sổ hoặc thực hiện lệnh gọi API đến ứng dụng).
Để làm được việc này, bạn cần thêm một trình nghe sự kiện 'notificationclick'
vào trình chạy dịch vụ của chúng ta. Chiến dịch này
sẽ được gọi mỗi khi có người nhấp vào thông báo.
self.addEventListener('notificationclick', (event) => {
const clickedNotification = event.notification;
clickedNotification.close();
// Do something as the result of the notification click
const promiseChain = doSomething();
event.waitUntil(promiseChain);
});
Như bạn có thể thấy trong ví dụ này, thông báo mà người dùng nhấp vào có thể truy cập như sau:
event.notification
. Từ đó, bạn có thể truy cập vào các thuộc tính và phương thức của thông báo. Trong phần này
trong trường hợp, bạn sẽ gọi phương thức close()
và thực hiện thêm tác vụ.
Thao tác
Thao tác cho phép bạn tạo một cấp độ tương tác khác với người dùng chỉ bằng việc nhấp vào .
Nút
Trong phần trước, bạn đã xem cách xác định các nút hành động khi gọi showNotification()
:
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
title: 'Coffee',
type: 'button',
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);
Nếu người dùng nhấp vào một nút hành động, hãy kiểm tra giá trị event.action
trong noticationclick
để cho biết nút hành động nào đã được nhấp vào.
event.action
sẽ chứa giá trị action
được đặt trong các tuỳ chọn. Trong ví dụ ở trên,
Giá trị event.action
sẽ là một trong các giá trị sau: 'coffee-action'
, 'doughnut-action'
,
'gramophone-action'
hoặc 'atom-action'
.
Bằng cách này, chúng tôi sẽ phát hiện lượt nhấp vào thông báo hoặc lượt nhấp để thực hiện hành động như sau:
self.addEventListener('notificationclick', (event) => {
if (!event.action) {
// Was a normal notification click
console.log('Notification Click.');
return;
}
switch (event.action) {
case 'coffee-action':
console.log("User ❤️️'s coffee.");
break;
case 'doughnut-action':
console.log("User ❤️️'s doughnuts.");
break;
case 'gramophone-action':
console.log("User ❤️️'s music.");
break;
case 'atom-action':
console.log("User ❤️️'s science.");
break;
default:
console.log(`Unknown action clicked: '${event.action}'`);
break;
}
});
Câu trả lời cùng dòng
Ngoài ra, trong phần trước, bạn đã biết cách thêm câu trả lời cùng dòng vào thông báo:
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);
event.reply
sẽ chứa giá trị do người dùng nhập vào trường nhập dữ liệu:
self.addEventListener('notificationclick', (event) => {
const reply = event.reply;
// Do something with the user's reply
const promiseChain = doSomething(reply);
event.waitUntil(promiseChain);
});
Thẻ
Tuỳ chọn tag
về cơ bản là một mã nhận dạng chuỗi để "nhóm" thông báo cùng nhau, giúp bạn dễ dàng
để xác định cách hiển thị nhiều thông báo cho người dùng. Đây là nội dung dễ giải thích nhất
với ví dụ.
Hãy hiện thông báo và gắn thẻ 'message-group-1'
cho thông báo đó. Chúng tôi sẽ hiển thị
thông báo có mã này:
const title = 'Notification 1 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
Việc này sẽ hiển thị thông báo đầu tiên của chúng tôi.
Hãy hiện thông báo thứ hai với thẻ mới của 'message-group-2'
, như sau:
const title = 'Notification 2 of 3';
const options = {
body: "With 'tag' of 'message-group-2'",
tag: 'message-group-2',
};
registration.showNotification(title, options);
Thao tác này sẽ hiển thị thông báo thứ hai cho người dùng.
Bây giờ, hãy hiển thị thông báo thứ ba nhưng sử dụng lại thẻ đầu tiên của 'message-group-1'
. Đang thực hiện việc này
sẽ đóng thông báo đầu tiên và thay thế bằng thông báo mới của chúng tôi.
const title = 'Notification 3 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
Hiện tại, chúng ta có 2 thông báo mặc dù showNotification()
được gọi 3 lần.
Tuỳ chọn tag
chỉ là một cách để nhóm các thông báo để mọi thông báo cũ
đang hiển thị sẽ bị đóng nếu chúng có cùng thẻ với thông báo mới.
Một điểm tinh tế khi sử dụng tag
là khi thay thế một thông báo, mã này sẽ không có âm thanh
hoặc rung.
Đây là lúc tuỳ chọn renotify
phát huy tác dụng.
Thông báo lại
Điều này chủ yếu áp dụng cho thiết bị di động tại thời điểm viết bài. Việc đặt tùy chọn này sẽ tạo thông báo sẽ rung và phát âm thanh hệ thống.
Có những trường hợp mà bạn có thể muốn có thông báo thay thế để thông báo cho người dùng thay vì
tự động cập nhật. Ứng dụng Chat là một ví dụ điển hình. Trong trường hợp này, bạn nên đặt tag
và
renotify
đến true
.
const title = 'Notification 2 of 2';
const options = {
tag: 'renotify',
renotify: true,
};
registration.showNotification(title, options);
Im lặng
Tùy chọn này cho phép bạn hiển thị thông báo mới nhưng ngăn chặn hành vi rung mặc định, phát âm thanh và bật màn hình của thiết bị.
Điều này rất phù hợp nếu thông báo của bạn không cần người dùng chú ý ngay.
const title = 'Silent Notification';
const options = {
silent: true,
};
registration.showNotification(title, options);
Cần tương tác
Chrome trên máy tính sẽ hiển thị thông báo trong một khoảng thời gian nhất định trước khi ẩn thông báo. Bật Chrome Android không có hành vi này. Thông báo sẽ xuất hiện cho đến khi người dùng tương tác với thông báo.
Để buộc một thông báo luôn hiển thị cho đến khi người dùng tương tác với thông báo đó, hãy thêm requireInteraction
. Lúc này, thông báo sẽ xuất hiện cho đến khi người dùng đóng hoặc nhấp vào thông báo.
const title = 'Require Interaction Notification';
const options = {
requireInteraction: true,
};
registration.showNotification(title, options);
Hãy cân nhắc khi sử dụng phương án này. Hiển thị thông báo và buộc người dùng dừng nội dung họ đang làm để loại bỏ thông báo của bạn có thể gây khó chịu.
Trong phần tiếp theo, chúng ta sẽ xem xét một số mẫu phổ biến được sử dụng trên web cho quản lý thông báo và thực hiện những hành động như mở trang khi có người nhấp vào thông báo.
Đ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 chế độ đẩy
- Đăng ký 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 đẩy web
- Xử lý sự kiện đẩy
- Hiển thị thông báo
- Cách hoạt động của 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