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

試してみるのが楽しみです。Chrome OS上のDiscourse PWAにバッジ通知が追加されるなんて、まさに最高に素晴らしいですね！

[Falco]

2019 年初頭に Badging API のサポートを追加しましたが、当時はアプリが閉じられた状態での呼び出しがサポートされていなかったため、現在もその状態では呼び出しておりません。

[anon82467725]

@Falco

当時はサポートされていなかったため、アプリが終了した際には呼び出しを行っていませんでした。

それは現在変更される予定ですね？

[Falco]

iOSの最新バージョンでも、ここで行った作業によりバッジ表示ができるようになりました。

[merefield (Robert)]

Falcoさん、通知の値が変更された場合に、背景色が点滅したり変更されたりする可能性はありますか？（オープンクリックでキャンセルされました）ここのAPIには詳しくありません。

[Tris20 (Tristan)]

@merefield

Falcoさん、通知の値が変わったときに点滅したり、背景色が変わったりする可能性はありますか？

これもぜひ欲しいです。特に、ブランディングアイコンが暗くて通知がよく見えない場合に役立ちます。

MSTeamsはあまり好きではありませんが、穏やかなオレンジ色の光は例として悪くありません。そのようなものがあれば、非常に素晴らしいでしょう。

Chromeだけではない：

サポートされているブラウザに関する簡単なアップデート：

Brave：Chromeと同じように動作します

Firefox：アドオンが必要です

Edge：Chromeと同じように動作し、インストール時にアプリを自動起動するオプションが提供されます：

Chromeでアプリを自動起動するには

1. 3つの点をクリックします

2. アプリ情報（App-Info）をクリックします
   

   

3. 設定（ドイツ語ではEinstellung）をクリックします
   

   

4. 必要に応じて構成します。この場合、「App beim Anmelden started」（ログイン時にアプリを起動する）が探しているオプションです