App Badging API를 사용하면 설치된 웹 앱이 앱 아이콘에 애플리케이션 전체 배지를 설정할 수 있습니다.
App Badging API란 무엇인가요?
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">App Badging API를 사용하면 설치된 웹 앱이 애플리케이션 전체 배지를 설정할 수 있습니다. 애플리케이션 관련 운영 체제별 위치에 표시할 수 있습니다. 설정할 수 있습니다.
배지를 사용하면 사용자에게 새로운 활동이 있음을 섬세하게 알릴 수 있습니다. 매우 작은 숫자 또는 매우 적은 양의 트래픽을 나타낼 수 있는 읽을 수 없습니다.
배지는 알림보다 사용자 친화적인 경향이 있으며 업데이트할 수 있습니다. 사용자를 방해하지 않기 때문에 훨씬 더 높은 빈도로 재생됩니다. 그리고 사용자를 방해하지 않으므로 사용자의 허가도 필요하지 않습니다.
가능한 사용 사례
이 API를 사용할 수 있는 앱의 예는 다음과 같습니다.
- 채팅, 이메일 및 소셜 애플리케이션을 통해 새 메시지가 도착했음을 알리거나 읽지 않은 항목의 수가 표시됩니다.
- 장기 실행 백그라운드 작업 (예: 완료될 때까지 계속 대기합니다.
- 플레이어의 작업이 필요함을 알리기 위한 게임 (예: 체스에서 입니다.
지원
App Badging API는 Windows 및 macOS(Chrome 81 및 Edge 81 이상)에서 작동합니다. ChromeOS 지원은 개발 중이며 향후 제공될 예정입니다. 있습니다. Android에서는 Badging API가 지원되지 않습니다. 대신 Android는 설치된 웹 앱의 앱 아이콘에 배지를 자동으로 표시합니다. Android 앱에서와 마찬가지로 읽지 않은 알림이 있을 때 알림을 받습니다.
직접 해 보기
- Google 검색 앱 홈 화면의 오른쪽 상단에 있는 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가 있는 경우, 다른 브라우저에서 다른 위치에 배지가 표시될 수 있기 때문입니다. 작동한다면 문제가 없습니다. 그렇지 않은 경우에는 적용되지 않습니다.
서비스 워커가 백그라운드에서 배지 설정 및 삭제
서비스 워커를 사용하여 백그라운드에서 앱 배지를 설정할 수도 있습니다. 다음 중 한 가지 작업 수행 주기적 백그라운드 동기화, Push API 또는 이 두 가지의 조합을 통해 전달될 수 있습니다.
주기적 백그라운드 동기화
주기적 백그라운드 동기화는 서비스 워커를 허용함
주기적으로 서버를 폴링하여 업데이트된 상태를 가져오는 데 사용할 수 있고,
그리고 navigator.setAppBadge()를 호출합니다.
그러나 동기화가 호출되는 빈도는 완전히 신뢰할 수 없으므로 브라우저의 재량에 따라 호출됩니다.
웹 푸시 API
Push API를 사용하면 서버가 서비스 워커에 메시지를 보낼 수 있고
포그라운드 페이지가 실행 중이 아닐 때도 JavaScript 코드를 실행할 수 있습니다. 따라서
서버 푸시는 navigator.setAppBadge()를 호출하여 배지를 업데이트할 수 있습니다.
하지만 Chrome을 포함한 대부분의 브라우저에서는 푸시 메시지를 수신할 때마다 표시됩니다. 일부 용도로는 괜찮습니다. 케이스 (예: 업데이트 시 알림 표시) 모든 캡션이 포함되지만 알림이 표시됩니다.
또한 사용자가 알림을 보내려면 사이트 알림 권한을 부여해야 합니다. 푸시 메시지를 수신할 수 있습니다.
두 가지 옵션 조합
완벽하지는 않지만 Push API와 주기적인 백그라운드 동기화를 함께 사용 좋은 솔루션이 될 것입니다. 우선순위가 높은 정보는 푸시를 통해 전달됨 API에서 알림을 표시하고 배지를 업데이트하는 방법을 보여줍니다. 낮은 우선순위 페이지가 열려 있을 때 배지를 업데이트하여 정보를 제공함 정기적인 백그라운드 동기화를 통해 사용할 수 있습니다
의견
Chrome팀은 App Badging API 사용 경험에 관한 의견을 듣고자 합니다.
API 설계에 대해 알려주세요.
API에 예상대로 작동하지 않는 요소가 있나요? 또는 아이디어를 구현하는 데 필요한 메서드나 속성이 빠졌는가? 보안 모델에 대한 질문이나 의견이 있습니까?
- Badging API GitHub 저장소에서 사양 문제를 신고하거나, 기존 문제에 대한 생각을 할 수 있습니다
구현 문제 신고
Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 어떻게 해야 할까요?
- https://new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보를 포함해야 합니다.
간단한 재현 지침을 따르고 구성요소를
UI>Browser>WebAppInstalls입니다. Glitch는 빠르고 쉬운 복제물을 공유하는 것입니다.
API 지원 표시
사이트에서 App Badging API를 사용할 계획이신가요? 여러분의 공적 후원은 Chrome팀은 기능의 우선순위를 정하고 다른 브라우저 공급업체에 그들을 지원하는 일입니다
- 해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다.
#BadgingAPI어디서 어떻게 사용하는지 Google에 알려주세요.
유용한 링크
- 공개 설명
- 사양 초안
- 배지 설정 API 데모 | 배지 설정 API 데모 소스
- 버그 추적
- ChromeStatus.com 항목
- 깜박임 구성요소:
UI>Browser>WebAppInstalls