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와 얼마나 잘 호환되는지 궁금해지죠…
https://chromeunboxed.com/chrome-os-pwa-notification-badges-web-apps
직접 써보고 싶네요. Chrome OS에서 Discourse PWA에 배지 알림을 지원한다는 건 정말 놀랍습니다!

[Falco]

2019년 초에 배지(badging) API에 대한 지원을 추가했지만, 당시에는 앱이 닫힌 상태에서의 호출이 지원되지 않았기 때문에 현재 해당 시점에 API를 호출하지 않고 있습니다.

[anon82467725]

@Falco

앱이 닫혀 있는 시점에는 당시 해당 기능이 지원되지 않아서 호출하지 않았습니다.

그리고 지금 그게 바뀌고 있는 거죠?

[Falco]

여기서 진행한 작업 덕분에 최신 iOS에서도 배지가 정상적으로 표시된다는 소식을 기쁘게 전합니다.

[merefield (Robert)]

Falco, 알림 값이 변경될 때 배경색이 깜빡이거나 변경되는 동작이 가능할까요? (열린 클릭으로 취소됨) 저는 이 API에 익숙하지 않습니다.

[Tris20 (Tristan)]

@merefield

Falco, 알림 값이 변경될 때 깜빡임이나 배경색 변경과 같은 동작이 가능할까요?

저도 이 기능이 있었으면 좋겠습니다. 특히 브랜드 아이콘이 어두운 경우 알림이 잘 보이지 않는 상황에서 매우 유용할 것입니다.

MSTeams를 별로 좋아하지는 않지만, 은은한 주황색 빛은 좋은 예시가 될 수 있습니다. 그런 스타일의 기능이 있다면 아주 멋진 기능이 될 것입니다.

Chrome을 넘어:

지원 브라우저에 대한 간단한 업데이트입니다:

Brave: Chrome과 동일하게 작동합니다

Firefox: 확장 프로그램이 필요합니다

Edge: Chrome과 동일하게 작동하며, 설치 시 앱을 자동 시작하도록 설정할 수 있는 옵션을 제공합니다:

Chrome에서 앱을 자동 시작하려면

1. 세 개의 점을 클릭합니다

2. 앱 정보(App-Info)를 클릭합니다
   

3. 설정(독일어로는 Einstellung)을 클릭합니다
   

   

4. 적절하게 설정합니다. 이 경우 "로그인 시 앱 시작"이 우리가 찾고 있는 옵션입니다