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 một huy hiệu trên toàn ứng dụng cho 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 cho thấy huy hiệu dạng cờ.
Ví dụ về Twitter có 8 thông báo và một ứng dụng khác cho thấy huy hiệu loại cờ.

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

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

Huy hiệu thường thân thiện với người dùng hơn so với thông báo và có thể được cập nhật với tần suất cao hơn nhiều vì chúng không làm gián đoạn người dùng. Vì không làm gián đoạn người dùng, nên các thông báo này không cần có sự cho phép của người dùng.

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

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

  • Các ứ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.
  • Các ứng dụng 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 một hành động (ví dụ: trong Cờ vua, khi đến lượt người chơi).

Hỗ trợ

App Badging API hoạt động trên Windows và macOS, trong Chrome 81 và Edge 81 trở lên. Chúng tôi đang phát triển tính năng hỗ trợ ChromeOS và sẽ cung cấp tính năng này trong một bản phát hành sau này. Trên Android, Badging API không được hỗ trợ. Thay vào đó, Android sẽ tự động hiện một 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 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ở dưới dạng một PWA đã cài đặt. Xin lưu ý rằng ứng dụng này phải đang chạy dưới dạng một PWA đã cài đặt (trong thanh tác vụ hoặc thanh công cụ).
  4. Nhấp vào nút Đặt hoặc 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 số cho Giá trị huy hiệu.

Cách sử dụng App Badging API

Để sử dụng App Badging API, ứng dụng web của bạn cần đáp ứng các tiêu chí 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 2 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 một giá trị, hãy đặt huy hiệu thành giá trị đó. Nếu không, hãy hiển thị một dấu chấm màu trắng đơn giản (hoặc cờ khác cho phù hợp với nền tảng). Việc đặt number thành 0 cũng giống như gọi clearAppBadge().
  • clearAppBadge(): Xoá huy hiệu của ứng dụng.

Cả hai đều trả về các promise trống mà bạn có thể 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 nền trước hoặc trình chạy 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 thể hiện 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 thông tin trình bày tốt nhất cho thiết bị đó. Ví dụ: vì Badging API 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ị bằng 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à viết lại thành "99+". Nếu bạn tự làm bão hoà huy hiệu (ví dụ: bằng cách đặt 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ù App Badging API trong Chrome yêu cầu phải có một ứng dụng đã cài đặt, nhưng bạn không nên gọi Badging API tuỳ thuộc vào trạng thái cài đặt. Chỉ cần gọi API khi API tồn tại, vì các trình duyệt khác có thể hiển thị huy hiệu ở những nơi khác. Nếu hiệu quả thì cứ làm. Nếu không, thì trang đó sẽ không được lập chỉ mục.

Đặt và xoá huy hiệu ở chế độ nền từ mộ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 service worker. Thực hiện việc này thông qua tính năng đồng bộ hoá định kỳ ở chế độ nền, Push API 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 một worker dịch vụ định kỳ thăm dò máy chủ. Bạn có thể dùng tính năng này để nhận trạng thái mới nhất và gọi navigator.setAppBadge().

Tuy nhiên, tần suất gọi hoạt độ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 các máy chủ gửi thông báo đến các worker dịch vụ. Các worker này 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 từ 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 phù hợp 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 khiến bạn 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 cho trang web của bạn để nhận được 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á định kỳ trong nền cùng nhau sẽ mang đến một giải pháp hiệu quả. Thông tin có mức độ ưu tiên cao được gửi qua Push API, hiển thị thông báo và cập nhật huy hiệu. Thông tin có mức độ ưu tiên thấp hơn sẽ được gửi bằng cách cập nhật huy hiệu, khi trang đang mở hoặc thông qua quá trình đồng bộ hoá định kỳ ở chế độ nền.

Phản hồi

Nhóm Chrome muốn biết ý kiến của bạn về trải nghiệm khi sử dụng App Badging API.

Hãy cho chúng tôi biết về thiết kế API

Có điều gì trong API không hoạt động như bạn mong đợi không? Hoặc 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 nào 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 thấy lỗi trong quá trình triển khai của Chrome không? Hay việc triển khai có khác với quy cách không?

  • Báo cáo lỗi tại https://new.crbug.com. 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 Thành phần thành UI>Browser>WebAppInstalls.

Thể hiện sự ủng hộ đối với API

Bạn có dự định sử dụng App Badging API 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 này.

  • Gửi một tweet đến @ChromiumDev bằng cách dùng thẻ bắt đầu bằng #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