PWA 배지

앱 배지 API를 사용하면 설치된 웹 앱이 애플리케이션 전체 배지를 설정할 수 있습니다.
응용 프로그램과 관련된 운영 체제별 위치에 표시됨
(서가 또는 홈 화면 등).

배지는 알림보다 사용자에게 더 친숙한 경향이 있으며 다음을 통해 업데이트할 수 있습니다.
사용자를 방해하지 않기 때문에 훨씬 더 높은 빈도입니다. 그리고, 그들은
사용자를 방해하지 마십시오. 사용자의 허가가 필요하지 않습니다.

Keep in mind that to display the Badge count, Your PWA application should be installed on your device.

가능한 사용 사례

이 라이브러리를 사용할 수 있는 사이트의 예는 다음과 같습니다.

새 메시지가 도착했음을 알리거나
읽지 않은 항목의 수를 표시합니다.

장시간 실행되는 백그라운드 작업(예:
이미지 또는 비디오 렌더링)이 완료되었습니다.

플레이어 작업이 필요함을 알리기 위한 게임(예: 체스에서
플레이어의 턴).

용법

npm install --save pwa-badge

Badge API는 다섯 가지 방법으로 구성됩니다.

isSupported() 사용자의 브라우저가 기능을 지원하는지 확인하십시오.
지원 상태를 나타내는 boolean 값을 반환합니다.

syncSetBadge(unreadCount) 앱의 배지를 동기식으로 제거합니다. 값이 제공되면 배지를 제공된 값으로 설정하고, 그렇지 않으면 일반 흰색 점(또는 플랫폼에 적합한 다른 플래그)을 표시합니다. 숫자를 0으로 설정syncClearBadge() 또는 asyncClearBadge() 를 호출하는 것과 같습니다.

syncClearBadge() 앱의 배지를 동기식으로 제거합니다.

asyncSetBadge(unreadCount) 이 API는 syncSetBadge()와 동일하지만
오류 처리를 위해 비어 있음Promise을 반환합니다.

asyncClearBadge() 앱의 배지를 비동기적으로 제거하고
오류 처리를 위해 비어 있습니다Promise.

동기화 설정 및 배지 지우기

import PWABadge from 'pwa-badge';

// Create an Instance
const badge = new PWABadge();

// Set Badge unreadCount
badge.syncSetBadge(1);

// Clear Badge unreadCount
badge.syncClearBadge();

결과:

맥OS

윈도우:

비동기 설정 및 배지 지우기

asyncSetBadge() 및 asyncClearBadge()는 빈promises을 반환할 수 있습니다.
오류 처리에 사용합니다.

import PWABadge from 'pwa-badge';

// Create an Instance
const badge = new PWABadge();

// Set Badge unreadCount
badge
  .asyncSetBadge(1)
  .then(() => {
    // Badge count has shown as well
  })
  .catch((e) => {
    // The Browser not supporting the Badge feature or something went wrong
  });

// Clear Badge unreadCount
badge
  .asyncClearBadge()
  .then(() => {
    // Badge count has disappeared
  })
  .catch((e) => {
    // The Browser not supporting the Badge feature or something went wrong
  });

Check Browser는 Badge API를 지원합니다.

TL;DRisSupported() 메서드 기능은 사용자에게 다음을 알리는 데 유용합니다.
이 기능은 Browser 또는 OS 및 pwa-badge 라이브러리에서 지원합니다.set 및 clear 배지는 안전하게 계산되며 사용을 피할 수 있습니다.isSupported() 또는 set 메서드를 호출하기 전에 clear.

import PWABadge from 'pwa-badge';

// Create an Instance
const badge = new PWABadge();

if (badge.isSupported()) {
  // Hoora!, Supports the Badge feature
} else {
  // Does not supports
}

나를 지원하려면 Github에서 별표 버튼을 클릭하고 이 게시물을 공유하고 마지막으로 Repo를 친구들에게 보내주세요.

Github 레포:
https://github.com/ali-master/pwa-badge