# badgin

> Badgin makes it easy to subtly notify the user that there is some new activity that might require their attention, or it can be used to indicate a small amount of information, such as an unread count.

Latest version **1.2.3** (published 2021-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install badgin
pnpm add badgin
yarn add badgin
bun add badgin
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2021-10-19 |
| First published | 2019-09-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Julian Hundeloh |
| Maintainers | jaulz |

## Links

- npm: https://www.npmjs.com/package/badgin
- Repository: https://github.com/jaulz/badgin
- Issues: https://github.com/jaulz/badgin/issues
- npm.io page: https://npm.io/package/badgin

## Recent versions

- 1.2.3 (latest) — 2021-10-19
- 1.2.2 — 2020-11-09
- 1.2.1 — 2020-11-04
- 1.2.0 — 2020-10-04
- 1.1.9 — 2020-10-04
- 1.1.8 — 2020-06-15
- 1.1.7 — 2020-06-14
- 1.1.6 — 2020-06-14
- 1.1.4 — 2020-02-29
- 1.1.5 — 2020-01-24
- 1.1.3 — 2020-01-24
- 1.1.2 — 2019-12-03
- 1.1.1 — 2019-12-03
- 1.1.0 — 2019-12-03
- 1.0.1 — 2019-12-02
- … 1 more at https://npm.io/package/badgin/versions

## README

# Badgin

The [Badging API](https://web.dev/badging-api/) is a new web platform API that allows installed web apps to set an application-wide badge, shown in an operating-system-specific place associated with the application (such as the shelf or home screen). The Badging API works on Windows, and macOS, in Chrome 81 or later. It has also been confirmed to work on Edge 84 or later. Support for Chrome OS is in development and will be available in a future release of Chrome. On Android, the Badging API is not supported. Instead, Android automatically shows a badge on app icon for the installed web app when there is an unread notification, just as for Android apps. Since this API is not available everywhere, `badgin` safely falls back to alternatives.

## via badge

Currently, the native badge is only displayed if you install the web application to your home screen (view [prerequisites](https://developers.google.com/web/fundamentals/app-install-banners)). The screenshot shows the application in the dock of macOS.

![](https://github.com/jaulz/badgin/raw/master/assets/screenshots/standalone_osx.png)

## via favicon

If the native badge is not available, the favicon will be used and a small badge will be added.

![](https://github.com/jaulz/badgin/raw/master/assets/screenshots/favicon.png)

## via title

If the favicon is not available, the badge will be added as a prefix to the title.

![](https://github.com/jaulz/badgin/raw/master/assets/screenshots/title.png)

## Demo

You can find a demo at https://jaulz.github.io/badgin/ where you can see the different options. If you want to see the native badge, you need to install the app to your home screen (check out the plus icon in the address bar).

## Installation

The module can be installed by running:

```
yarn add --save badgin
```

## Usage

Just use the library as following:

```js
import badgin from 'badgin'

badgin.set(1) // set value
badgin.set() // set indicator only
badgin.clear()
```

### Options

The following options can be used:

```js
{
  method: 'Badging' | 'Favicon' | 'Title'
  favicon: {
    backgroundColor: string = '#424242'
    color: string = '#ffffff'
    indicator: string = '!'
    radius: number = 3
    size: number = 7
    horizontalMargin: number = 0
    verticalMargin: number = 0
    horizontalPadding: number = 1
    verticalPadding: number = 1
  }
  title: {
    indicator: string = '!'
  }
}
```

And you can use it like this:

```js
badgin.set(1, {
  favicon: {
    width: 9,
    background: '#549A2F',
  },
})
```

## License / Credits

MIT

This is a refactored fork of the original Tinycon library, Tinycon is released under the MIT license. Tinycon was inspired by [Notificon](https://github.com/makeable/Notificon).

---
_Source: https://npm.io/package/badgin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._