Thông báo đẩy cho phép bạn mang đến trải nghiệm chất lượng cao như ứng dụng cho người dùng, thông báo cho họ về các nội dung cập nhật quan trọng và kịp thời như tin nhắn trò chuyện đến. Nền tảng thông báo tương đối mới trong trình duyệt và khi ngày càng có nhiều trường hợp sử dụng và yêu cầu được triển khai, chúng ta sẽ thấy nhiều nội dung bổ sung cho API thông báo. Chrome 50 (phiên bản thử nghiệm vào tháng 3 năm 2016) cũng không ngoại lệ, với ít nhất 4 tính năng mới giúp nhà phát triển có thêm quyền kiểm soát đối với thông báo. Bạn có thể:
- thêm biểu tượng vào nút thông báo,
- sửa đổi dấu thời gian để tạo trải nghiệm nhất quán,
- theo dõi các sự kiện đóng thông báo để giúp đồng bộ hoá thông báo và cung cấp phân tích,
- quản lý trải nghiệm thông báo lại khi một thông báo thay thế thông báo hiện đang hiển thị.
Chrome 50 cũng đã thêm Gói dữ liệu cho thông báo đẩy. Để nắm bắt thông tin mới nhất về Notifications API khi API này được triển khai trong Chrome, hãy làm theo quy cách và công cụ theo dõi lỗi quy cách.
Tạo các nút hành động hấp dẫn bằng biểu tượng tuỳ chỉnh
Trong một bài đăng gần đây về nút hành động trong thông báo trên Chrome 49, tôi có đề cập rằng bạn không thể đính kèm hình ảnh vào nút thông báo để làm cho nút đó trở nên bắt mắt và hấp dẫn, nhưng bạn có thể sử dụng các ký tự Unicode để chèn biểu tượng cảm xúc, v.v. Giờ đây, bạn không phải lo lắng: với tính năng bổ sung gần đây này, bạn hiện có thể chỉ định một hình ảnh trên nút hành động:
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
Giao diện của biểu tượng hành động sẽ khác nhau tuỳ theo nền tảng. Ví dụ: trên Android, biểu tượng sẽ có bộ lọc màu xám đậm được áp dụng trong Lollipop trở lên và bộ lọc màu trắng trước Lollipop, trong khi trên máy tính, biểu tượng sẽ có màu đầy đủ. (Lưu ý: có cuộc thảo luận về tương lai của tính năng này trên máy tính.) Một số nền tảng thậm chí có thể không hiển thị được biểu tượng hành động, vì vậy, hãy đảm bảo rằng bạn đang sử dụng biểu tượng để cung cấp ngữ cảnh cho hành động chứ không phải là chỉ báo duy nhất của ý định.
Cuối cùng, vì các tài nguyên phải được tải xuống, nên bạn nên giữ cho các biểu tượng nhỏ nhất có thể và lưu vào bộ nhớ đệm trước trong sự kiện cài đặt. (Tại thời điểm viết bài này, các lệnh tìm nạp tài nguyên thông báo trong Chrome chưa được định tuyến thông qua trình chạy dịch vụ.)
Sự kiện đóng thông báo
Một tính năng thường được yêu cầu của thông báo là khả năng biết thời điểm người dùng đóng thông báo. Chúng tôi không thể làm việc đó cho đến khi một loạt thay đổi gần đây đối với thông số kỹ thuật của thông báo thêm một sự kiện notificationclose.
Bằng cách sử dụng sự kiện notificationclick và notificationclose, bạn có thể hiểu cách người dùng tương tác với thông báo của bạn. Họ có để mở thông báo trong một thời gian dài rồi chủ động đóng hay họ hành động ngay lập tức.
Một trường hợp sử dụng phổ biến là có thể đồng bộ hoá thông báo giữa các thiết bị. Nếu người dùng đóng một thông báo trên thiết bị máy tính, thì thông báo tương tự trên thiết bị di động cũng sẽ bị đóng. Chúng ta chưa có khả năng làm việc này một cách thầm lặng (hãy nhớ rằng mọi thông báo đẩy đều phải hiển thị thông báo), nhưng bằng cách sử dụng notificationclose, bạn có thể xử lý việc này bằng cách cho phép bạn theo dõi trạng thái thông báo cho người dùng trên máy chủ và đồng bộ hoá trạng thái đó với các thiết bị khác khi người dùng sử dụng các thiết bị đó.
Để sử dụng sự kiện notificationclose, hãy đăng ký sự kiện đó bên trong worker dịch vụ và sự kiện này sẽ chỉ kích hoạt khi người dùng chủ động đóng một thông báo, ví dụ: nếu người dùng đóng một thông báo cụ thể hoặc đóng tất cả thông báo trong khay thông báo (trên Android).
Nếu cờ requireInteraction là sai hoặc không được đặt, thì nếu người dùng không đóng thông báo theo cách thủ công mà là hệ thống tự động đóng, thì sự kiện notificationclose sẽ không được kích hoạt.
Dưới đây là một cách triển khai đơn giản. Khi người dùng đóng thông báo, bạn sẽ có quyền truy cập vào đối tượng thông báo để thực hiện logic tuỳ chỉnh.
self.addEventListener('notificationclose', e => console.log(e.notification));
Bạn có thể kiểm thử điều này trong Trình tạo thông báo; bạn sẽ nhận được cảnh báo khi đóng thông báo.
Đừng làm phiền người dùng khi bạn thay thế một thông báo hiện có
Tôi khá chắc chắn rằng Chú Ben đang nói về hệ thống thông báo chứ không phải sức mạnh của Peter Parker khi chú nói rằng "Sức mạnh càng lớn thì trách nhiệm càng cao". Hệ thống thông báo là một phương tiện hiệu quả để tương tác với người dùng. Nếu bạn lạm dụng lòng tin của họ, họ sẽ tắt tất cả thông báo và bạn có thể mất toàn bộ người dùng đó.
Khi tạo thông báo, bạn có thể thiết lập thông báo đó để tạo cảnh báo bằng âm thanh hoặc rung để thu hút sự chú ý của người dùng. Ngoài ra, bạn có thể thay thế một thông báo hiện có bằng cách sử dụng lại thuộc tính "thẻ" của thông báo đó trên một đối tượng thông báo mới.
Trước Chrome 50, mỗi khi bạn tạo hoặc thay thế một thông báo hiện có, thông báo đó sẽ chạy một mẫu rung hoặc phát một cảnh báo âm thanh và điều này có thể gây khó chịu cho người dùng. Giờ đây, trong Chrome 50, bạn có quyền kiểm soát những gì xảy ra trong quá trình thông báo lại thông qua một cờ boolean đơn giản có tên là "renotify". Hành vi mặc định mới khi sử dụng cùng một "thẻ" cho các thông báo tiếp theo là không âm thanh. Là nhà phát triển, bạn phải chọn "thông báo lại" cho người dùng bằng cách đặt cờ thành "true".
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Bạn có thể thử tính năng này trong Trình tạo thông báo.
Quản lý dấu thời gian hiển thị cho người dùng
Theo mặc định, trên Android, thông báo của Chrome sẽ hiển thị thời gian tạo ở góc trên cùng bên phải. Rất tiếc, đây có thể không phải là thời điểm hệ thống của bạn thực sự tạo thông báo. Ví dụ: sự kiện có thể đã được kích hoạt khi thiết bị không có kết nối mạng hoặc thông báo có thể hiển thị cho một cuộc họp sắp tới. Kể từ Chrome 50, Chrome đã thêm một thuộc tính mới là 'dấu thời gian' để cho phép nhà phát triển cung cấp thời gian sẽ hiển thị trong thông báo.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
Dấu thời gian hiện chỉ hiển thị trên Chrome cho Android. Mặc dù không hiển thị trên máy tính, nhưng chế độ này sẽ ảnh hưởng đến thứ tự thông báo trên cả thiết bị di động và máy tính.