Đầu năm 2015, chúng tôi đã ra mắt tính năng Thông báo đẩy và Thông báo trong Chrome dành cho Android và Máy tính. Đó là một bước tiến tuyệt vời trên web. Người dùng có thể bắt đầu tương tác sâu hơn với các trải nghiệm trên web ngay cả khi trình duyệt bị đóng.
Mặc dù thật tuyệt khi bạn có thể gửi những thông báo này, nhưng điều duy nhất bạn có thể làm với một trang là nhấp vào đó và mở một trang hoặc đóng hoàn toàn trang đó.
Nếu bạn xem thông báo được cung cấp sẵn cho ứng dụng trên nền tảng di động (chẳng hạn như iOS và Android), thì mỗi thông báo đều cho phép nhà phát triển xác định các thao tác theo ngữ cảnh mà người dùng có thể gọi và tương tác. Trong Chrome 48, chúng tôi hiện đã thêm một tính năng tương tự cho Thông báo trên web trên Máy tính và Chrome dành cho Android.
Việc bổ sung API khá đơn giản. Bạn chỉ cần tạo một Mảng hành động và thêm các hành động đó vào đối tượng NotificationOptions khi gọi showNotification từ quá trình đăng ký ServiceWorker (trực tiếp trong ServiceWorker hoặc trên một trang thông qua navigator.serviceWorker.ready).
Hiện tại, Chrome chỉ hỗ trợ 2 thao tác trên mỗi thông báo.
Một số nền tảng có thể hỗ trợ thêm và một số nền tảng có thể hỗ trợ ít hơn hoặc hoàn toàn không hỗ trợ. Bạn có thể xác định những nội dung mà nền tảng hỗ trợ bằng cách kiểm tra Notification.maxActions. Trong các ví dụ sau, chúng tôi giả định rằng nền tảng hỗ trợ 2 hành động.
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like'},
{action: 'reply', title: 'Reply'}]
});
Thao tác này sẽ tạo một thông báo đơn giản với hai nút. Xin lưu ý rằng bạn chưa thể trực tiếp thêm biểu tượng vào thao tác (chưa), nhưng bạn có thể sử dụng Biểu tượng cảm xúc và bộ ký tự Unicode mở rộng để thêm ngữ cảnh vào các nút thông báo.
Ví dụ:
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
Giờ đây, khi bạn đã tạo xong một thông báo 😻, người dùng có thể tương tác với thông báo đó vào một thời điểm nào đó trong tương lai. Tất cả các hoạt động tương tác hiện tại với thông báo (kể từ Chrome 48) đều đi qua sự kiện notificationclick đã đăng ký trong trình chạy dịch vụ. Các tương tác đó có thể là một lượt nhấp chung vào thông báo hoặc một thao tác nhấn cụ thể vào một trong các nút hành động. Xin lưu ý rằng trong tương lai, bạn cũng sẽ có thể phản hồi vớisự kiện đóng thông báo.
Để biết hành động mà người dùng đã thực hiện, bạn cần kiểm tra thuộc tính action trên sự kiện, sau đó bạn có thể chọn mở một trang mới để người dùng hoàn tất hành động hoặc thực hiện tác vụ đó trong nền.
self.addEventListener('notificationclick', function(event) {
var messageId = event.notification.data;
event.notification.close();
if (event.action === 'like') {
silentlyLikeItem();
}
else if (event.action === 'reply') {
clients.openWindow("/messages?reply=" + messageId);
}
else {
clients.openWindow("/messages?reply=" + messageId);
}
}, false);
Điều thú vị là các thao tác không phải mở cửa sổ mới mà có thể thực hiện các tương tác chung trong ứng dụng mà không cần tạo giao diện người dùng. Ví dụ: người dùng có thể "Thích" hoặc "Xoá" một bài đăng trên mạng xã hội. Bài đăng này sẽ thực hiện hành động đối với dữ liệu cục bộ của người dùng, sau đó đồng bộ hoá bài đăng đó với đám mây mà không cần mở giao diện người dùng (mặc dù bạn nên thông báo thay đổi dữ liệu cho bất kỳ cửa sổ đang mở nào để giao diện người dùng có thể được cập nhật). Đối với một thao tác yêu cầu tương tác của người dùng, bạn sẽ mở một cửa sổ để người dùng trả lời.
Vì các nền tảng sẽ không hỗ trợ cùng một số lượng hành động hoặc trong một số trường hợp không thể hỗ trợ các nút Hành động thông báo, bạn sẽ cần đảm bảo rằng bạn luôn cung cấp phương án dự phòng hợp lý cho một tác vụ mà bạn mong đợi người dùng sẽ thực hiện nếu họ chỉ nhấp vào thông báo.
Nếu bạn muốn xem ví dụ thực tế ngay hôm nay, hãy xem Bài kiểm tra thông báo của Peter Beverloo và đọc phần Quy cách của thông báo hoặc làm theo thông số kỹ thuật khi cập nhật.