Cho đến nay, chúng ta đã xem xét các tuỳ chọn thay đổi giao diện trực quan của thông báo. Ngoài ra, còn có các tuỳ chọn thay đổi hành vi 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ó các hành vi sau:
- Nhấp vào thông báo nhưng không có gì xảy ra.
- Mỗi thông báo mới sẽ lần lượt xuất hiện. 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 â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 các nền tảng khác sẽ hiển thị 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 thông báo trên Android và Máy tính.)
Trong phần này, chúng ta sẽ tìm hiểu cách thay đổi các hành vi mặc định này chỉ bằng cách sử dụng các tuỳ chọn. Những phương pháp này tương đối dễ triển khai và khai thác.
Sự kiện nhấp chuột 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 là không có gì xảy ra. Thao tác này thậm chí không đóng hoặc xoá thông báo.
Thông thường, khi người dùng nhấp vào thông báo, thông báo sẽ đóng và thực hiện một số logic khác (tức là mở cửa sổ hoặc thực hiện một số lệnh gọi API đến ứng dụng).
Để làm được việc này, bạn cần thêm trình nghe sự kiện 'notificationclick' vào trình chạy dịch vụ. Hàm này sẽ được gọi bất cứ khi nào người dùng nhấp vào một 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, bạn có thể truy cập vào thông báo đã được nhấp vào dưới dạng event.notification. Từ đây, 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 trường hợp này, bạn gọi phương thức close() của phương thức đó và thực hiện thêm công việc.
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 thay vì chỉ nhấp vào thông báo.
Nút
Trong phần trước, bạn đã thấy 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 sự kiện noticationclick để 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, các giá trị event.action sẽ là một trong những giá trị sau: 'coffee-action', 'doughnut-action', 'gramophone-action' hoặc 'atom-action'.
Với cách này, chúng ta sẽ phát hiện các lượt nhấp vào thông báo hoặc lượt nhấp vào 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 đã thấy cách thêm một 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" các thông báo lại với 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. Cách dễ nhất để giải thích điều này
là thông qua một ví dụ.
Hãy hiển thị một thông báo và gắn thẻ cho thông báo đó là 'message-group-1'. Chúng tôi sẽ hiển thị thông báo bằng 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);
Thao tác này sẽ hiển thị thông báo đầu tiên.
Hãy hiển thị thông báo thứ hai có thẻ mới là '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ông báo thứ ba nhưng sử dụng lại thẻ đầu tiên của 'message-group-1'. Thao tác này sẽ đóng thông báo đầu tiên và thay thế bằng thông báo mới.
const title = 'Notification 3 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
Bây giờ, chúng ta có hai thông báo mặc dù showNotification() được gọi ba lần.
Tuỳ chọn tag chỉ đơn giản là một cách nhóm các thông báo để mọi thông báo cũ hiện đ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, nó sẽ thực hiện mà không có âm thanh hoặc rung.
Đây là lúc bạn cần đến lựa chọn renotify.
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. Khi bạn đặt tuỳ chọn này, các thông báo mới sẽ rung và phát âm thanh hệ thống.
Có những trường hợp bạn muốn thông báo thay thế sẽ thông báo cho người dùng thay vì cập nhật tự động. Ứng dụng trò chuyện là một ví dụ điển hình. Trong trường hợp này, bạn nên đặt tag và renotify thành true.
const title = 'Notification 2 of 2';
const options = {
tag: 'renotify',
renotify: true,
};
registration.showNotification(title, options);
Phim câm
Lựa chọn này cho phép bạn hiện thông báo mới nhưng ngăn hành vi mặc định là rung, phát âm thanh và bật màn hình của thiết bị.
Điều này là lý tưởng nếu thông báo của bạn không yêu cầu người dùng chú ý ngay lập tức.
const title = 'Silent Notification';
const options = {
silent: true,
};
registration.showNotification(title, options);
Yêu cầu tương tác
Chrome trên máy tính sẽ hiện thông báo trong một khoảng thời gian nhất định rồi ẩn đi. Chrome trên Android không có hành vi này. Thông báo sẽ hiển thị cho đến khi người dùng tương tác với thông báo.
Để buộc 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 tuỳ chọn requireInteraction. Thao tác này sẽ hiển thị thông báo cho đến khi người dùng đóng hoặc nhấp vào thông báo của bạn.
const title = 'Require Interaction Notification';
const options = {
requireInteraction: true,
};
registration.showNotification(title, options);
Hãy cân nhắc khi sử dụng lựa chọn này. Việc hiện thông báo và buộc người dùng phải dừng việc họ đang làm để đóng thông báo 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 dùng trên web để quản lý thông báo và thực hiện các thao tác như mở trang khi người dùng 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 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
- 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à cách báo cáo lỗi