Improving notifications and badging in Microsoft Edge

Microsoft

Notifications are an important part of the web, helping users stay up to date about what’s going on. Earlier this summer we announced a set of changes to make notification requests less distracting for users. This was just the first step, and we are working to reenable the full notification prompt for sites with desired notifications while maintaining quiet requests for others. Stay tuned for more updates on this soon.

 

Today, we’re excited to share more about the work we’re doing to ensure users never miss out on the notifications they care about.

 

Notifications when you need them, not just when the browser is open

Most desktop browsers only receive notifications while they’re running, causing users to miss out on important updates if the browser is closed. And when users do finally open their browser, they’re treated to a flood of incoming notifications that may no longer be relevant. The legacy version of Microsoft Edge addressed this issue with support for background notifications while the browser was closed, and we’re excited to share that the new version of Microsoft Edge now does as well.

 

Taking advantage of background notifications is easy, and any site which supports web push notifications using the web standard Push API, Notifications API, and web push protocol is already supported. Web developers don’t need to make any special changes to their website for users to receive notifications while Microsoft Edge is closed—it all just works. This feature is available now for anyone using Edge 85 on Windows 10 version 20H1 and above.

 

Notification badges on the taskbar/dock

While notification toasts—the little messages that appear with important alerts—are incredibly helpful when used properly, some types of notifications are better suited to a more lightweight update. For years, desktop and mobile operating systems have supported showing a badge with a notification count on surfaces like the Windows taskbar, macOS dock, and Android or iOS home screen, but this feature has always been limited to native apps. With the latest version of Microsoft Edge, PWAs and pinned sites can now display badges as well.

 

Badging.png

 

Basic support for badging PWAs has been available on Windows and Mac since Edge 81, as well as in other Chromium browsers. Developers can set and update badges using the Badging API from documents or service workers. Service workers allow users to receive notifications or badge updates when the site or PWA is not open. However, for privacy reasons, updating a badge via the service worker push event also requires that the site show a toast notification. Users must also opt into receiving notifications from the site. Learn more about how to enable badging on your site.

 

Unfortunately, one of the drawbacks of badging in most browsers is that badges can only be shown on the taskbar while the PWA is open. But with the recent changes we’ve made to Microsoft Edge, badges can now be shown on the taskbar at any time. This, combined with the background notification capability, removes the key limitations of badging and ensures that users can rely on taskbar badges regardless of whether the PWA or Microsoft Edge is running. We’ve also added support for badging pinned sites, bringing the feature to any web-powered experience on the taskbar. To take advantage of these improvements, users must be on Edge 85 (for PWAs) or Edge 87 (for pinned sites) with Windows 10 version 20H1 or higher.

 

Between background notifications when the browser is closed, more reliable badging, and support for badges on pinned sites, users can rest assured they’ll always receive important updates for their favorite sites in Microsoft Edge. And best of all, developers who are already using service workers for notifications and badging don’t have to do a thing.


If you haven’t enabled badging for your site, this article will help you get started. Users often find badging very useful, and our research shows that sites with badges see increased engagement overall. We’re so excited to see how developers will use these improvements to enhance the experience on the web.

 

William Devereux, Senior Program Manager, Microsoft Edge
Jungkee Song, Senior Program Manager, Microsoft Edge

32 Replies
Very happy see that you you've implemented this in Edge. been waiting for it for a long time.
me too another excellent integration with windows 10.
@William Devereux The best of the best! 🙂
Do you have any data about system resource usage with and without background notifications?

@William Devereux Now suppose I've installed the discord site as an app.
How do I enable this badge thing to show up on it?

@William Devereux Very nice and excellent news!

 

I am assuming all Microsoft services like Outlook.com will support this from next week when Edge 87 will launch in the Stable Channel!?

@R7anubis Discord will have to implement this in their site. It is not something the consumer configures.

@William Devereux Seems complicated to implement this on my website, hopefully, there's an easier way.

@Kam 


@Kam wrote:
@William DevereuxSeems complicated to implement this on my website, hopefully, there's an easier way.

 just need to know JavaScript.

Has anyone succeeded in getting notification badges on Windows taskbar yet?

if so please share your Windows version, Edge version and website. thanks

@HotCakeX Not me. I have Outlook installed as a web app and notifications are enabled, but still don't see it.

@HotCakeX @Kam, thank you for trying out with the Badging experience on Edge! In order for badging to work, the site's developer needs to support it using the badging standard. You can use this demo (Badging API Demo (badging-api.glitch.me)) to try out the behavior for yourself. This article also has more details on how the API works, including sample code (Badging for app icons (web.dev)). This demo should work on Edge 81 (and Chrome 81) and above. For background trigger though, you should have web push implementation on your site, and the user needs Windows 10 20H1 version or above.

 

Thanks!

Jungkee Song

PM, Microsoft Edge

Yes, thanks for all of the excitement about these features! I wanted to give everyone a heads up that we've discovered an issue with badging pinned sites on 20H2. If there are open tabs associated with the pinned site on the taskbar, the badge may not be displayed. Closing the tabs, however, will make the badge appear. We're working on a fix for this which will be rolled out in an upcoming OS patch.

No, cumulative updates.

@Jungkee_Song Any chance we can get an update on this one https://techcommunity.microsoft.com/t5/discussions/potential-bug-retrieving-service-worker-notificat... We just ran into it today, and figure it's a pretty bad bug as it can affect notifications. Essentially, calling "getNotifications()" (https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/getNotifications) in the service worker in Edge on macOS just hangs on the promise, and never resolves. For us, this results in our service worker notifications never being sent as they're created in the code following that call. It works fine in Edge on Windows.

Microsoft will have to add code to Outlook to trigger badging in the icon
yes, works like a champ, once you add the code to your application.