Question

34

HTML5 Desktop Notifications (ideally with Angular)

rated 0 times [ 40] [ 6] / answers: 1 / hits: 15271 / 9 Years ago, fri, may 8, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cadendericki

Add To Favorites

Follow

Total Points: 482

Total Questions: 109

Total Answers: 103

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

cadendericki questions

1 ERROR TypeError: Cannot read properties of undefined (reading 'phones')

Tue, Mar 22, 22, 00:00, 2 Years ago

1 firefox browser does not start in playwright

Wed, Apr 7, 21, 00:00, 3 Years ago

1 React Creating Dynamic Select and Option Elements with Material-UI

Wed, Jan 27, 21, 00:00, 3 Years ago

1 How to use the vue router in another file?

Wed, Jul 8, 20, 00:00, 4 Years ago

1 Format column header dates in FullCalendar

Thu, May 14, 20, 00:00, 4 Years ago

View All

answered 9 Years ago jaycie · Accepted Answer

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);

        });

    });

});