sagiegurari / angular-web-notification Goto Github PK

Is there a way to use the 'tag' parameter of HTML5-Desktop-Notifications? If I have multiple windows open that all have websocket connections, I would like to prevent the same notification from showing up multiple times.

Anyone have any resource to suggest for a persistent notification? I have figured out that I need a Service Worker to do that with the Notifications API, but I'm not sure how to proceed, and also not sure if it would be consistent with this repository. Thanks for any help with this.

Actually i can show a notification for a certain time and close it with the inner hide() function.
Is there a method to close the notification by invoking a function? (i have to close it when receiving a certain event).

Hi.

How to handle a click on the notification?

No matter what value or no value at all you assign to autoClose options property, the notification is always vanishing after some seconds (seems to be 15 by default).

Problem Description

We need to close the notification only from two possible ways, from the x on the top right corner or after clicking on it (notification body). From the issue: "Hide notification on click #7" (#7) we got how to make it work and it is working perfectly but when you do not click either the text or the x, we want the notification to stay there permanently.

Based on the documentation, we have the following:

[options.autoClose] -> number -> Auto closes the notification after the provided amount of millies (0 or undefined for no auto close)

But this is not working for us.

This is the code we are using:

      var hideNotification;

      webNotification.showNotification('Title', {
        body: 'My body',
        icon: 'myImage.ico',
        onClick: function onNotificationClicked() {
          ...
          // manually hide the notification after clicking on it
          if (hideNotification) {
            hideNotification();
          }
        }
      }, function onShow(error, hide) {
        if (error) {
          window.alert('Unable to show notification: ' + error.message);
        } else {
          hideNotification = hide;
        }
      });
    });

We are getting no error at all but no matter the value of autoClose property, we have tried everything, setting it up, assigning it to 0 or values higher then 15000 but the notification always vanish after a short period of time.

Is there a way to avoid this behavior?

Thanks a lot in advance for you help!

Best regards.

Is there any way to set the background color for the notification being displayed ? I would like set different color for the notification

Problem Description

Cool module! thanks!

I am trying to use this in my project but it appears that this moduleis not getting injected properly?

its built with webpack, ES6 and angular 1.5.8.

Is the angular-web-notification.js file set up to be exported and used as a module?

Code Example

  function vmListCtrl($location, $q, $rootScope, config, dataservice, logger, vmCache, webNotification) {

    /*jshint validthis: true */
    var ctrl = this;

    ctrl.vms = [];

    ctrl.searchFlag = false;
    ctrl.search = {
      status: '!DELETED'
    };

    ctrl.$onInit = function () {
      var promises = [getVMs()];
      return $q.all(promises).then(function () {
        logger.info('Activated vm-list View', config.uiMsgTitle);

        $rootScope.$on('VMsChanged', function () {
          resetAll();
          getVMs();
        });
      });
    };

    function resetAll() {
      ctrl.vms = [];
    }

    function getVMs() {
      return dataservice.getVMs()
        .then(function (data) {
          ctrl.vms = vmCache.get('vms');
          if (ctrl.vms && ctrl.vms.length > 0) {
            ctrl.vms.sort(function (a, b) {
              return a.vm_name > b.vm_name;
            });
          }
        });
    }

    ctrl.searchChanged = function () {
      if (ctrl.searchFlag) {
        ctrl.search.status = '';
      } else {
        ctrl.search.status = '!DELETED';
      }
    };

    ctrl.loadDetails = function (vmName) {
      $location.path('/vm-detail/' + vmName);
    };

    ctrl.vmCreate = function () {
      $location.path('/vm-create');
    };

    ctrl.showAlert = function () {
      webNotification.showNotification(scope.notificationTitle, {
        body: 'scope.notificationText',
        onClick: function onNotificationClicked() {
          console.log('Notification clicked.');
        },
        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);
        }
      });
    }


  }
export default vmListCtrl;

Error Stack/Info (if any)

