HTML5 Desktop Notifications (ideally with Angular)

Question

I want to be able to send Desktop Notifications to the user (not inside the browser window) and I know I have to give the user the choice to open the dialog question in chrome.

I am using the MEAN stack, and use browserify/bowserify on the frontend, and I can use bower or npm packages on the client-side. I use the CommonJS pattern, so it'd help me understand it if the solution or examples were in that format, or easier to move to that format.

What would be the best way to approach this, is there an Angular/React plugin for this (which I must admit I cannot find myself).

I only really need to show one at a time, and I would be happy to just show the latest and auto-remove any thats there, and ideally a cross browser solution (it can be the latest versions only if need be).

Any ideas welcome.

Answer 1

To clarify I mean a front end solution. However I came across this, which I have edited down and improved.

This is plain JavaScript for clarity, I will be using some of my own methods to link it to Angular.

document.addEventListener('DOMContentLoaded',function(){
document.getElementById('notifyButton').addEventListener('click',function(){

    if(! ('Notification' in window) ){
        console.log('Web Notification not supported');
        return;
    }   

    Notification.requestPermission(function(permission){
            var notification = new Notification("Title",{body:'HTML5 Web Notification API',icon:'http://i.stack.imgur.com/Jzjhz.png?s=48&g=1', dir:'auto'});
            setTimeout(function(){
                notification.close();
            },3000);
        });
    });
});