May 16, 2016 10:00 am

Web Notifications in Microsoft Edge

Starting with the most recent Windows Insider Preview release (build 14.14342), Web Notifications are enabled by default in Microsoft Edge on Windows 10 PCs and tablets. This feature will be available to all Microsoft Edge customers in EdgeHTML 14, coming this summer with the Windows 10 Anniversary Update.

Web Notifications allow sites to display notifications to alert users outside the context of the webpage and the browser, keeping users informed of new messages or alerts and allowing sites to improve user engagement. Web Notifications in Microsoft Edge are fully integrated with the notification platform and Action Center in Windows 10, providing a consistent experience with other apps across the system and easy controls over permissions and Quiet Hours.

Sites are already beginning to support Web Notifications today, and we look forward to seeing this API become more popular. The implementation in Microsoft Edge is based on the W3C Web Notifications specification, now supported broadly across modern desktop browsers. Each notification is associated with a title, a notification body, a language setting, a text rendering direction attribute, a tag attribute, an icon URL, and the webpage origin. Microsoft Edge also supports the event model as defined by the W3C spec, including all the show, click, close, and error events. Notifications can only be displayed if the user has granted permission to the specific domain sending the notification.

Implementation details

Microsoft Edge calls the Windows Notification Platform API to pass the notification from the webpage to the Notification Platform, which will in turn render and manage notifications in a consistent way across all Windows apps.

Screen capture showing a toast notification from Skype for Web in Microsoft Edge

Toast notification from web.skype.com

We strongly recommend that web developers should include an icon in each notification. The icon should provide value to the specific notification. For example, a profile photo can help users quickly identify the source or the sender of the notification message. If an icon is not provided, Microsoft Edge will apply a default icon.

When the user clicks on an on-screen notification, Microsoft Edge brings the corresponding window and tab into focus, and the webpage will receive the corresponding click event and can update accordingly. On-screen notifications that are not clicked or not closed immediately by the user will be minimized to the Windows Action Center, where they are grouped under the “Microsoft Edge” heading in chronological order. To ensure notifications are passed into the Action Center, you can avoid explicitly calling the close() method on the notification object.

When the user clicks on a notification in the Action Center, Microsoft Edge will launch a tab and navigate to the corresponding origin of the notification. Since the notifications are not persistent, no event is fired to the webpage.  When a notification initially originated from an iframe, Microsoft Edge will open a tab based on the domain of the top-level parent page.

Permissions

When a user visits a website that uses the Web Notification API, Microsoft Edge will prompt the user for permission to show notifications:

Screen capture showing a dialog asking the user to confirm whether or not to allow Web Notifications for a domain.

Once granted permission, the website will be allowed to send desktop notifications – in the Skype example shown above, the site will send notifications for each incoming call and each incoming IM. These settings persist when visiting the same website domain again – users can manage permissions per domain at any time under the Advanced Settings menu.

Screen capture showing per-domain notification controls in Edge "Advanced Settings"

“Manage notifications” settings in Microsoft Edge

Notifications can be disabled for a domain or for all of Microsoft Edge in Action Center simply by right-clicking on a notification.

Screen capture showing Action Center open with a web notification from Microsoft Edge. The context menu is open with options to turn off notifications for the site, go to notification settings, or turn off notifications for the app.

Sample notification in Action Center and options to change notification settings

Notifications that originate from sites in an InPrivate window will not be stored in Action Center, and permission settings for those domains will not be saved after each session.

What’s next

In the future, we plan to evolve this implementation with additional features to further improve user control and notification fidelity. In a later release, we plan to group notifications in the Action Center based on website domains, to preserve the site context of each notification.

We are also collecting telemetry in this release to better understand how users interact with notifications; for example, we currently save notifications in the Action Center for up to seven days, but will continue to evaluate the optimal duration so the Action Center doesn’t get crowded.

