Angular web notification

Push notification in web browser.

by Rishi Kumar

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://rawgit.com/sagiegurari/simple-web-notification/master/web-notification.js"></script>
<script src="https://rawgit.com/sagiegurari/angular-web-notification/master/angular-web-notification.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<show-button  notification-title="temp.title" notification-msg="temp.msg" notification-url="temp.url" > 
</show-button>    
</body>

JavaScript

// the main (app) module
var myApp = angular.module("myApp", ['angular-web-notification']);

// add a controller
myApp.controller("myCtrl", function($scope) {
$scope.temp ={};
    $scope.temp.msg = "hello world";
    $scope.temp.title = "Notify";
$scope.temp.msg = " HI hello"
$scope.temp.url = "  "
})

.directive('showButton', ['webNotification', function (webNotification) {
  return {
    restrict: 'E',
    template:"<button>sample noti</button>",
    replace:true,
    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);
            }
          });
        }
      });
    }
  };
}]);