{"id":16336225,"url":"https://github.com/jerryfzhang/ng-push-ivy","last_synced_at":"2025-03-20T23:30:57.086Z","repository":{"id":39227562,"uuid":"239939915","full_name":"JerryFZhang/ng-push-ivy","owner":"JerryFZhang","description":"Angular Push Notifications API Wrapper","archived":false,"fork":false,"pushed_at":"2023-03-03T15:22:32.000Z","size":2935,"stargazers_count":4,"open_issues_count":16,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T18:48:57.537Z","etag":null,"topics":["angular","angular9","esnext","ivy","notifications","push-api","push-notifications","webapi"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ng-push-ivy","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JerryFZhang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"jerryfzhang","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-02-12T06:08:45.000Z","updated_at":"2022-12-09T03:26:14.000Z","dependencies_parsed_at":"2024-06-19T10:01:42.626Z","dependency_job_id":"b20f98d4-b25f-48a2-a62f-462a8b94d46d","html_url":"https://github.com/JerryFZhang/ng-push-ivy","commit_stats":{"total_commits":42,"total_committers":3,"mean_commits":14.0,"dds":"0.38095238095238093","last_synced_commit":"3678cc5020439a023773631cb2f5417cd010239f"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JerryFZhang%2Fng-push-ivy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JerryFZhang%2Fng-push-ivy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JerryFZhang%2Fng-push-ivy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JerryFZhang%2Fng-push-ivy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JerryFZhang","download_url":"https://codeload.github.com/JerryFZhang/ng-push-ivy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244710539,"owners_count":20497256,"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","angular9","esnext","ivy","notifications","push-api","push-notifications","webapi"],"created_at":"2024-10-10T23:43:31.969Z","updated_at":"2025-03-20T23:30:56.785Z","avatar_url":"https://github.com/JerryFZhang.png","language":"JavaScript","funding_links":["https://github.com/sponsors/jerryfzhang"],"categories":[],"sub_categories":[],"readme":"# ng-push-ivy\n\nAngular Push Notifications API Wrapper\n\n[![NPM Version](https://img.shields.io/npm/v/ng-push-ivy.svg)](https://www.npmjs.com/package/ng-push-ivy)\n[![NPM Downloads](https://img.shields.io/npm/dt/ng-push-ivy.svg)](https://www.npmjs.com/package/ng-push-ivy)\n\nIf you aren't familiar with push notifications you can read more about them on the [Mozilla developer network](https://developer.mozilla.org/en-US/docs/Web/API/Notification).\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install ng-push-ivy --save\n```\n\n## Setup\n\nImport the `PushNotificationsModule` in to your `AppModule`:\n```ts\n@NgModule({\n    imports: [PushNotificationsModule],\n    declarations: [AppComponent],\n    bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nNow import the `PushNotificationsService` where you want to use it: \n\n```ts\nconstructor( private _pushNotifications: PushNotificationsService ) {}\n```\n\n## Requesting Permission\n\nTo request permission from the user to display push notifications call the `requestPermission()` method on the `PushNotificationsService`.\n\n## Create Notification\n\nYou can create a notification calling the `create(title: string, options: PushNotification)` method, like this: \n\n```ts\nthis._pushNotifications.create('Test', {body: 'something'}).subscribe(\n            res =\u003e console.log(res),\n            err =\u003e console.log(err)\n        )\n```\n\nThe `create()` method returns an observable that emits the notification and the event when ever a show, click, close or error event occurs.\n\nIf you don't have permission to display the notification then the `Permission not granted` error will be thrown.\n\n## Options\n\nThe following are options that can be passed to the options parameter: \n\n```ts\ninterface PushNotification {\n    body?: string\n    icon?: string\n    tag?: string\n    renotify?: boolean\n    silent?: boolean\n    sound?: string\n    noscreen?: boolean\n    sticky?: boolean\n    dir?: 'auto' | 'ltr' | 'rtl'\n    lang?: string\n    vibrate?: number[]\n}\n```\n\nOptions correspond to the Notification interface of the Notification API:\n[Mozilla developer network](https://developer.mozilla.org/en-US/docs/Web/API/Notification).\n\n## Examples\n\n### Registering to click event\n\n```ts\nthis._pushNotifications.create(\n    'Example One',\n    {body: 'Just an example'}\n)\n    .subscribe(res =\u003e {\n        if (res.event.type === 'click') {\n            // You can do anything else here\n            res.notification.close();\n        }\n    }\n)\n```\n\n### Using with universal method one (using injector)\n\nThank you [@anode7](https://github.com/anode7) for submitting this example\n\n```ts\nimport {Component, Inject, PLATFORM_ID, Injector} from '@angular/core';\nimport {isPlatformBrowser} from '@angular/common';\n\n@Component({})\nexport class ExampleComponent {\n    private _push:PushNotificationsService;\n\n    constructor(\n        @Inject(PLATFORM_ID) platformId: string,\n        private injector: Injector,\n    ) {\n        if (isPlatformBrowser(platformId)) {\n            //inject service only on browser platform\n            this._push = this.injector.get(PushNotificationsService);\n        }\n    }\n}\n```\n\n### Using with universal method two (mock service)\n\nA standard method used in Universal is creating a mock service which is injected in the `ServerModule`. A good example can be found [here](https://github.com/angular/universal-starter/issues/148).\n\n## Development\n\n```bash\n$ npm run build\n```\n\n## License\n\nMIT © [JerryFZhang](mailto:hi@JerryFZhang)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerryfzhang%2Fng-push-ivy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjerryfzhang%2Fng-push-ivy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerryfzhang%2Fng-push-ivy/lists"}