Huy hiệu cho biểu tượng ứng dụng

App Badging API cho phép các ứng dụng web đã cài đặt đặt huy hiệu trên toàn ứng dụng trên biểu tượng ứng dụng.

Pete LePage

App Badging API là gì?

Ví dụ về Twitter có 8 thông báo và một ứng dụng khác hiển thị huy hiệu loại cờ.
Ví dụ về Twitter có 8 thông báo và một ứng dụng khác hiển thị huy hiệu loại cờ.

API gắn huy hiệu ứng dụng cho phép các ứng dụng web đã cài đặt đặt huy hiệu trên toàn ứng dụng, hiển thị ở một vị trí dành riêng cho hệ điều hành liên kết với ứng dụng (chẳng hạn như kệ hoặc màn hình chính).

Việc gắn huy hiệu giúp bạn dễ dàng thông báo tinh tế cho người dùng rằng có hoạt động mới có thể cần họ chú ý hoặc để cho biết một lượng nhỏ thông tin, chẳng hạn như số lượng thư chưa đọc.

Huy hiệu thường thân thiện với người dùng hơn thông báo và có thể được cập nhật với tần suất cao hơn nhiều vì không làm gián đoạn người dùng. Ngoài ra, vì không làm gián đoạn người dùng nên các thanh thông báo này không cần người dùng cấp quyền.

Các trường hợp sử dụng có thể có

Sau đây là ví dụ về các ứng dụng có thể sử dụng API này:

  • Ứng dụng trò chuyện, email và mạng xã hội để báo hiệu rằng đã có tin nhắn mới hoặc để cho biết số lượng mục chưa đọc.
  • Ứng dụng cải thiện năng suất, để báo hiệu rằng một tác vụ chạy trong nền trong thời gian dài (chẳng hạn như kết xuất hình ảnh hoặc video) đã hoàn tất.
  • Trò chơi, để báo hiệu rằng người chơi cần thực hiện hành động (ví dụ: trong Cờ vua, khi đến lượt người chơi).

Hỗ trợ

API gắn huy hiệu ứng dụng hoạt động trên Windows và macOS, trong Chrome 81 và Edge 81 trở lên. Tính năng hỗ trợ ChromeOS đang trong quá trình phát triển và sẽ có trong bản phát hành sau này. Trên Android, API huy hiệu không được hỗ trợ. Thay vào đó, Android sẽ tự động hiển thị huy hiệu trên biểu tượng ứng dụng cho ứng dụng web đã cài đặt khi có thông báo chưa đọc, giống như đối với các ứng dụng Android.

Dùng thử

  1. Mở bản minh hoạ App Badging API.
  2. Khi được nhắc, hãy nhấp vào Install (Cài đặt) để cài đặt ứng dụng hoặc sử dụng trình đơn Chrome để cài đặt ứng dụng.
  3. Mở ứng dụng đó dưới dạng một PWA đã cài đặt. Lưu ý: ứng dụng này phải đang chạy dưới dạng PWA đã cài đặt (trong thanh tác vụ hoặc thanh dock).
  4. Nhấp vào nút Set (Đặt) hoặc Clear (Xoá) để đặt hoặc xoá huy hiệu khỏi biểu tượng ứng dụng. Bạn cũng có thể cung cấp một con số cho Giá trị huy hiệu.

Cách sử dụng API gắn huy hiệu ứng dụng

Để sử dụng API gắn huy hiệu ứng dụng, ứng dụng web của bạn cần đáp ứng các tiêu chí về khả năng cài đặt của Chrome và người dùng phải thêm ứng dụng đó vào màn hình chính.

Badge API bao gồm hai phương thức trên navigator:

  • setAppBadge(number): Đặt huy hiệu của ứng dụng. Nếu bạn cung cấp giá trị, hãy đặt huy hiệu thành giá trị đã cung cấp, nếu không, hãy hiển thị một dấu chấm trắng trơn (hoặc cờ khác phù hợp với nền tảng). Việc đặt number thành 0 cũng giống như việc gọi clearAppBadge().
  • clearAppBadge(): Xoá huy hiệu của ứng dụng.

Cả hai đều trả về các lời hứa trống mà bạn có thể sử dụng để xử lý lỗi.

Bạn có thể đặt huy hiệu từ trang hiện tại hoặc từ trình chạy dịch vụ đã đăng ký. Để đặt hoặc xoá huy hiệu (trong trang trên nền trước hoặc worker dịch vụ), hãy gọi:

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

Trong một số trường hợp, hệ điều hành có thể không cho phép hiển thị chính xác huy hiệu. Trong những trường hợp như vậy, trình duyệt sẽ cố gắng cung cấp nội dung trình bày phù hợp nhất cho thiết bị đó. Ví dụ: vì API gắn huy hiệu không được hỗ trợ trên Android, nên Android chỉ hiển thị một dấu chấm thay vì giá trị số.

