{"id":13674122,"url":"https://github.com/sagiegurari/angular-web-notification","last_synced_at":"2025-04-06T06:10:20.320Z","repository":{"id":24336002,"uuid":"27733491","full_name":"sagiegurari/angular-web-notification","owner":"sagiegurari","description":"Web Notifications AngularJS Service","archived":false,"fork":false,"pushed_at":"2023-01-19T16:49:25.000Z","size":241,"stargazers_count":174,"open_issues_count":1,"forks_count":35,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T03:07:22.928Z","etag":null,"topics":["angular","desktop-notifications","notification","web","web-notifications","webnotification"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sagiegurari.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-08T20:28:55.000Z","updated_at":"2025-02-03T16:38:02.000Z","dependencies_parsed_at":"2023-02-11T10:35:24.885Z","dependency_job_id":null,"html_url":"https://github.com/sagiegurari/angular-web-notification","commit_stats":null,"previous_names":[],"tags_count":150,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagiegurari%2Fangular-web-notification","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagiegurari%2Fangular-web-notification/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagiegurari%2Fangular-web-notification/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagiegurari%2Fangular-web-notification/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sagiegurari","download_url":"https://codeload.github.com/sagiegurari/angular-web-notification/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441053,"owners_count":20939239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","desktop-notifications","notification","web","web-notifications","webnotification"],"created_at":"2024-08-02T11:00:41.333Z","updated_at":"2025-04-06T06:10:20.295Z","avatar_url":"https://github.com/sagiegurari.png","language":"JavaScript","readme":"# angular-web-notification\n\n[![NPM Version](http://img.shields.io/npm/v/angular-web-notification.svg?style=flat)](https://www.npmjs.org/package/angular-web-notification) [![CI](https://github.com/sagiegurari/angular-web-notification/workflows/CI/badge.svg?branch=master)](https://github.com/sagiegurari/angular-web-notification/actions) [![Coverage Status](https://coveralls.io/repos/sagiegurari/angular-web-notification/badge.svg)](https://coveralls.io/r/sagiegurari/angular-web-notification) [![Known Vulnerabilities](https://snyk.io/test/github/sagiegurari/angular-web-notification/badge.svg)](https://snyk.io/test/github/sagiegurari/angular-web-notification) [![Inline docs](http://inch-ci.org/github/sagiegurari/angular-web-notification.svg?branch=master)](http://inch-ci.org/github/sagiegurari/angular-web-notification) [![License](https://img.shields.io/npm/l/angular-web-notification.svg?style=flat)](https://github.com/sagiegurari/angular-web-notification/blob/master/LICENSE)\n\n\u003e Web Notifications AngularJS Service\n\n* [Overview](#overview)\n* [Demo](https://sagiegurari.github.io/angular-web-notification/)\n* [Usage](#usage)\n* [Installation](#installation)\n* [Limitations](#limitations)\n* [API Documentation](docs/api.md)\n* [Contributing](.github/CONTRIBUTING.md)\n* [Release History](#history)\n* [License](#license)\n\n\u003ca name=\"overview\"\u003e\u003c/a\u003e\n## Overview\nThe angular-web-notification is an angular service wrapper for the web notifications API.\n\nIt is using the [simple-web-notification](https://github.com/sagiegurari/simple-web-notification) library which provides a simple and easy notification API which works across browsers and provides automatic permission handling.\n\nSee [W3 Specification](https://dvcs.w3.org/hg/notifications/raw-file/tip/Overview.html) and [simple-web-notification](https://github.com/sagiegurari/simple-web-notification) for more information.\n\n### Angular 2 and Up\nFor angular 2 and above, it is recommanded to use the  [simple-web-notification](https://github.com/sagiegurari/simple-web-notification) library directly.\u003cbr\u003e\nIt provides the same API and it is not dependend on angular.\n\n## Demo\n[Live Demo](https://sagiegurari.github.io/angular-web-notification/)\n\n\u003ca name=\"usage\"\u003e\u003c/a\u003e\n## Usage\nIn order to use the angular service you first must add the relevant dependencies:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"angular.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"simple-web-notification/web-notification.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"angular-web-notification.js\"\u003e\u003c/script\u003e\n```\n\nNext you must define it as a dependency in your main angular module as follows:\n\n```js\nangular.module('exampleApp', [\n    'angular-web-notification'\n]);\n```\n\nNow you can inject and use the service into your modules (directives/services/...), for example:\n\n```js\nangular.module('exampleApp').directive('showButton', ['webNotification', function (webNotification) {\nreturn {\n    ...\n    link: function (scope, element) {\n        element.on('click', function onClick() {\n            webNotification.showNotification('Example Notification', {\n                body: 'Notification Text...',\n                icon: 'my-icon.ico',\n                onClick: function onNotificationClicked() {\n                    console.log('Notification clicked.');\n                },\n                autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)\n            }, function onShow(error, hide) {\n                if (error) {\n                    window.alert('Unable to show notification: ' + error.message);\n                } else {\n                    console.log('Notification Shown.');\n\n                    setTimeout(function hideNotification() {\n                        console.log('Hiding notification....');\n                        hide(); //manually close the notification (you can skip this if you use the autoClose option)\n                    }, 5000);\n                }\n            });\n        });\n    }\n};\n}]);\n```\n\nIn case you wish to use service worker web notifications, you must provide the serviceWorkerRegistration in the options as follows:\n\n````js\n//Get the service worker registeration object at the startup of the application.\n//This is an aysnc operation so you should not try to use it before the promise is finished.\nvar serviceWorkerRegistration;\nnavigator.serviceWorker.register('service-worker.js').then(function(registration) {\n    serviceWorkerRegistration = registration;\n});\n\n//when setting on even handlers in different areas of the application, use that registration object instance (must be done after the registration is available)\nelement.on('click', function onClick() {\n    webNotification.showNotification('Example Notification', {\n        serviceWorkerRegistration: serviceWorkerRegistration,\n        body: 'Notification Text...',\n        icon: 'my-icon.ico',\n        actions: [\n            {\n                action: 'Start',\n                title: 'Start'\n            },\n            {\n                action: 'Stop',\n                title: 'Stop'\n            }\n        ],\n        autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)\n    }, function onShow(error, hide) {\n        if (error) {\n            window.alert('Unable to show notification: ' + error.message);\n        } else {\n            console.log('Notification Shown.');\n\n            setTimeout(function hideNotification() {\n                console.log('Hiding notification....');\n                hide(); //manually close the notification (you can skip this if you use the autoClose option)\n            }, 5000);\n        }\n    });\n});\n````\n\n\u003ca name=\"installation\"\u003e\u003c/a\u003e\n## Installation\nRun npm install in your project as follows:\n\n```sh\nnpm install --save angular-web-notification\n```\n\nOr if you are using bower, you can install it as follows:\n\n```sh\nbower install angular-web-notification --save\n```\n\n\u003ca name=\"limitations\"\u003e\u003c/a\u003e\n## Limitations\nThe web notifications API is not fully supported in all browsers.\n\nPlease see [supported browser versions](http://caniuse.com/#feat=notifications) for more information on the official spec support.\n\n## API Documentation\nSee full docs at: [API Docs](docs/api.md)\n\n## Contributing\nSee [contributing guide](.github/CONTRIBUTING.md)\n\n\u003ca name=\"history\"\u003e\u003c/a\u003e\n## Release History\n\n| Date        | Version | Description |\n| ----------- | ------- | ----------- |\n| 2020-05-13  | v2.0.1  | Revert bower.json deletion but not use it in CI build |\n| 2020-05-11  | v2.0.0  | Migrate to github actions, upgrade minimal node version and remove bower |\n| 2019-02-08  | v1.2.31 | Maintenance |\n| 2017-08-25  | v1.2.24 | Document support of service worker web notifications |\n| 2017-01-22  | v1.2.0  | Split the internal web notification API into a new project: simple-web-notification |\n| 2016-11-23  | v1.0.19 | Use forked version of html5-desktop-notifications in order to resolve few issues |\n| 2016-11-04  | v1.0.16 | Upgrading to html5-desktop-notifications 3.0.0 |\n| 2016-09-10  | v1.0.6  | Default to website favicon.ico if icon not provided in options |\n| 2016-09-07  | v1.0.4  | Callback is now optional |\n| 2016-06-14  | v0.0.78 | Published via NPM (in addition to bower) |\n| 2016-03-08  | v0.0.65 | Added webNotification.permissionGranted attribute |\n| 2015-09-26  | v0.0.31 | Update bower dependencies |\n| 2015-09-26  | v0.0.30 | Added 'onClick' option to enable adding onclick event handler for the notification |\n| 2015-08-16  | v0.0.22 | uglify fix |\n| 2015-02-16  | v0.0.7  | Automatic unit tests via karma |\n| 2015-02-05  | v0.0.5  | Doc changes |\n| 2014-12-09  | v0.0.3  | API now enables/disables the capability to automatically request for permissions needed to display the notification. |\n| 2014-12-08  | v0.0.2  | Initial release |\n\n\u003ca name=\"license\"\u003e\u003c/a\u003e\n## License\nDeveloped by Sagie Gur-Ari and licensed under the Apache 2 open source license.\n","funding_links":[],"categories":["UI Components","JavaScript"],"sub_categories":["Notification"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagiegurari%2Fangular-web-notification","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsagiegurari%2Fangular-web-notification","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagiegurari%2Fangular-web-notification/lists"}