As long as the browser is open, the notification is usually displayed on the right side of screen, outside the browser and above everything else, which means that even if the webpage or the browser are not visible (e.g. they’re running in background or user is using another sofware), users will get to see the message.
Check out this demo to see the Web Notification API in action.
Before you send any notification, two things must be taken into account:
- Web Notifications API is compatible with all major browsers, i.e. Chrome, Firefox, Safari, Opera and Microsoft Edge - but it’s not compatible with the now outdated Internet Explorer. If support for Internet Explorer or any other old browser is required, you can use a simple alert to show the message when this API is not supported. For more information about browser compatibility see http://caniuse.com/#feat=notifications.
- In order to send notification, you have to ask user for permission (if it hans’t been granted yet). A method for requesting such permission is already included in this API.
Here is an example which uses Web Notifications API to show a notification when the “Test web notification” button is clicked: