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:
See this example by Microsoft Edge Docs on CodePen.
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.