Trang này được dịch bởi Cloud Translation API.

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ờ.

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, 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ư kệ hoặc màn hình chính).

Huy hiệu giúp bạn dễ dàng thông báo cho người dùng một cách tinh tế 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ông tin chưa đọc.

Huy hiệu có xu hướ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 chúng không cần sự cho phép của người dùng.

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

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

Các ứng dụng nhắn tin, email và mạng xã hội để báo hiệu rằng tin nhắn mới đã đến hoặc để hiển thị số mục chưa đọc.
Ứng dụng cải thiện hiệu suất, để báo hiệu rằng một tác vụ chạy trong nền (chẳng hạn như hiển thị hình ảnh hoặc video) đã hoàn thành.
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 của người chơi).

Hỗ trợ

API 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ợ cho ChromeOS đang trong quá trình phát triển và sẽ được cung cấp trong bản phát hành trong tương lai. Trên Android, API Huy hiệu không được hỗ trợ. Thay vào đó, Android sẽ tự động hiển thị một huy hiệu trên biểu tượng ứng dụng đối với ứng dụng web đã cài đặt khi có thông báo chưa đọc, tương tự như đối với ứng dụng Android.

Thử ngay

Mở Bản minh hoạ API huy hiệu ứng dụng.
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.
Mở dưới dạng một ứng dụng web tiến bộ (PWA) đã cài đặt. Lưu ý: Ứ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 đế của bạn).
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 số cho Giá trị huy hiệu.

Cách sử dụng App Badging API

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

API huy hiệu bao gồm 2 phương thức trên navigator:

setAppBadge(number): Đặt huy hiệu của ứng dụng. Nếu có giá trị, hãy đặt huy hiệu thành giá trị được cung cấp, nếu không, hãy hiển thị một dấu chấm màu trắng trơ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ư việc gọi clearAppBadge().
clearAppBadge(): Xoá huy hiệu của ứng dụng.

Cả hai đều trả về 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 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 biểu 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 bản trình bày tốt nhất cho thiết bị đó. Ví dụ: vì API Huy hiệu không được hỗ trợ trên Android nên Android chỉ cho thấy dấu chấm thay vì giá trị số.

Đừng giả định bất kỳ đ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" rồi viết lại là "99+". Nếu bạn tự bảo đảm 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ố điện thoại thực tế, 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 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 Huy hiệu dựa trên trạng thái cài đặt. Bạn chỉ cần gọi API này khi API đó tồn tại, vì các trình duyệt khác có thể hiển thị huy hiệu này ở những vị trí khác. Nếu ứng dụng hoạt động thì bạn sẽ thấy ứng dụng hoạt động. Nếu không thì đơn giản là không có.

Đặt và xóa huy hiệu ở chế độ nền khỏi nhân viên dịch vụ

Bạn cũng có thể đặt huy hiệu ứng dụng ở chế độ nền bằ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 một trình chạy dịch vụ thăm dò máy chủ theo định kỳ (có thể dùng để nhận trạng thái đã cập nhật) và gọi navigator.setAppBadge().

Tuy nhiên, tần suất mà quá trình đồng bộ hoá được gọi 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 (API Đẩy) cho phép máy chủ gửi thông báo đến trình thực thi dịch vụ. Các trình thực thi này có thể chạy mã JavaScript ngay cả khi không có trang nào trên nền trước đang chạy. Do đó, một 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, bao gồm cả Chrome, đều yêu cầu hiển thị thông báo bất cứ khi nào nhận được thông báo đẩy. Điều này cũng bình thường đố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 khiến bạn không thể cập nhật huy hiệu theo 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 thông báo cho trang web của bạn thì mới 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 API đẩy và tính năng đồng bộ hoá nền định kỳ cùng nhau sẽ là 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. Đồng thời, 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 quá trình đồng bộ hoá định kỳ ở chế độ nền.

Ý kiế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.

Cho chúng tôi biết về thiết kế của API

Có tính năng nào 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 không? Bạn có câu hỏi hoặc nhận xét gì về mô hình bảo mật?

Gửi vấn đề về thông số kỹ thuật trên kho lưu trữ GitHub về API Huy hiệu hoặc thêm ý tưởng vào vấn đề hiện có.

Báo cáo sự cố với quá trình triển khai

Bạn có phát hiện thấy 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?

Báo cáo 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 Thành phần thành UI>Browser>WebAppInstalls. Glitch rất hữu ích trong việc chia sẻ các bản sao nhanh và dễ dàng.

Hỗ trợ API

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

Hãy gửi một bài đăng trên Twitter tới @ChromiumDev kèm theo hashtag #BadgingAPI và cho chúng tôi biết vị trí cũng như cách bạn sử dụng bài đăng này.

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

Nội dung giải thích công khai
Bản nháp quy cách
Bản minh hoạ API huy hiệu | Nguồn minh hoạ API huy hiệu
Theo dõi lỗi
Mục ChromeStatus.com
Thành phần nhấp nháy: UI>Browser>WebAppInstalls

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