angular.js?7f65:13920 TypeError: [NG-Modular Error] Cannot read property 'showNotification' of undefined
at vmListCtrl.ctrl.showAlert (eval at 144 (http://localhost:8080/bundle.js:4:17283), :63:20)
at fn (eval at compile (eval at (http://localhost:8080/vendor.bundle.js:32:27247)), :4:265)
at expensiveCheckFn (eval at (http://localhost:8080/vendor.bundle.js:32:27247), :15906:18)
at callback (eval at (http://localhost:8080/vendor.bundle.js:32:27247), :25885:17)
at Scope.$eval (eval at (http://localhost:8080/vendor.bundle.js:32:27247), :17682:28)
at Scope.$apply (eval at (http://localhost:8080/vendor.bundle.js:32:27247), :17782:25)
at HTMLButtonElement.eval (eval at (http://localhost:8080/vendor.bundle.js:32:27247), :25890:23)
at defaultHandlerWrapper (eval at (http://localhost:8080/vendor.bundle.js:32:27247), :3497:11)
at HTMLButtonElement.eventHandler (eval at (http://localhost:8080/vendor.bundle.js:32:27247),

Is there functions to check if browser support web notifications?

and also is there function to request permission if user does not have permission yet, but show this link only if web browser supports notifications.

Not installing from bower

$ bower install angular-web-notification --save

After executing that i get...

bower HTML5-Desktop-Notifications2#1.0.1 cached https://github.com/sagiegurari/HTML5-Desktop-Notifications.git#1.0.1
bower HTML5-Desktop-Notifications2#1.0.1 validate 1.0.1 against https://github.com/sagiegurari/HTML5-Desktop-Notifications.git#1.0.1
bower angular-web-notification#* cached https://github.com/sagiegurari/angular-web-notification.git#1.0.21
bower angular-web-notification#* validate 1.0.21 against https://github.com/sagiegurari/angular-web-notification.git#*
bower HTML5-Desktop-Notifications2#1.0.1 ENORESTARGET No tag found that was able to satisfy 1.0.1

Any solution?

Problem Description

I have nearly an exact copy of the example, and yet the onClick event doesn't seem to be firing. The example page (https://sagiegurari.github.io/angular-web-notification/) works well. Everything else about it seems to work well. I am using SignalR to send a message to the client, and the client should be showing a notifications with the message and who sent it.

Code Example

...
// SignalR listener
'recieveIncomingMessage': (conversationID, message) => {
                var convo = this.conversationLookup[conversationID];

                // Handle browser notification
                if (webNotification.permissionGranted) {
                    webNotification.showNotification(convo.FirstName + ' ' + convo.LastName, {
                        body: message.Message,
                        icon: '/Images/Notification.png',
                        onClick: function onNotificationClicked() {
                            console.log('Notification clicked.');
                            //convo.expand(); // Popup the conversation
                        },
                        autoClose: 10000 // 0 for no autoClose
                    }, function onShow(error, hide) {
                        if (error) {
                            window.alert('Unable to show notification: ' + error.message);
                        } else {
                            console.log('Notification Shown.');

                            // don't need any of these atm
                            //setTimeout(function hideNotification() {
                            //    console.log('Hiding notification....');
                            //    hide(); //manually close the notification (you can skip this if you use the autoClose option)
                            //}, 5000);
                        }
                    });
                }

                // apply gui changes
                $rootScope.$apply();
            },
...

Error Stack/Info (if any)

No errors are produced in console.

Hi,
I have implemented your code for my angular js project. I'm showing a notification on a button click event and it's working. But it's showing only in my system but not for all my website users.

If any push notification came it should show for all the website users right?. Please share your inputs to achieve that.

since bower is deprecated for a long time, maybe change the docs a bit.

Hello, since last update (v1.2.4), my custom service where I use angular-web-notification:

(function () {
    'use strict';

    angular
        .module('doc24App-medico')
        .factory('desktopNotification', desktopNotification);

    desktopNotification.$inject = ['webNotification', 'ngAudio'];

    function desktopNotification(webNotification, ngAudio) {
        var desktopNotification = this;

        desktopNotification.soundFile = '../audio/sms-alert-3-daniel_simon.mp3';
        desktopNotification.titleDefault = 'defaultTitle';
        desktopNotification.autoCloseDefault = 5000;
        desktopNotification.icon = '../app-medico/images/logo_small.png';

        desktopNotification.fireDesktopNotification = function(message, onClick, title, autoClose){
            if (!title){
                title = desktopNotification.titleDefault;
            }
            if (!autoClose){
                autoClose = desktopNotification.autoCloseDefault;
            }
            webNotification.showNotification(title, {
                body: message,
                icon: desktopNotification.icon,
                onClick: function onNotificationClicked() {
                    onClick();
                },
                autoClose: autoClose //(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)
                    }, autoClose);
                }
            });

            var audioObject = ngAudio.load(desktopNotification.soundFile);
            audioObject.play();
        };

        return {

            fireDesktopNotification: function(message, onClick, title, autoClose) {
                return desktopNotification.fireDesktopNotification(message, onClick, title, autoClose);
            }

        }
    }
})();

it's showing the following error:

TypeError: Cannot read property 'showNotification' of undefined
at Object.onCreateService (http://doc24.local/app-medico/js/dist/vendor.js:9328:50)
at Object.invoke (http://doc24.local/app-medico/js/dist/vendor.js:43:175)
at Object.$get (http://doc24.local/app-medico/js/dist/vendor.js:40:311)
at Object.invoke (http://doc24.local/app-medico/js/dist/vendor.js:43:175)
at http://doc24.local/app-medico/js/dist/vendor.js:44:486
at d (http://doc24.local/app-medico/js/dist/vendor.js:42:92)
at e (http://doc24.local/app-medico/js/dist/vendor.js:42:333)
at Object.invoke (http://doc24.local/app-medico/js/dist/vendor.js:42:418)
at Object.$get (http://doc24.local/app-medico/js/dist/vendor.js:40:311)
at Object.invoke (http://doc24.local/app-medico/js/dist/vendor.js:43:175)
at http://doc24.local/app-medico/js/dist/vendor.js:44:486
at d (http://doc24.local/app-medico/js/dist/vendor.js:42:92)
at e (http://doc24.local/app-medico/js/dist/vendor.js:42:333)
at Object.instantiate (http://doc24.local/app-medico/js/dist/vendor.js:43:244)
at http://doc24.local/app-medico/js/dist/vendor.js:93:141
at Object. (http://doc24.local/app-medico/js/dist/vendor.js:353:24299)

I noticed in the documentation that you are referencing "HTML5-Desktop-Notifications2/desktop-notify.js" Is there a reason that you using HTML5-Desktop-Notifications2 vs HTML5-Desktop-Notifications? It seems like HTML5-Desktop-Notifications2 is a fork that you made.

on the notification, localhost and port number are also displaying.

is there any way either to remove them or overwrite them with some other string

Problem Description

Hello!
Is there any way to handle action buttons ? I tried but receive this error.
Thanks!

Code Example

webNotification.showNotification(notification.title, {
                body: notification.body,
                icon: notification.icon,
                actions: [
                    {action: 'dismiss', title: 'dismiss'},
                    {action: 'later', title: 'see later'}],
                autoClose: 0
            }, function onShow(error, hide) {
                if (error) {
                    window.alert('Unable to show notification: ' + error.message);
                } 
            });

Error Stack/Info (if any)

Uncaught TypeError: Failed to construct 'Notification': Actions are only supported for persistent notifications shown using ServiceWorkerRegistration.showNotification().

I have implemented your code.I'm opening one of my screens on clicking the notification but how to close that notification on click.

Hi,

I'm trying to hide the notification after clicking on it.
Is this possible ?

Thanks

Hi,
I'm calling this in one of my controllers functions upon the arrival of a new item that the user wants to be notified about:

webNotification.showNotification(item.name, {
    body: bodyText,
    icon: String.format('images/{0}.jpg', item.name),
    onClick: function onNotificationClicked() {
    showInfoDialog(item);
        window.console.log('Notification clicked.');
    },  
    autoClose: watchListNotificationAutoCloseTime, //auto close the notification after 5 minutes (you manually close it via hide function)
}, function onShow(error, hide) {
    if (error) {
        window.alert('Unable to show notification: ' + error.message);
    } else {
        $log.log('Notification Shown.');
    }
});

Now, the notification pops up. But when I click on it, I see no console log and my controller function also does not get called. What am I doing wrong? I took the code from your plunkr sample.

Hi,
Is there away to use
or any new line character in the notifications body?
Thanks

Describe the bug
simple-web-notification (https://github.com/sagiegurari/simple-web-notification) released version 2.0.0 yesterday. This build contains breaking changes against some part of our build pipeline (still investigating, but reverting to the previous version 1.0.32 resolves our issues).

To Reproduce
Unknown at this time. Will update if I am able to pinpoint.

Error Stack

...
[19:43:41] GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: name (tagCounter)
File: /opt/questis/bower_components/vendor.min.js
...

Recommended change is to pin simple-web-notification to a version (not the latest).

Hi there, i need some help on this angular-web-notification.

Let me first explain it, i am using the code below which register to service worker and i get push notification in chrome i.e sw.js( name of file )
`use strict';

const applicationServerPublicKey = 'key';
function urlB64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/');

const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);

for (var i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
 return outputArray;
}

self.addEventListener('push', function(event) {
console.log('[Service Worker] Push Received.');
// console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

console.log(event.data);
console.log(event.data.json());
console.log(typeof (event.data.json()));
console.log(event);
const title = 'xyz';
const options = {
body: 'Message Received \n ' + event.data.json().message,
icon: 'images/icon.png',
// badge: 'images/badge.png',
data : event.data.json()
};

event.waitUntil(self.registration.showNotification(title, options));
});

self.addEventListener('notificationclick', function(event) {


console.log('[Service Worker] Notification click Received.');

event.notification.close();

event.waitUntil(
    clients.openWindow('url');
);
});

self.addEventListener('pushsubscriptionchange', function(event) {
console.log('[Service Worker]: \'pushsubscriptionchange\' event fired.');
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
 event.waitUntil(
    self.registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: applicationServerKey
        })
        .then(function(newSubscription) {
            console.log('[Service Worker] New subscription: ', newSubscription);
        })
);
});`


`if ('serviceWorker' in navigator && 'PushManager' in window) {

navigator.serviceWorker.register('../sw.js')
.then(function (swReg) {
                onServiceWorkerReady(swReg);

swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})
.then(function (subscription) {
 updateSubscriptionOnServer(subscription);
isSubscribed = true;
//updateBtn();
})
.catch(function (err) {
console.log('Failed to subscribe the user: ', err);
//         updateBtn();
//     });
})
.catch(function (error) {
console.error('Service Worker Error', error);
});
} else {
console.warn('Push messaging is not supported');
//pushButton.textContent = 'Push Not Supported';
}

`

What i need is that when i get notification from web-server , i also need my angular-app to perform some action.
By using the above, i am not able catch any event or maybe i don't know how to do that.
Links i try to figured out

1. https://github.com/sagiegurari/angular-web-notification
2. https://github.com/jmsanpascual/angular-desktop-notification
3. https://github.com/matiboy/angular-browser-push-notifications

I cannot exactly figure out, how i suppose to use your lib that help me to perform action in angular-app whenever i push notification or service worker get push notification.

Thank you,

I suggest adding the 'tag' key which it prevents firing multiple notification with the same tag. Applies perfectly when opening multiple tabs and we need 1 notification

body: data.msg,
tag : 'onetime-notification',

Tested in Chrome only.

Problem Description

Onclick handler is not working when using this https://github.com/ttsvetko/HTML5-Desktop-Notifications, But when i use yours it works.
https://github.com/sagiegurari/HTML5-Desktop-Notifications

I couldn't find this in the npm registry can you upload that.

Problem Description

I discovered this problem this morning when I did a 'bower update' command and my dependencies got updated. After doing this, my 'gulp build' command that I created stopped working. I was able to trace the problem down to this dependency. If I perform, the command 'bower uninstall angular-web-notification --save' then my gulp script would run successfully. But after reinstalling it by using the following command, 'bower install angular-web-notification' the error returned.

Below a command line session, which proves the error exists. To summarize:

1. Ran my gulp command and it finished successfully.
2. Installed the angular-web-notification bower package.
3. Re-ran my gulp command again and I got the error.
4. Uninstalled the angular-web-notification.
5. Re-ran my gulp command and it finished successfully.

Code Example

C:\git\Timer>gulp
[15:41:33] Using gulpfile C:\git\Timer\gulpfile.js
[15:41:33] Starting 'help'...

Main Tasks

browserSyncReload
build
bump
clean
copyfiles
default
fonts
help
images
inject
optimize
styles
templatecache
test
vet
wiredep

Sub Tasks

build-deploy
build-specs
clean-code
clean-deploy
clean-fonts
clean-images
clean-styles
compress-windows-app
less-watcher
pre-commit
serve-build
serve-dev
serve-specs

[15:41:34] Finished 'help' after 97 ms
[15:41:34] Starting 'default'...
[15:41:34] Finished 'default' after 26 μs

C:\git\Timer>bower install angular-web-notification --save
bower angular-web-notification#* cached https://github.com/sagiegurari/angular-web-notification.git#1.0.16
bower angular-web-notification#* validate 1.0.16 against https://github.com/sagiegurari/angular-web-notification.git#*
bower html5-desktop-notifications#~3 cached https://github.com/ttsvetko/HTML5-Desktop-Notifications.git#3.0.0
bower html5-desktop-notifications#~3 validate 3.0.0 against https://github.com/ttsvetko/HTML5-Desktop-Notifications.git#~3
bower angular-web-notification#^1.0.16 install angular-web-notification#1.0.16
bower html5-desktop-notifications#~3 install html5-desktop-notifications#3.0.0

angular-web-notification#1.0.16 src\Timer.Angular\bower_components\angular-web-notification
├── angular#1.5.5
└── html5-desktop-notifications#3.0.0

html5-desktop-notifications#3.0.0 src\Timer.Angular\bower_components\html5-desktop-notifications

C:\git\Timer>gulp
C:\git\Timer\node_modules\glob\sync.js:29
throw new Error('must provide pattern')
^

Error: must provide pattern
at new GlobSync (C:\git\Timer\node_modules\glob\sync.js:29:11)
at Function.globSync [as sync] (C:\git\Timer\node_modules\glob\sync.js:24:10)
at C:\git\Timer\node_modules\wiredep\lib\detect-dependencies.js:109:14
at Array.reduce (native)
at findMainFiles (C:\git\Timer\node_modules\wiredep\lib\detect-dependencies.js:107:31)
at C:\git\Timer\node_modules\wiredep\lib\detect-dependencies.js:161:17
at forOwn (C:\git\Timer\node_modules\wiredep\node_modules\lodash\dist\lodash.js:2106:15)
at Function.forEach (C:\git\Timer\node_modules\wiredep\node_modules\lodash\dist\lodash.js:3303:9)
at C:\git\Timer\node_modules\wiredep\lib\detect-dependencies.js:181:11
at forOwn (C:\git\Timer\node_modules\wiredep\node_modules\lodash\dist\lodash.js:2106:15)

C:\git\Timer>bower uninstall angular-web-notification --save
bower uninstall angular-web-notification
bower uninstall html5-desktop-notifications

C:\git\Timer>gulp
[15:42:11] Using gulpfile C:\git\Timer\gulpfile.js
[15:42:11] Starting 'help'...

Main Tasks

browserSyncReload
build
bump
clean
copyfiles
default
fonts
help
images
inject
optimize
styles
templatecache
test
vet
wiredep

Sub Tasks

build-deploy
build-specs
clean-code
clean-deploy
clean-fonts
clean-images
clean-styles
compress-windows-app
less-watcher
pre-commit
serve-build
serve-dev
serve-specs

[15:42:11] Finished 'help' after 130 ms
[15:42:11] Starting 'default'...
[15:42:11] Finished 'default' after 24 μs

C:\git\Timer>

Error Stack/Info (if any)

Error: must provide pattern
at new GlobSync (C:\git\Timer\node_modules\glob\sync.js:29:11)
at Function.globSync [as sync] (C:\git\Timer\node_modules\glob\sync.js:24:10)
at C:\git\Timer\node_modules\wiredep\lib\detect-dependencies.js:109:14
at Array.reduce (native)
at findMainFiles (C:\git\Timer\node_modules\wiredep\lib\detect-dependencies.js:107:31)
at C:\git\Timer\node_modules\wiredep\lib\detect-dependencies.js:161:17
at forOwn (C:\git\Timer\node_modules\wiredep\node_modules\lodash\dist\lodash.js:2106:15)
at Function.forEach (C:\git\Timer\node_modules\wiredep\node_modules\lodash\dist\lodash.js:3303:9)
at C:\git\Timer\node_modules\wiredep\lib\detect-dependencies.js:181:11
at forOwn (C:\git\Timer\node_modules\wiredep\node_modules\lodash\dist\lodash.js:2106:15)

It would be really nice to be able to trigger a notification with a simplified method, without the callback clutter. Something like webNotification.info(title, body).

At the moment the icon property has to be set for the notification to show. A sensible default value would be favicon.ico.

Describe The Bug

I can't get the notifications to show up. Neither in my code or demo.

To Reproduce

Go to the demo and click on show notification

Error Stack

Unable to show notification: Unable to find notification.

Code Sample

https://sagiegurari.github.io/angular-web-notification/

Problem Description

Hi,
I've been trying to use angular-web-notification to create a small service containing various functions that I can call in my own functions, as well as export to other apps. Thus, I didn't create a new directive like you did in the README's example, but a new service, and just copy/pasted your code to see if it worked, after including the necessary scripts in the html DOM.

When I call the service's function, no notification shows up, but no error gets thrown.I know that my browser is compatible since it works with your Plunker example, and I can't figure out what the problem is. I have no errors in my console whatsoever, and the rest of the app runs normally, bar from the notification.

Code Example

myApp.service('notify', ['webNotification', function(webNotification) {
    this.fire = function() {
        webNotification.showNotification('Example Notification', {
            body: 'Notification Text...',
            onClick: function onNotificationClicked() {
                console.log('Notification clicked.');
            },
        autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)
        }, function onShow(error, hide) {
            console.log(arguments);
            if (error) {
                window.alert('Unable to show notification: ' + error.message);
                console.log(error.message);
            } else {
                window.alert('Notification shown!');
                setTimeout(function hideNotification() {
                    hide();
                }, 5000);
            }
        });
    } 
}]);

Any ideas ?

Thanks in advance.

This plugin works fine without gulp uglify code but when it is run for production build it throws an error.

"[Uglify] Error in plugin 'gulp-uglify'
Unexpected token: name (tagCounter)"

Please guide.

I am increasing the auto close time to 20 sec, But still notifications are closing to 10 or 11 sec default, Do you know is there any OS related settings.

It would be great if we could use the service to get the current state. Right now I'm using the global window.notify object.