모든 앱에는 배지가 있어야합니다.
기기의 기본 앱에서 매일 보게되는 매우 일반적인 UI 패턴 인 알림 배지입니다. 간단하고 작은 표시기를 통해 사용자에게 누락 된 정보를 알려주는 훌륭한 개념입니다. 가장 일반적으로 카운터이며 일부 특수 앱의 경우 맞춤 배지 또는 아이콘에 대한 시각적 조정이 사용됩니다. 예를 들어 macOS의 키 체인 앱에서 주황색 동전은 키 체인이 잠금 해제되어 액세스 가능함을 나타냅니다.
그러나 기본 배지로 돌아갑니다. Google이 지속적으로 웹을 발전시킨 덕분에 설치된 프로그레시브 웹 앱도 카운터를 배지로 표시 할 수 있습니다.
전제 조건
웹 앱에서 배지를 표시하려면 아래 부록에 링크 된 Google의 '설치 가능성 기준'을 충족해야합니다. 그리고 이것은 절대적으로 의미가 있습니다. 시스템에서 고정 된 위치를 갖기 위해서는 PWA를 장치에 설치해야합니다. Windows에서는 앱이 작업 표시 줄에 있고 macOS에서는 Dock에 있습니다.
아직 모르는 경우 웹 앱을 점진적으로 개선하여 "Progressive Web Apps"또는 줄여서 PWA라는 새로운 종류의 응용 프로그램으로 발전 할 수 있습니다. PWA는 이전에는 기본 앱에서만 사용할 수 있었던 다양한 새 기능을 지원합니다. 설치할 수있는 PWA 자체 인이 웹 앱에서 PWA에 대한 많은 기사를 확인할 수 있습니다.
App Badging API에 대한 지원은 현재 Chromium 브라우저로 제한되며 데스크톱 장치와 Android에서만 지원됩니다. API의 전체 상태는 Chromium에서 안정적이지만 다른 브라우저에서는 지원되지 않습니다. 따라서 사용은 앱을 사용하기위한 필수 요구 사항이 아니라 기존 UX를 점진적으로 향상시켜야합니다.
작동 원리
실제 구현은 매우 간단하며 모든 사용 사례를 처리하는 데 몇 줄의 코드 만 있으면됩니다.
// These code examples asume you're using
// Typescript, as they use optional chaining.
//
// Also note that the API-calls for badging
// return a promise that can directly be
// catched.
async function setSimpleBadge(){
// Just a simple indicator without any value.
// This is the simplest variant of a badge.
await navigator?.setClientBadge();
}
async function incrementBadgeCount(){
// Get our dummy count and update it,
// just to give more context for this demo.
const countNow = getUnreadMessagesCount();
await setUnreadMessagesCount(countNow + 1);
// Update the UI.
await navigator.setAppBadge(countNow + 1)
.catch((error) => { /* ... */ });
}
async function resetBadge(){
// As simple as it gets: reset the badge UI.
await navigator.clearClientBadge();
}
이 새로운 API의 매우 좋은 점은 서비스 워커 내에서도 사용할 수 있다는 것입니다. 즉, 구현 된 경우 설치된 PWA가 백그라운드에서 데이터를 가져오고 푸시 알림을받을 수 있으며, 이는 앱의 배지를 업데이트 할 수 있습니다. !
결론
보시다시피 App Badging API를 사용하는 것은 정말 간단합니다. 테스트에 필요한 것은 Chromium 기반 브라우저와 설치 가능한 간단한 PWA뿐입니다. 이 API는 Safari 또는 Firefox에서 조만간 사용할 수있을 것으로 예상되지 않습니다. 이는 해당 팀이 일반적으로 PWA에 더 많은 노력을 기울이고 있음을 의미하기도합니다. 그러나 가능한 경우 웹 앱을위한 향상된 UX를 위해서는 대단한 승리이며 반드시 사용해야합니다!