Finally, as we continue to prototype support for Service Workers and Push API in the EdgeHTML platform, we’re investigating the potential for notifications when the browser is not active or the origin webpage is not loaded. This will also enable notification support on Windows 10 Mobile devices and enable persistent notifications in the Action Center, so that when clicked, the corresponding Service Worker can be invoked to take action.

We will share more details on these changes as we make progress along the way and our prototypes continue to evolve. As always, you can track the status of EdgeHTML platform features under consideration on Platform Status, and we look forward to your feedback!

― Shijun Sun, Principal Program Manager, Microsoft Edge
― Adam Barrus, Senior Program Manager, Microsoft Edge

Join the conversation

  1. Wow, Thanks a lot. Good work done by you guyz.
    Please do little favor -:
    – Add downloading speed into downloading section with total size of file, and currently mb downlaoding, and same add into notification centre – live downloaidng ( like available in android notification centre and other browser in Windows pc

    Please also add ability to move favorite bookmark from one folder to another folder by pressing mouse from one place to another.

    • Updating will not help – Service Worker and Web Push are not yet supported. The post only mentions that the team is prototyping.
      You can see the status of the various features at –
      https://status.modern.ie/

  2. Please keep up the good work with Edge especially with background processing through ServiceWorkers and the Push API. (NB: Google Chrome has formally abandoned the GeoFence API so please help in delivering background GeoLocation through ServiceWorker.subscription.TravelManager(options) as well!)

    Where we *desperately* need Microsoft’s input is in correcting the misconception current Push API proposal that “Topics” are “Collapse Keys”. MS collapsing all notifications is neither here nor there, what is important is Azure Notification Hubs, Google/Firebase Cloud Messaging, and Apple Push Notification service, *all* support broadcast notifications. This essential functionality is being de-scoped and dumbed-down from the standard due to the restrictions of Mozilla’s second rate PS offering “Autopush” 🙁

    I’m sure your colleague Brian Raymor would welcome all the help he can get over at: –
    https://github.com/webpush-wg/webpush-protocol/issues/9

    For broadcast notifications, any and all client mapping is undertaken only by the Push Notification Service. The application server is unaware of potential clients. (Except for having previously, via a mechanism such as REST, communicated the the topic encryption keys necessary to read the “body/data/payload” JSON tokens)

    PLEASE help!

    Cheers Richard Maher

  3. FWIW, the reason I stay with Firefox is because it automatically syncs my bookmarks (favorites) among all my devices. See if there anything you can do for Edge to somehow coexist with Firefox in that environment.

  4. I think it’s essential to have the notifications working even without the browser running. This would be especially useful for the mobile Windows which lacks many indispensable native apps.

  5. This seems like a good thing on the surface, and I like being able to send notifications from websites, but, knowing humans the way I do, I can see this becoming a vehicle for advertising abuse, and users will disallow notifications from Edge, preventing the benefits that could be gained from proper use. By proper use, I mean things like notifying a user when a lengthy process initiated on the web server has completed.

  6. Using the current version of Edge (38.14393.0.0) I’m seeing the same notification multiple times with unique ID in the “tag” property and multiple tabs open (ie, 5 tabs, 5 identical notifications). Anyone else seen this?

  7. Notification Click behavior for Edge not working as expected

    If the Edge browser is behind some other applications or other windows, the Originated Edge window is not taken to top of all by default. Also tried to bind a click event for the notification as shown below. But still no success. Code works well in Chrome. Any help is appreciated.

    Notification.requestPermission(function(status){
    var n = new Notification(”, {body: ‘Hi’,requireInteraction: true});
    n.onclick = function(event) {
    parent.focus();
    window.focus();
    window.open().close();
    this.close();
    };
    });

    System Details:
    Edition: Windows 10 Pro
    Version 1703
    OS Build: 15063.296

    Microsoft Edge 40.15063.0.0
    Microsoft Edge HTML 15.15063