App Badging API를 사용하면 설치된 웹 앱이 앱 아이콘에 애플리케이션 전체 배지를 설정할 수 있습니다.
App Badging API란 무엇인가요?
앱 배지 API를 사용하면 설치된 웹 앱이 애플리케이션과 연결된 운영체제별 위치(예: 섹션 또는 홈 화면)에 표시되는 애플리케이션 전체 배지를 설정할 수 있습니다.
배지를 사용하면 주의가 필요할 수 있는 새로운 활동이 있음을 사용자에게 쉽게 알리거나 읽지 않은 항목 수와 같은 소량의 정보를 표시할 수 있습니다.
배지는 알림보다 사용자 친화적이며 사용자에게 방해가 되지 않으므로 훨씬 더 자주 업데이트할 수 있습니다. 또한 사용자에게 방해가 되지 않으므로 사용자의 권한이 필요하지 않습니다.
가능한 사용 사례
이 API를 사용할 수 있는 앱의 예는 다음과 같습니다.
- 채팅, 이메일, 소셜 앱에서 새 메시지가 도착했음을 알리거나 읽지 않은 항목 수를 표시합니다.
- 생산성 앱: 오래 실행되는 백그라운드 작업 (예: 이미지 또는 동영상 렌더링)이 완료되었음을 알립니다.
- 게임: 플레이어 작업이 필요하다는 신호를 보내기 위해 (예: 체스에서 플레이어의 차례일 때).
지원
App Badging API는 Windows 및 macOS의 Chrome 81 및 Edge 81 이상에서 작동합니다. ChromeOS 지원은 개발 중이며 향후 출시 버전에서 사용할 수 있습니다. Android에서는 Badging API가 지원되지 않습니다. 대신 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가 있는 경우에만 호출하면 됩니다. 작동한다면 문제가 없습니다. 그렇지 않으면 표시되지 않습니다.
서비스 워커에서 백그라운드에서 배지를 설정하고 지우기
서비스 워커를 사용하여 백그라운드에서 앱 배지를 설정할 수도 있습니다. 주기적 백그라운드 동기화, Push 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에 트윗을 보내고 사용 위치와 사용 방법을 알려주세요.
유용한 링크
- 공개 설명서
- 사양 초안
- Badging API 데모 | Badging API 데모 소스
- 버그 추적
- ChromeStatus.com 항목
- Blink 구성요소:
UI>Browser>WebAppInstalls