Browser Push Notification
Have you ever wonder how does Facebook or Gmail get their site to push notifications to your computer? It’s a nice feature when you’re developing a web application that constantly pools data and needs to notify your user there is something new on the site. We will create this kind of push notification with this guide.
Prerequisites
- Visual Studio Code
- Visual Studio Code Extension — Live Server
Before we begin
There is only one problem with the push notification, it does not work with IE. All other major browsers such as Chrome, Firefox, Edge, Opera and Safari are compatible and it should work as expected. Not all features are available on mobile browsers therefore I would say this is only useful for Desktop Push Notification.
To understand how Notification API works head over to the Notification API documentation.
Further in the guide, I will explain why the Visual Studio Code Extension Live Server is required.
With that out of the way.
Let’s start coding
The HTML
This is going to be a plain and simple HTML as the focus of this guide is just the push notification.
There is no explanation needed with the above HTML.
The JavaScript
We are going to add the below JavaScript to the head section of the HTML
There are 2 parts to the script above. The first part would be to check if your user has enabled the notification for your site. Yes, before the notification can be pushed, your user will first have to allow it. And once they allow it, the notification will be pushed.
document.addEventListener("DOMContentLoaded"...) basically tells your browser to listen to the event when all DOM is loaded. This is somewhat similar to Jquery’s $(document).ready(function(){..... , for more detail go to this link. There are 3 possible results from the permission check and they are
denied— The user refuses to have notifications displayedgranted— The user accepts having notifications displayed.default— The user choice is unknown and therefore the browser will act as if the value were denied.
The above is extracted from Mozilla Developer Guide on Notification API
In the above case, when the permission is any other than granted the API will request for the permission hence calling the function Notification.requestPermission() and this will trigger the permission alert.
Below is an example of a notification from the Chrome browser.
The second part of the script is the notification itself. As I mention earlier IE does not support push notifications therefore we need to let our users know. This is what line 6 to 11 from the above is trying to do. When the Notification API is not available we simply alert the user. Alert may not be the best way when it comes to real implementation and this is just an example for educational purposes.
Line 13 is there just in case for any reason the event listener did not get triggered and when we try to push the notification, will make sure and check if the notification is allowed.
When the notification is allowed, we then can configure the notification itself which is line 15 to line 18. The syntax to create and push the notification is as simple as new Notification(title, options) . Here we are giving our notification title “New Message”. There are several options available, you can refer to this link for detail on each option. In this example, we are just providing an icon and a body message to the notification.
The Notification API support 4 event handler onclick ,onclose , onerror and onshow . In this example at line 20, we wanted to trigger some function when the user clicks on the notification and the API would focus on the browser and the tab that triggers the notification and then later close the notification.
There are many creative ways you can decide to do with your website during each event of the notification, for example, you can trigger the page to reload when a user clicks it or navigate to another page. You will have access to window object to perform the various operations.
The Body
For this example, we will add a button to trigger the notification. Add <button onclick="notifyMe()">Notify me!</button> to the body. When the button is clicked, the function notifyMe() will be executed.
The Final HTML
The final HTML would look like the below
Time to Test It Out
Make sure you have saved the HTML file and let’s view the HTML file that we have created.
On a Windows machine or Mac Chrome, you will be greeted with the permission alert like below, and when you hit allow and click the “Notify me!” button. It will prompt the same box again and again. What is wrong here?
On a Mac machine Safari, nothing happens. The permission box does not show and when you click on the button nothing happens. What is wrong here?
Have you figured it out? The answer is, push notification does not work on a file. It must be hosted or a site or localhost at least. This is where the visual studio Live Server extension comes in handy. Of course, there are many ways you can host your file locally such as xampp or Inetpub for windows folks. To keep it simple, we will just go with the Live Server extension.
Let's first create a folder and move our HTML file into the folder. Fire up Visual Studio Code and open the folder that contains the HTML file. Once loaded, right-click on the file from the “explorer” window and select “Open with Live Server”. Your default browser should open up with localhost and a port and your site is available.
This time you can click allow on the permission box and hit the “Notify me” button. Congratulation!, your first push notification. Example notification is as below
After the notification appears and before it goes away, minimizes or focus on another application then click on the notification. Your browser will become active and the tab will be focused
The next step is to get creative and implement push notifications when you are required to for your website. Good Luck!
