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

앱 아이콘 배지

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

Pete LePage

App Badging API란 무엇인가요?

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

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

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

가능한 사용 사례

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

채팅, 이메일, 소셜 앱으로 새 메시지가 도착했음을 알리거나 읽지 않은 항목의 개수를 표시할 수 있습니다.
생산성 앱: 장기 실행 백그라운드 작업 (예: 이미지 또는 동영상 렌더링)이 완료되었음을 알립니다.
게임: 플레이어의 동작이 필요함을 알립니다 (예: 체스에서 플레이어의 턴인 경우).

지원

App Badging API는 Windows 및 macOS, Chrome 81 및 Edge 81 이상에서 작동합니다. ChromeOS 지원은 개발 중이며 향후 버전에서 제공될 예정입니다. Android에서는 Badging API가 지원되지 않습니다. 대신 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.
});

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

사용자 에이전트가 배지를 표시하는 방식에 대해 어떤 가정도 하지 마세요. 일부 사용자 에이전트는 '4000'과 같은 숫자를 취해 '99+'로 재작성할 수 있습니다. 배지를 직접 채도하면 (예: '99'로 설정) '+'가 표시되지 않습니다. 실제 숫자에 관계없이 setAppBadge(unreadCount)를 호출하고 사용자 에이전트가 적절하게 표시를 처리하게 하기만 하면 됩니다.

Chrome의 App Badging API에는 설치된 앱이 필요하지만 설치 상태에 종속된 Badging API를 호출해서는 안 됩니다. 다른 브라우저에서 다른 위치에 배지가 표시될 수 있으므로 API가 있는 경우 API를 호출하기만 하면 됩니다. 작동한다면 그렇지 않은 경우 제대로 작동하지 않습니다.

서비스 워커에서 백그라운드에서 배지 설정 및 삭제

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

주기적인 백그라운드 동기화

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

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

웹 푸시 API

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

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

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

두 가지 옵션 조합

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

의견

Chrome팀은 App Badging API 사용 경험에 관한 의견을 듣고자 합니다.

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

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

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

구현 관련 문제 신고

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

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

API 지원 표시

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

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

유용한 링크

히어로 사진: 프라테크 카티알, Unsplash