Thông báo đẩy cho phép bạn mang đến cho người dùng trải nghiệm chất lượng cao giống như ứng dụng, đồng thời thông 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 tương đối mới trong trình duyệt. Ngày càng có nhiều trường hợp sử dụng và yêu cầu được cải thiện, chúng tôi nhận thấy có nhiều tính năng bổ sung cho các API cho thông báo. Chrome 50 (thử nghiệm vào tháng 3 năm 2016) cũng không 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 các 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 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ộ hóa 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 một 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 nắm bắt thông tin mới nhất về API Thông báo khi API này được triển khai trong Chrome, hãy tuân thủ spec và công cụ theo dõi lỗi về quy cách.
Tạo các nút hành động hấp dẫn bằng các 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 nút thông báo để nút đó trở nên bắt mắt và hấp dẫn, nhưng bạn có thể dùng các ký tự Unicode để chèn 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 tính năng bổ sung gần đây, giờ đây, bạ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 áp dụng cho Lollipop trở lên và bộ lọc màu trắng trước Lollipop, còn 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 giải pháp này trên máy tính để bàn.) Một số nền tảng thậm chí không thể hiển thị 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àm chỉ báo duy nhất cho ý định.
Cuối cùng, do các tài nguyên phải được tải xuống, bạn nên giữ các biểu tượng nhỏ nhất có thể và lưu trước chúng vào bộ nhớ đệm khi cài đặt. (Tại thời điểm chúng tôi viết bài viết này, 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à biết được thời điểm người dùng đóng một thông báo. Chúng tôi không có cách nào để thực hiện việc đó cho đến khi một loạt các thay đổi gần đây đối với quy cách thông báo đã thêm một sự kiện thông báo gần.
Bằng cách sử dụng thông báo nhấp vào thông báo và sự kiện đóng thông báo, bạn có thể hiểu cách người dùng tương tác với thông báo. Họ để ứng dụng mở trong một thời gian dài và sau đó chủ động loại bỏ hay họ sẽ thực hiện 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ủa họ cũng sẽ bị đóng. Chúng tôi chưa có khả 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 được hiển thị), nhưng việc sử dụng tính năng thông báo đóng sẽ mở ra khả năng 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 của người dùng trên máy chủ của bạn 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 chúng.
Để sử dụng sự kiện đóng thông báo, hãy đăng ký sự kiện này 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ờ yêu cầu tương tác 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à thay vào đó hệ thống sẽ tự động đóng thông báo, thì sự kiện đóng thông báo 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ử việc này trong Trình tạo thông báo; bạn sẽ nhận được thông 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ú 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 chú nói "Sức mạnh to lớn đi kèm trách nhiệm lớn". 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ợi dụng sự tin tưởng 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 thông báo.
Khi tạo thông báo, bạn có thể thiết lập để tạo cảnh báo âm thanh hoặc rung nhằm 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 "tag" (thẻ) trên đối tượng thông báo mới.
Trước Chrome 50, mỗi khi bạn tạo một 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ột mẫu rung hoặc phá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, giờ đây bạ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 là im lặng và nhà phát triể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ử làm như vậ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
Trên Android, theo mặc định, 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à lúc hệ thống của bạn thực sự tạo thông báo. Ví dụ: sự kiện này 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 cuộc họp sắp tới. Kể từ Chrome 50, Chrome đã thêm một thuộc tính "dấu thời gian" mới để 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 dành cho Android. Mặc dù thông báo không hiển thị trên máy tính, nhưng sẽ ảnh hưởng đến thứ tự thông báo trên cả thiết bị di động và máy tính để bàn.