Implement Badging API

[Falco]

There is a new web API that allows installed web apps to show a icon to warn the user about pending notifications.

Explainer: 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

[codinghorror (Jeff Atwood)]

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!

[david (David Taylor)]

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:

[sam (Sam Saffron)]

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.

[Falco]

You can also detect it from CSS, here is one thing I added as a theme-component to the Dark Theme here in Meta:

@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;
    }
}

[anon82467725]

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

I’m excited to try it out. Badge notifications for the Discourse PWA in Chrome OS sounds absolutely amazing!

[Falco]

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.

[anon82467725]

@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?

[Falco]

Ich freue mich, berichten zu können, dass die hier geleistete Arbeit auch auf dem neuesten iOS zu Badges führt

[merefield (Robert)]

Falco, gibt es eine Möglichkeit, dass es ein Aufleuchten oder eine Änderung der Hintergrundfarbe gibt, wenn sich der Benachrichtigungswert ändert? (Abgebrochen durch einen offenen Klick) Ich bin mit der API hier nicht vertraut.

[Tris20 (Tristan)]

@merefield

Falco, gibt es eine Möglichkeit, dass es ein Flackern oder eine Änderung der Hintergrundfarbe gibt, wenn sich der Benachrichtigungswert ändert?

Das würde ich auch sehr begrüßen. Besonders nützlich in Fällen, in denen das Branding-Symbol dunkel ist und die Benachrichtigung nicht gut sichtbar ist.

So sehr ich MSTeams auch verabscheue, das sanfte orangefarbene Leuchten ist als Beispiel in Ordnung. So etwas wäre eine sehr nette Geste.

Mehr als nur Chrome:

Ein kurzes Update zu den unterstützten Browsern:

Brave: Funktioniert genauso wie Chrome

Firefox: Benötigt ein Add-on

Edge: Funktioniert genauso wie Chrome und bietet die Option, die App beim Installieren automatisch zu starten:

Um die App in Chrome automatisch zu starten

1. Klicken Sie auf die drei Punkte

2. Klicken Sie auf App-Info
   

   

3. Klicken Sie auf Einstellungen
   

   

4. Konfigurieren Sie entsprechend. In diesem Fall ist „App beim Anmelden starten“ die Option, nach der wir suchen.