Đừng giả định bất cứ điều gì về cách tác nhân người dùng hiển thị huy hiệu. Một số tác nhân người dùng có thể lấy một số như "4000" và ghi lại số đó dưới dạng "99+". Nếu bạn tự làm cho huy hiệu bão hoà (ví dụ: bằng cách đặt huy hiệu thành "99"), thì dấu "+" sẽ không xuất hiện. Bất kể số lượng thực tế là bao nhiêu, bạn chỉ cần gọi setAppBadge(unreadCount) và để tác nhân người dùng xử lý việc hiển thị số lượng đó cho phù hợp.

Mặc dù API gắn huy hiệu ứng dụng trong Chrome yêu cầu ứng dụng đã cài đặt, nhưng bạn không nên thực hiện lệnh gọi đến API gắn huy hiệu tuỳ thuộc vào trạng thái cài đặt. Bạn chỉ cần gọi API khi có, vì các trình duyệt khác có thể hiển thị huy hiệu ở những vị trí khác. Nếu có hiệu quả thì cứ làm. Nếu không, thì không có gì xảy ra.

Thiết lập và xoá huy hiệu ở chế độ nền từ trình chạy dịch vụ

Bạn cũng có thể đặt huy hiệu ứng dụng ở chế độ nền bằng cách sử dụng worker dịch vụ. Bạn có thể thực hiện việc này thông qua tính năng đồng bộ hoá định kỳ ở chế độ nền, API Đẩy hoặc kết hợp cả hai.

Đồng bộ hoá định kỳ ở chế độ nền

Tính năng đồng bộ hoá định kỳ ở chế độ nền cho phép worker dịch vụ định kỳ thăm dò ý kiến máy chủ. Tính năng này có thể được dùng để nhận trạng thái mới nhất và gọi navigator.setAppBadge().

Tuy nhiên, tần suất gọi tính năng đồng bộ hoá không hoàn toàn đáng tin cậy và được gọi theo quyết định của trình duyệt.

Web Push API

Push API cho phép máy chủ gửi thông báo đến worker dịch vụ. Worker dịch vụ có thể chạy mã JavaScript ngay cả khi không có trang nào ở nền trước đang chạy. Do đó, một thông báo đẩy của máy chủ có thể cập nhật huy hiệu bằng cách gọi navigator.setAppBadge().

Tuy nhiên, hầu hết các trình duyệt, bao gồm cả Chrome, đều yêu cầu hiển thị thông báo mỗi khi nhận được thông báo đẩy. Điều này là ổn đối với một số trường hợp sử dụng (ví dụ: hiển thị thông báo khi cập nhật huy hiệu), nhưng không thể cập nhật huy hiệu một cách tinh tế mà không hiển thị thông báo.

Ngoài ra, người dùng phải cấp quyền gửi thông báo trên trang web của bạn để nhận thông báo đẩy.

Kết hợp cả hai

Mặc dù không hoàn hảo, nhưng việc sử dụng Push API và tính năng đồng bộ hoá trong nền định kỳ cùng nhau sẽ mang lại một giải pháp hiệu quả. Thông tin có mức độ ưu tiên cao được phân phối thông qua API Push, hiển thị thông báo và cập nhật huy hiệu. Còn thông tin có mức độ ưu tiên thấp hơn sẽ được phân phối bằng cách cập nhật huy hiệu, khi trang đang mở hoặc thông qua tính năng đồng bộ hoá định kỳ ở chế độ nền.

Phản hồi

Nhóm Chrome muốn biết trải nghiệm của bạn với App Badging API.

Giới thiệu cho chúng tôi về thiết kế API

Có gì trong API không hoạt động như mong đợi không? Hay có phương thức hoặc thuộc tính nào bị thiếu mà bạn cần để triển khai ý tưởng của mình không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật không?

Báo cáo vấn đề về việc triển khai

Bạn có phát hiện lỗi khi triển khai Chrome không? Hay cách triển khai khác với thông số kỹ thuật?

  • Gửi lỗi tại https://new.crbug.com. Hãy nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, hướng dẫn đơn giản để tái tạo và đặt Components (Thành phần) thành UI>Browser>WebAppInstalls. Glitch rất phù hợp để chia sẻ các bản sao nhanh chóng và dễ dàng.

Hỗ trợ API

Bạn có dự định sử dụng API huy hiệu ứng dụng trên trang web của mình không? Sự ủng hộ công khai của bạn giúp nhóm Chrome ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng đó.

  • Gửi một tweet đến @ChromiumDev bằng hashtag #BadgingAPI và cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.

Đường liên kết hữu ích

Ảnh chính của Prateek Katyal trên Unsplash