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

Ещё один день — ещё одна функция! Как и с любым новым функционалом PWA, я задумываюсь, насколько хорошо это будет работать с Discourse…

Chrome OS 91 will add notification badges for web apps

Не могу дождаться, чтобы попробовать. Уведомления с бейджами для PWA Discourse в Chrome OS звучат просто потрясающе!

[Falco]

Мы добавили поддержку API бейджей ещё в начале 2019 года, но в данный момент мы не вызываем его, когда приложение закрыто, так как тогда он ещё не поддерживался.

[anon82467725]

@Falco

Мы не вызывали это в момент закрытия приложения, так как ранее такая поддержка отсутствовала.

И сейчас это меняется, верно?

[Falco]

Рады сообщить, что проделанная нами работа также позволяет получить значок на последней версии iOS

[merefield (Robert)]

Фалько, есть ли вероятность, что при изменении значения уведомления может происходить мигание или изменение цвета фона? (Отменено при открытом клике) Я не знаком с этим API.

[Tris20 (Tristan)]

@Robert

Фалко, есть ли возможность добавить мерцание или изменение цвета фона, если значение уведомления меняется?

Мне тоже это очень пригодилось бы. Особенно полезно в случаях, когда иконка бренда тёмная, и уведомление плохо заметно.

Хотя я не люблю MSTeams, мягкое оранжевое свечение — хороший пример. Что-то подобное стало бы отличным дополнением.

Больше, чем просто Chrome:

Краткое обновление о поддерживаемых браузерах:

Brave: Работает так же, как Chrome

Firefox: Требует расширение

Edge: Работает так же, как Chrome, и предлагает опцию автозапуска приложения при установке:

Чтобы включить автозапуск приложения в Chrome:

1. Нажмите на три точки

2. Выберите «Информация о приложении»
   

   

3. Нажмите «Настройки» (в немецкой версии — «Einstellung»)
   

   

4. Настройте соответствующим образом. В данном случае опция, которую мы ищем, — «Запускать приложение при входе в систему»