Thông báo đẩy cho phép bạn mang lại trải nghiệm tuyệt vời giống như ứng dụng cho người dùng, cảnh báo cho họ về các nội dung cập nhật quan trọng và kịp thời, chẳng hạn như tin nhắn trò chuyện đến. Nền tảng thông báo này còn tương đối mới trong các trình duyệt và khi ngày càng nhiều trường hợp sử dụng và yêu cầu được bổ sung, chúng tôi nhận thấy có nhiều điểm bổ sung cho các API dành cho thông báo. Chrome 50 (bản thử nghiệm vào tháng 3 năm 2016) cũng không phải là ngoại lệ, với không dưới 4 tính năng mới giúp nhà phát triển có nhiều quyền kiểm soát hơn đố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 để giúp tạo ra trải nghiệm nhất quán,
- theo dõi sự kiện đóng thông báo để giúp đồng bộ hoá thông báo và cung cấp số liệu phân tích,
- quản lý trải nghiệm thông báo lại khi thông báo thay thế thông báo đang hiển thị.
Chrome 50 cũng đã thêm Tải trọng cho thông báo đẩy. Để luôn cập nhật API Thông báo khi API này được triển khai trong Chrome, hãy tuân theo spec và công cụ theo dõi lỗi.
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ề các nút hành động thông báo trong Chrome 49, tôi đã đề cập rằng bạn không thể đính kèm hình ảnh vào các nút thông báo để làm cho các nút đó trở nên đẹp mắt và hấp dẫn, nhưng bạn có thể sử dụng các ký tự Unicode cho biểu tượng cảm xúc cùng dòng, v.v. Giờ đây, bạn không phải lo lắng: với lần bổ sung gần đây này, giờ đây bạn có thể chỉ định 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 thao tác 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ó nội dung 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ị biểu tượng thao tác, vì vậy, hãy đảm bảo rằng bạn đang sử dụng các biểu tượng để cung cấp ngữ cảnh cho thao tác 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, bạn nên giữ các biểu tượng càng nhỏ càng tốt và lưu trước vào bộ nhớ đệm trong sự kiện cài đặt của bạn. (Tại thời điểm viết bài này, hoạt động 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 khi nào người dùng đóng một thông báo. Chúng tôi không có cách nào để làm điều đó cho đến khi nhóm thay đổi gần đây về thông số kỹ thuật của thông báo đã thêm 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 mình. Họ để chúng mở trong một thời gian dài và sau đó chủ động loại bỏ chúng hay là chúng 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 đó trên thiết bị di động cũng sẽ bị loại bỏ. Chúng tôi chưa có tính năng tự động thực hiện việc này (lưu ý rằng mỗi thông báo đẩy đều phải có một thông báo hiển thị), nhưng bằng cách sử dụng notificationclose, bạn có thể xử lý vấn đề 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á thông báo đó với các thiết bị khác khi người dùng sử dụng các thông báo đó.
Để sử dụng sự kiện notificationclose, hãy đăng ký sự kiện đó bên trong trình chạy 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ả các thông báo trong khay của họ (trên Android).
Nếu cờ Request tương tác là false hoặc không được đặt, thì nếu thông báo không bị người dùng loại bỏ theo cách thủ công mà thay vào đó do hệ thống tự động loại bỏ, sự kiện notificationclose sẽ không được kích hoạt.
Dưới đây là 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 mà từ đó bạn có thể thực hiện logic tuỳ chỉnh.
self.addEventListener('notificationclose', e => console.log(e.notification));
Bạn có thể kiểm thử mã 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.
Không gây khó chịu cho 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 về sức mạnh của Peter Parker khi bác nói "Sức mạnh lớn đi kèm trách nhiệm". Hệ thống thông báo là phương tiện mạnh mẽ để tương tác với người dùng. Nếu bạn lạm dụng niềm tin của họ, họ sẽ tắt tất cả thông báo và bạn có thể mất hoàn toàn các thông báo đó.
Khi tạo thông báo, bạn có thể đặt 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 phiên bản Chrome 50, mỗi lần bạn tạo thông báo hoặc thay thế một thông báo hiện có, thông báo đó sẽ chạy mẫu rung hoặc phát cảnh báo bằng âm thanh. Điều này có thể khiến người dùng khó chịu. Giờ đây, trong Chrome 50, bạn hiện có thể 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 sẽ không hoạt động và với tư cách 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ể dùng thử tính năng này trong Trình tạo thông báo.
Quản lý dấu thời gian mà người dùng nhìn thấy
Theo mặc định, trên Android, thông báo của Chrome 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 thông báo thực sự được hệ thống của bạn tạo. Ví dụ: sự kiện có thể được kích hoạt khi thiết bị không kết nối mạng hoặc có thể hiển thị thông báo cho cuộc họp sắp tới. Kể từ Chrome 50, Chrome đã thêm một thuộc tính "timestamp" mới cho phép nhà phát triển cung cấp thời gian cần 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 dành cho Android. Mặc dù không hiển thị trên máy tính, nhưng nó sẽ ảnh hưởng đến thứ tự thông báo trên cả thiết bị di động và máy tính.