Implémenter l'API Badging

[Falco]

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

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]

Encore une journée, encore une fonctionnalité ! Comme pour toute nouvelle fonctionnalité PWA, je me demande comment elle fonctionnera avec Discourse…

Chrome OS 91 will add notification badges for web apps

J’ai hâte de l’essayer. Les notifications avec badge pour la PWA de Discourse sous Chrome OS semblent absolument géniales !

[Falco]

Nous avons pris en charge l’API de badge au début de 2019, mais nous ne l’appelons pas lorsque l’application est fermée pour le moment, car elle n’était pas prise en charge à l’époque.

[anon82467725]

@Falco

nous ne l’appelons pas lorsque l’application est fermée pour le moment, car cela n’était pas pris en charge à l’époque.

Et cela change maintenant, n’est-ce pas ?

[Falco]

Heureux de signaler que le travail que nous avons effectué ici nous donne également des badges sur le dernier iOS

[merefield (Robert)]

Falco, y a-t-il une possibilité qu’il y ait un comportement de clignotement ou de changement de couleur d’arrière-plan si la valeur de la notification change ? (Annulé par un clic ouvert) Je ne connais pas l’API ici.

[Tris20 (Tristan)]

@merefield

Falco, y a-t-il une possibilité qu’il y ait un comportement de clignotement ou de changement de couleur d’arrière-plan si la valeur de notification change ?

J’adorerais ça aussi. Particulièrement utile dans les cas où l’icône de marque est sombre et que la notification n’est pas très visible.

Autant je n’aime pas MSTeams, autant la douce lueur orange est acceptable comme exemple. Quelque chose comme ça serait une très belle touche.

Plus que Chrome :

Une rapide mise à jour sur les navigateurs pris en charge :

Brave : Fonctionne de la même manière que Chrome

Firefox : Nécessite un module complémentaire

Edge : Fonctionne de la même manière que Chrome, et il vous offre la possibilité de démarrer automatiquement l’application lors de son installation :

Pour démarrer automatiquement l’application dans Chrome

1. Cliquez sur les trois points

2. Cliquez sur Informations sur l’application
   

   

3. Cliquez sur Paramètres (Einstellung en allemand)
   

   

4. Configurez en conséquence. Dans ce cas, “App beim Anmelden started” est l’option que nous recherchons