이 페이지는 Cloud Translation API를 통해 번역되었습니다.

앱 아이콘 배지

App Badging API를 사용하면 설치된 웹 앱이 앱 아이콘에 애플리케이션 전체 배지를 설정할 수 있습니다.

Pete LePage

App Badging API란 무엇인가요?

알림이 8개 있는 트위터와 플래그 유형 배지가 표시된 다른 앱의 예 — 8개의 알림이 있는 트위터와 플래그 유형 배지를 보여주는 다른 앱의 예

앱 배지 API를 사용하면 설치된 웹 앱이 애플리케이션과 연결된 운영체제별 위치(예: 섹션 또는 홈 화면)에 표시되는 애플리케이션 전체 배지를 설정할 수 있습니다.

배지를 사용하면 사용자의 주의가 필요한 새로운 활동이 있음을 사용자에게 알리거나 읽지 않은 수와 같은 소량의 정보를 표시할 수 있습니다.

배지는 알림보다 사용자 친화적이며 사용자에게 방해가 되지 않으므로 훨씬 더 자주 업데이트할 수 있습니다. 또한 사용자를 방해하지 않으므로 사용자의 권한이 필요하지 않습니다.

가능한 사용 사례

이 API를 사용할 수 있는 앱의 예는 다음과 같습니다.

채팅, 이메일, 소셜 앱: 새 메시지가 도착했음을 알리거나 읽지 않은 항목 수를 표시합니다.
생산성 앱: 오래 실행되는 백그라운드 작업 (예: 이미지 또는 동영상 렌더링)이 완료되었음을 알립니다.
게임: 플레이어 작업이 필요하다는 신호를 보내기 위해 (예: 체스에서 플레이어의 차례일 때).

지원

App Badging API는 Windows 및 macOS의 Chrome 81 및 Edge 81 이상에서 작동합니다. ChromeOS 지원은 개발 중이며 향후 출시에서 사용할 수 있습니다. Android에서는 Badging API가 지원되지 않습니다. 대신 Android는 Android 앱과 마찬가지로, Android 앱에 읽지 않은 알림이 있으면 설치된 웹 앱의 앱 아이콘에 배지를 자동으로 표시합니다.

직접 해 보기

App Badging API 데모를 엽니다.
메시지가 표시되면 설치를 클릭하여 앱을 설치하거나 Chrome 메뉴를 사용하여 설치합니다.
설치된 PWA로 엽니다. 설치된 PWA(작업 표시줄 또는 도크)로 실행되어야 합니다.
설정 또는 지우기 버튼을 클릭하여 앱 아이콘에서 배지를 설정하거나 지웁니다. 배지 값에 숫자를 제공할 수도 있습니다.

App Badging API 사용 방법

App Badging API를 사용하려면 웹 앱이 Chrome의 설치 가능성 기준을 충족해야 하며 사용자가 웹 앱을 홈 화면에 추가해야 합니다.

Badge API는 navigator의 두 가지 메서드로 구성됩니다.

setAppBadge(number): 앱의 배지를 설정합니다. 값이 제공되면 배지를 제공된 값으로 설정하고, 제공되지 않은 경우에는 흰색 점 (또는 플랫폼에 적합한 기타 플래그)을 표시합니다. number를 0로 설정하는 것은 clearAppBadge()를 호출하는 것과 같습니다.
clearAppBadge(): 앱의 배지를 삭제합니다.

둘 다 오류 처리에 사용할 수 있는 빈 약속을 반환합니다.

배지는 현재 페이지 또는 등록된 서비스 워커에서 설정할 수 있습니다. 포그라운드 페이지 또는 서비스 워커에서 배지를 설정하거나 지우려면 다음을 호출합니다.

// 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.
});

경우에 따라 운영체제에서 배지를 정확하게 표시하지 못할 수 있습니다. 이 경우 브라우저는 해당 기기에 가장 적합한 표현을 제공하려고 시도합니다. 예를 들어 Android에서는 Badging API가 지원되지 않으므로 Android에서는 숫자 값 대신 점만 표시합니다.

