Cho đến nay, chúng ta đã xem xét các tuỳ chọn thay đổi giao diện hình ảnh 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:
- Việc nhấp vào thông báo đó sẽ không có tác dụng gì.
- Các 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 những nền tảng khác vẫn 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 của bạn trên Android và máy tính để bàn.)
Trong phần này, chúng ta sẽ xem cách chúng ta có thể thay đổi các hành vi mặc định này bằng cách sử dụng riêng các tuỳ chọn. Các giải pháp này tương đối dễ triển khai và tận dụng.
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í còn không đóng hoặc xoá thông báo.
Phương pháp phổ biến cho lượt nhấp vào thông báo là để lượt nhấp đó đó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 một lệnh gọi API nào đó đến ứng dụng).
Để thực hiện 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ụ. Lệnh này sẽ được gọi bất cứ khi nào bạn 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, bạn có thể truy cập vào thông báo mà người dùng nhấp vào dưới dạng 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 trường hợp này, bạn sẽ gọi phương thức close() và thực hiện thêm công việc.
Thao tác
Các thao tác cho phép bạn tạo thêm một mức độ 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 đã 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 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, giá trị event.action sẽ là một trong những 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 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 đã biết cách thêm câu trả lời nội tuyến cho 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);
});
Gắn 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 nhiều thông báo hiển thị cho người dùng. Cách dễ nhất để giải thích bằng 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 có mã sau:
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 của chúng ta.
Hãy hiển thị thông báo thứ hai bằng 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ị 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 sao cho mọi thông báo cũ đang hiển thị sẽ bị đóng nếu có cùng thẻ với thông báo mới.
Một điều tinh tế khi sử dụng tag là khi thay thế một thông báo, ứng dụng sẽ không phát âm thanh hoặc rung.
Đây là lúc lựa 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 các 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 nhận một 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 nhắn tin 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);
Im lặng
Tuỳ chọn này cho phép bạn hiển thị một thông báo mới nhưng ngăn hành vi mặc định là rung, âm thanh và bật màn hình của thiết bị.
Đây là chế độ lý tưởng nếu người dùng không cần người dùng chú ý ngay đến thông báo của bạn.
const title = 'Silent Notification';
const options = {
silent: true,
};
registration.showNotification(title, options);
Cần có sự tương tác
Chrome trên máy tính sẽ hiển thị các thông báo trong một khoảng thời gian đã đặt trước khi ẩn các thông báo đó. Chrome trên Android không có hành vi này. Thông báo được hiển thị 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 tiếp tục 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 dừng những gì họ đang thực hiện để đó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 sử dụng trên web để quản lý thông báo và thực hiện 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 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ô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