Web Notifications API

The Web Notifications API allows websites to send users notifications outside the context of a webpage within the Microsoft Edge browser. An example of this feature in action would be with a messaging application like Skype. When a user would receive a new message, a notification would appear on their desktop, alerting them of the message. Web Notifications are fully integrated with the Notification Platform and the Action Center within Windows 10.

Creating a notification

The CodePen below creates a mock Skype notification by making a Notification object with the title, icon, and body options set:

It is strongly recommended that an icon be specified for each notification. This not only improves a notification from a UI point of view, but also helps alert users of where the notification is being sent from.

Watch the video below for a walkthrough on creating a web notification and to see it's behavior within Windows 10!

Notification properties

Notifications can be set with the following options:

Property Description
body The body text of the notification.
dir The direction of the notification's text.
icon The notification's URL that is used for its icon.
lang The language of the notification.
permission The current notification display permission the user has granted for the current origin.
tag The tag of the notification.
title The title of the notification.

Notification events

The following events are used with the Notification object:

Event Description
onclick Fires when a notification is clicked by the user.
onclose Fires when a notification is closed by the user or an auto timeout.
onerror Fires when an error occurs while handling a notification.
onshow Fires when a notification is displayed.

Notification methods

The following methods are used with the Notification object:

Method Description
close Closes a displayed notification.
requestPermission Requests permission from the user to allow notifications to be displayed by the current origin.

Notification permissions

Microsoft Edge allows users to manage notifications permissions for each specific website domain. It's up to the user to either select "Yes" or "No" when asked by the domain to let it show notifications. The requestPermission method is used to signal the permission state as either granted, denied, or default. A value of default indicates that the user hasn't made a decision, which is seen as the equivalent of denied.

API reference

Web Notifications


Web Notifications