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

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, hiển thị ở 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).

Việc gắn 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 được chú ý hoặc để cho biết một chút 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ập nhật được với tần suất cao hơn nhiều vì không làm gián đoạn người dùng. Và, vì chúng 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 sử dụng có thể sử dụng

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

Trò chuyện, email và ứng dụng mạng xã hội để báo hiệu có tin nhắn mới hoặc hiện 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 dài hạn (chẳng hạn như hiển thị hình ảnh hoặc video) đã hoàn tất.
Trò chơi nhằm báo hiệu rằng người chơi cần phải thực hiện một hành động (ví dụ: trong Cờ vua, khi là 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. Dịch vụ hỗ trợ cho ChromeOS đang trong quá trình phát triển và sẽ có trong tương lai bản phát hành. Trên Android, API Huy hiệu không được hỗ trợ. Thay vào đó, Android 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, cũng như đối với các ứng dụng Android.

Dùng thử

Mở Bản minh hoạ API Gắn 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 Chrome để cài đặt tiện ích đó.
Mở ứng dụng này dưới dạng một ứng dụng web tiến bộ (PWA) đã cài đặt. Lưu ý: Ứng dụng phải đang chạy dưới dạng một ứng dụng web tiến bộ (PWA) đã cài đặt (trong thanh tác vụ hoặc thanh Dock ứng dụng).
Nhấp vào nút Set (Đặt) hoặc Clear (Xoá) để đặt hoặc xoá huy hiệu khỏi ứng dụng . Bạn cũng có thể cung cấp con số cho Giá trị của huy hiệu.

Cách sử dụng API Huy hiệu ứng dụng

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

Huy hiệu 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 cho giá trị được cung cấp, nếu không, hiển thị một chấm trắng trơn (hoặc gắn cờ khi phù hợp với nền tảng). Việc đặt number thành 0 cũng giống như đang gọi clearAppBadge().
clearAppBadge(): Xoá huy hiệu của ứng dụng.

Cả hai đều trả về các hứa hẹn 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ừ huy hiệu đã đăng ký trình chạy dịch vụ. Cách đặ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 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ố cung cấp hiển thị tốt nhất cho thiết bị đó. Ví dụ: do API Huy hiệu không được hỗ trợ trên Android, Android chỉ luôn hiển thị 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" và viết lại thành "99+". Nếu bạn tự bão hoà huy hiệu (ví dụ: bằng cách đặt huy hiệu thành "99") rồi đến "+" sẽ không xuất hiện. Bất kể số điện thoại thực tế, bạn chỉ cần gọi setAppBadge(unreadCount) rồi cho phép tác nhân người dùng xử lý hiển thị quảng cáo một cách phù hợp.

Mặc dù API Huy hiệu ứng dụng trong Chrome yêu cầu phải có một ứng dụng được 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. Chỉ cần gọi API khi nó 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ách này hiệu quả, thì thẻ đó sẽ hoạt động. Nếu không thì đơn giản là nó không như thế.

Đặt và xoá huy hiệu ở chế độ nền khỏi 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 trình chạy dịch vụ. Bạn có thể thực hiện thao tác này thông qua quá trình đồ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 thông tin trạng thái được 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 là quyết định của trình duyệt.

API Web Push

API đẩy cho phép máy chủ gửi thông báo đến trình chạy dịch vụ, có thể chạy mã JavaScript ngay cả khi không có trang nền trước nào đang chạy. Do đó, lệnh đẩy 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 bật thông báo hiển thị mỗi khi nhận được thông báo đẩy. Ứng dụng này phù hợp với một số mục đích sử dụng trường hợp (ví dụ: hiện thông báo khi cập nhật huy hiệu) nhưng không thể tinh tế cập nhật huy hiệu nếu không đang hiển thị một 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 hãy sử dụng API Đẩy và tính năng đồng bộ hoá định kỳ ở chế độ nền sẽ mang lại giải pháp hay. Thông tin có mức độ ưu tiên cao được gửi qua chế độ Gửi dữ liệu API, hiển thị một thông báo và cập nhật huy hiệu. Và mức độ ưu tiên thấp hơn thông tin được gửi bằng cách cập nhật huy hiệu, hoặc 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 của bạn với API Huy hiệu ứng dụng.

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ó thiếu phương thức hoặc thuộc tính nào 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ề thông số kỹ thuật trên kho lưu trữ GitHub về API Huy hiệu hoặc thêm về một vấn đề hiện tại.

Báo cáo sự cố về triển khai

Bạn có phát hiện lỗi trong quá trình triển khai Chrome không? Hoặc là triển khai 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 bạn có thể xem các hướng dẫn đơn giản để tái tạo và đặt Thành phần thành UI>Browser>WebAppInstalls. Lỗi trục phù hợp với chia sẻ các bản sao nhanh chóng và dễ dàng.

Hiện thông tin hỗ trợ về API này

Bạn đang định 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 và cho các nhà cung cấp trình duyệt khác thấy mức độ quan trọng đó là hỗ trợ họ.

Gửi một bài đăng đến @ChromiumDev kèm theo hashtag #BadgingAPI đồng thời 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

Thông báo 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áy: UI>Browser>WebAppInstalls

Ảnh chính của Prateek Katyal đang bật Hiển thị quảng cáo