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]

很高兴地报告，我们在这里所做的工作也能在最新的 iOS 上获得徽章

[merefield (Robert)]

Falco，如果通知值发生变化，是否有可能出现闪烁或背景颜色变化的行为？（由打开的点击取消）我对这里的 API 不熟悉。

[Tris20 (Tristan)]

@merefield

Falco，当通知值更改时，是否有可能出现闪烁或背景颜色更改的行为？

我也很希望有这个功能。尤其是在品牌图标颜色较深，导致通知不太明显的情况下，这个功能会非常有用。

尽管我不喜欢 MSTeams，但它柔和的橙色光晕可以作为一个例子。类似这样的功能将是一个非常好的补充。

不仅仅是 Chrome：

关于支持的浏览器，快速更新一下：

Brave：与 Chrome 的工作方式相同

Firefox：需要一个 附加组件

Edge：与 Chrome 的工作方式相同，并且它为您提供了在安装时自动启动应用程序的选项：

在 Chrome 中自动启动应用程序

1. 点击三个点

2. 点击应用程序信息
   

   

3. 点击设置 (德语为 Einstellung)
   

   

4. 进行相应配置。在这种情况下，“App beim Anmelden started”（登录时启动应用程序）是我们正在寻找的选项