I am trying to put the web notifications to my site so that all of my clients will see my notification in browser, when I add any new item in my site.
I chose angular-web-notification, I installed through Bower in my app and tested locally, it worked fine but when I deployed my site to production, then I again tested in production, the notification is coming for only in my browser only not for all the clients who allowed the notifications for my site.
Here is my code:
.directive('showButton', ['webNotification', function (webNotification) {
return {
restrict: 'C',
scope: {
notificationTitle: '=',
notificationMsg: '=',
notificationUrl: '='
},
link: function (scope, element) {
console.log("coming to directive notifications")
element.on('click', function onClick() {
console.log("coming to directive notifications click")
if ((scope.notificationTitle) && (scope.notificationMsg)) {
webNotification.showNotification(scope.notificationTitle, {
body: scope.notificationMsg,
icon: 'https://lh3.googleusercontent.com/BCOE0vqCfr8aqpIKEF7QEt-qa7p8I7KDg58Juz6M6_YGb4l7phrO2vMvi_SDy10ucQ=w300',
onClick: function onNotificationClicked() {
console.log('Notification clicked.');
window.open(scope.notificationUrl, '_blank')
},
autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)
}, function onShow(error, hide) {
if (error) {
window.alert('Unable to show notification: ' + error.message);
} else {
console.log('Notification Shown.');
setTimeout(function hideNotification() {
console.log('Hiding notification....');
hide(); //manually close the notification (you can skip this if you use the autoClose option)
}, 5000);
}
});
}
});
}
};
}]);
dev
environment (notproduction
) and you have a development application up and running at the same time. – Pomander