# Implement Badging API
**URL:** https://meta.discourse.org/t/implement-badging-api/111631
**Category:** Feature
**Tags:** rfc, pwa
**Created:** [March 14, 2019, 10:12pm UTC](https://meta.discourse.org/t/implement-badging-api/111631 "2019-03-14T22:12:10Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [March 14, 2019, 10:12pm UTC](https://meta.discourse.org/t/implement-badging-api/111631/1 "2019-03-14T22:12:10Z")
There is a new web API that allows **installed** web apps to show a icon to warn the user about pending notifications.
Explainer: [badging/explainer.md at main · w3c/badging · GitHub](https://github.com/WICG/badging/blob/master/explainer.md)
Currently, this is only available for websites who sign up to the trial, and only on Windows and Mac OS using Google Chrome. (Meta has this enabled on Light and Dark Themes).
This is how the looks on Windows:
Before a notification
After a notification
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [March 14, 2019, 11:04pm UTC](https://meta.discourse.org/t/implement-badging-api/111631/2 "2019-03-14T23:04:21Z")
Here’s how to test this in Windows on Chrome (latest version 73, just released today):
- go to the three dots menu at the upper right in Chrome
- select More Tools → Create Shortcut
- tick the “Open as window” checkbox
- select Create
Like so
I’ll try it out .. it works!
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [March 14, 2019, 11:15pm UTC](https://meta.discourse.org/t/implement-badging-api/111631/3 "2019-03-14T23:15:26Z")
This is very cool! On mac, it’s the same process to install the app. Then when you launch it you get a super minimal PWA window:
And the notification badge in the dock:
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 19, 2019, 4:17am UTC](https://meta.discourse.org/t/implement-badging-api/111631/4 "2019-03-19T04:17:45Z")
The huge omission here is that there is no back/forward or reload button. Kind of wish we had some minimal responsive PWA panel that we add when we detect PWA cause you can figure this out this is going on from JavaScript.
Step 1 here of course is a theme component.
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [March 19, 2019, 2:37pm UTC](https://meta.discourse.org/t/implement-badging-api/111631/5 "2019-03-19T14:37:04Z")
You can also detect it from CSS, here is one thing I added as a theme-component to the Dark Theme here in Meta:
```scss
@media all and (display-mode: standalone) {
//blink-based browsers (don't work on safari, which exposes a JS only API for this)
::-webkit-scrollbar {
background: $secondary;
}
::-webkit-scrollbar-thumb {
background: $header_primary-medium;
}
::-webkit-scrollbar-corner {
background: $secondary;
}
//firefox
body {
scrollbar-color: $header_primary-medium $secondary;
}
}
```
---
### Author:  [@anon82467725](https://meta.discourse.org/u/anon82467725)
#### Post date: [March 16, 2021, 7:27pm UTC](https://meta.discourse.org/t/implement-badging-api/111631/6 "2021-03-16T19:27:00Z")
Another day, another feature! As with any new PWA feature, I wonder how well it works with Discourse… 🤔
> **[Chrome OS 91 will add notification badges for web apps](https://chromeunboxed.com/chrome-os-pwa-notification-badges-web-apps)**
>
> Many would agree, yours truly included, that Google is very close to perfecting the Android notification system. It has been the envy of many on a different mobile OS (ahem, a fruit-themed one perhaps) and yet, Google has not ported it to its other...
I’m excited to try it out. Badge notifications for the Discourse PWA in Chrome OS sounds absolutely amazing!
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [March 17, 2021, 2:03am UTC](https://meta.discourse.org/t/implement-badging-api/111631/7 "2021-03-17T02:03:21Z")
We added support for the badging API back in early 2019, but we don’t call it when the app is closed at the moment as it wasn’t supported back then.
---
### Author:  [@anon82467725](https://meta.discourse.org/u/anon82467725)
#### Post date: [March 17, 2021, 12:00pm UTC](https://meta.discourse.org/t/implement-badging-api/111631/8 "2021-03-17T12:00:25Z")
> [@Falco](#):
>
> we don’t call it when the app is closed at the moment as it wasn’t supported back then.
And that is changing now, right?
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [February 17, 2023, 3:44pm UTC](https://meta.discourse.org/t/implement-badging-api/111631/9 "2023-02-17T15:44:18Z")
Happy to report that the work we did here also gives us badging on latest iOS
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [April 2, 2024, 1:09pm UTC](https://meta.discourse.org/t/implement-badging-api/111631/10 "2024-04-02T13:09:45Z")
Falco, is there a possibility there could be a flashing or change of background colour behaviour if the notification value changes? (Cancelled by an open click) I’m not familiar with the API here.
---
### Author:  [@Tris20](https://meta.discourse.org/u/Tris20)
#### Post date: [April 2, 2024, 1:25pm UTC](https://meta.discourse.org/t/implement-badging-api/111631/11 "2024-04-02T13:25:58Z")
> [@merefield](#):
>
> Falco, is there a possibility there could be a flashing or change of background colour behaviour if the notification value changes?
Would love this also. Particularly useful in cases where the Branding Icon is dark and the notificaiton doesn’t show up so well.
As much as I dislike MSTeams, the gentle orange glow is ok as an example. Something like that would be a very nice touch.
### More than just Chrome:
A quick update on the supported browsers:
 Brave: Works the same as Chrome
 Firefox: Requires an [add-on](https://addons.mozilla.org/en-US/firefox/addon/pwas-for-firefox/)
 Edge: Works the same as chrome, and it offers you the option to auto-start the app when you install it:
 To autostart the app in chrome
1. Click the three dots
2. Click App-Info
3. Click settings (Einstellung in German)
4. Configure accordingly. In this case “App beim Anmelden started” is the option we ware looking for