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

앱 아이콘 배지

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

Pete LePage

App Badging API란 무엇인가요?

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

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

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

가능한 사용 사례

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

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

지원

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

직접 해 보기

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

App Badging API 사용 방법

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

배지 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에서는 배지 API가 지원되지 않으므로 Android에서는 숫자 값 대신 점만 표시됩니다.

사용자 에이전트가 배지를 표시하는 방식에 관해 아무것도 가정하지 마세요. 일부 사용자 에이전트는 '4000'과 같은 숫자를 가져와 '99+'로 다시 작성할 수 있습니다. 배지를 직접 포화 상태로 만들면('99'로 설정하는 등) '+'가 표시되지 않습니다. 실제 번호와 관계없이 setAppBadge(unreadCount)를 호출하여 사용자 에이전트가 적절하게 표시하도록 하면 됩니다.

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

서비스 워커에서 백그라운드로 배지 설정 및 지우기

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

주기적 백그라운드 동기화

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

하지만 동기화가 호출되는 빈도는 완벽하게 신뢰할 수 없으며 브라우저의 재량에 따라 호출됩니다.

Web Push API

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

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

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

두 가지 옵션 조합

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

의견

Chrome팀은 앱 배지 API에 관한 여러분의 경험을 듣고 싶습니다.

API 설계에 대해 알려주세요.

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

배지 API GitHub 저장소에 사양 문제를 신고하거나 기존 문제에 의견을 추가하세요.

구현 문제 신고

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

https://new.crbug.com에서 버그를 신고합니다. 가능한 한 많은 세부정보와 재현을 위한 간단한 안내를 포함하고 구성요소를 UI>Browser>WebAppInstalls로 설정합니다.

API 지원 표시

사이트에서 앱 배지 API를 사용하실 계획인가요? 공개적인 지원은 Chrome팀이 기능의 우선순위를 지정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

#BadgingAPI 해시태그를 사용하여 @ChromiumDev에 트윗을 보내 어디에서 어떻게 사용하고 있는지 알려주세요.

유용한 링크

히어로 사진: 프라티크 카티알(Unsplash 제공)

앱 아이콘 배지 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.