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

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

Pete LePage

API Huy hiệu ứng dụng 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 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, xuất hiện ở một vị trí cụ thể của hệ điều hành được 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 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ì 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ó

Ví dụ về các ứng dụng có thể sử dụng API này bao gồm:

  • Ứ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ạ API Gắn huy hiệu ứng dụng.
  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 đó phải đang chạy dưới dạng PWA đã cài đặt (trong thanh tác vụ hoặc thanh Dock ứng dụng).
  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 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 một giá trị, hãy đặt huy hiệu thành giá trị đã cho, nếu không, hãy hiển thị một 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ư 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 trình bày 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ụ: Do API Huy hiệu không được hỗ trợ trên Android nên Android chỉ hiển thị dấu chấm thay vì một 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ố điện thoại 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ố đó 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 API này tồn tại, 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 trình chạy 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 trình chạy dịch vụ thăm dò định kỳ máy chủ, có thể được dùng để nhận trạng thái cập nhật và gọi navigator.setAppBadge().

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

API Web Push

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 đó, lệnh đẩ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 (kể cả Chrome) đều yêu cầu thông báo phải hiển thị 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.

Sự kết hợp của 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 qua API Đẩy, 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ó điều gì trong API không hoạt động như bạn 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 hay nhận xét nào về mô hình bảo mật này 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 có khác với thông số kỹ thuật không?

  • 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 hiện lỗi 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.

Các đường liên kết hữu ích

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