notifier-for-github icon indicating copy to clipboard operation
notifier-for-github copied to clipboard

Published 20 hours ago • verified publisher icon sindresorhus

Use Badging API if available to update the app badge

Open karlhorky opened this issue 4 years ago • 5 comments

Hi there, thanks for this extension, really cool!

Using the Badging API (spec, shipped to stable Chrome in April 2020), navigator.setAppBadge(notificationsCount) and navigator.clearAppBadge() can set and clear the application badge that shows up with PWA and pseudo-PWA windows (create a pseudo-PWA with three dots menu -> More Tools -> Create Shortcut... -> Open as window).

On macOS this looks like this in the Dock:

Screen Shot 2020-12-08 at 15 11 36

karlhorky avatar Dec 15 '20 15:12 karlhorky

Sure, but you should send a feature request to GitHub too. This should ideally be implemented by them.

sindresorhus avatar Dec 16 '20 10:12 sindresorhus

Sure, but you should send a feature request to GitHub too. This should ideally be implemented by them.

Good idea! I will do this. I guess for this request, I can also mention the "empty" badge state with navigator.setAppBadge() (no argument) - since they may not have the number of notifications everywhere yet:

Screen Shot 2020-12-16 at 11 16 08

karlhorky avatar Dec 16 '20 10:12 karlhorky

Submitted a personal ticket on https://support.github.com/ just now

karlhorky avatar Dec 21 '20 16:12 karlhorky

For display of the badge on tabs (non-PWA), there is also navigator.setClientBadge(), but this is not implemented in any user agents, as far as I can tell.

An alternative here would be to dynamically recreate the favicon with a badge via canvas. Quick and dirty example:

https://gist.github.com/karlhorky/65bb8496f151d3248d9eed26cc24e6f1

screenshot

karlhorky avatar Apr 16 '21 15:04 karlhorky

I've made the canvas favicon generator into a userscript here: https://github.com/karlhorky/userscripts/blob/main/github-favicon-notification-badge.user.js

karlhorky avatar Apr 16 '21 17:04 karlhorky

I'm not sure why this is here, this should ideally be in https://github.com/refined-github/refined-github.

We don't have access to, and will not have access to the DOM. Even then, the badging API only seems to work if the page is installed as a PWA.

notlmn avatar Feb 06 '23 16:02 notlmn

I'm not sure why this is here, this should ideally be in refined-github/refined-github.

I think @sindresorhus said this is "outside the scope of refined-github" here, didn't he? https://github.com/refined-github/refined-github/issues/1546

We don't have access to, and will not have access to the DOM

Why is there no access to the DOM?

Even then, the badging API only seems to work if the page is installed as a PWA.

Yeah, maybe it would be an idea to also include the favicon update approach? The icon in the favicon has proven very useful.

karlhorky avatar Feb 06 '23 17:02 karlhorky