사용자 에이전트가 배지를 표시하는 방식에 관해 가정하지 마세요. 일부 사용자 에이전트는 '4000'과 같은 숫자를 '99+'로 재작성할 수 있습니다. 배지를 직접 채우면 (예: '99'로 설정) '+'가 표시되지 않습니다. 실제 숫자는 중요하지 않으므로 setAppBadge(unreadCount)를 호출하고 사용자 에이전트가 적절하게 표시하도록 합니다.

Chrome의 앱 배지 API에는 설치된 앱이 필요하지만 설치 상태에 따라 배지 API를 호출해서는 안 됩니다. 다른 브라우저에서는 배지를 다른 위치에 표시할 수 있으므로 API가 있는 경우에만 호출하면 됩니다. 작동하면 작동하는 것입니다. 그렇지 않으면 표시되지 않습니다.

서비스 워커에서 백그라운드에서 배지를 설정하고 지우기

서비스 워커를 사용하여 백그라운드에서 앱 배지를 설정할 수도 있습니다. 주기적 백그라운드 동기화, 푸시 API 또는 이 두 가지를 조합하여 이를 실행합니다.

주기적 백그라운드 동기화

주기적 백그라운드 동기화를 사용하면 서비스 워커가 서버를 주기적으로 폴링할 수 있습니다. 이를 통해 업데이트된 상태를 가져오고 navigator.setAppBadge()를 호출할 수 있습니다.

그러나 동기화가 호출되는 빈도는 완전히 안정적이지 않으며 브라우저의 재량에 따라 호출됩니다.

Web Push API

Push API를 사용하면 서버가 포그라운드 페이지가 실행되지 않아도 JavaScript 코드를 실행할 수 있는 서비스 워커에 메시지를 보낼 수 있습니다. 따라서 서버 푸시는 navigator.setAppBadge()를 호출하여 배지를 업데이트할 수 있습니다.

하지만 Chrome을 비롯한 대부분의 브라우저에서는 푸시 메시지가 수신될 때마다 알림을 표시해야 합니다. 이는 일부 사용 사례 (예: 배지를 업데이트할 때 알림 표시)에는 적합하지만 알림을 표시하지 않고 배지를 미묘하게 업데이트할 수는 없습니다.

또한 사용자가 푸시 메시지를 수신하려면 사이트 알림 권한을 부여해야 합니다.

두 가지 옵션 조합

완벽하지는 않지만 Push API와 주기적 백그라운드 동기화를 함께 사용하면 좋은 솔루션이 됩니다. 우선순위가 높은 정보는 푸시 API를 통해 전송되어 알림을 표시하고 배지를 업데이트합니다. 우선순위가 낮은 정보는 페이지가 열려 있을 때 또는 주기적인 백그라운드 동기화를 통해 배지를 업데이트하여 전송됩니다.

의견

Chrome팀에서는 앱 배지 API 사용 경험에 관한 의견을 듣고자 합니다.

API 설계 설명

API에 예상대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요? 보안 모델에 관해 질문이나 의견이 있으신가요?

Badging API GitHub 저장소에서 사양 문제를 제출하거나 기존 문제에 의견을 추가하세요.

구현 문제 신고

Chrome 구현에서 버그를 발견했나요? 아니면 구현이 사양과 다른가요?

https://new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보와 재현을 위한 간단한 안내를 포함하고 구성요소를 UI>Browser>WebAppInstalls로 설정해야 합니다. Glitch는 빠르고 간편하게 재현을 공유하는 데 적합합니다.

API 지원 표시

사이트에서 App Badging API를 사용하려면 어떻게 해야 하나요? 공개적으로 지원하면 Chrome팀에서 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

#BadgingAPI 해시태그를 사용하여 @ChromiumDev에 트윗을 보내고 사용 빈도와 사용 방법을 알려주세요.

유용한 링크

Unsplash의 Prateek Katyal님 제공 히어로 사진