{"id":13497270,"url":"https://github.com/flauc/ng-push","last_synced_at":"2025-04-09T05:33:14.717Z","repository":{"id":117356641,"uuid":"109535628","full_name":"flauc/ng-push","owner":"flauc","description":"An Angular wrapper around the Notifications API","archived":false,"fork":false,"pushed_at":"2018-10-23T05:20:44.000Z","size":100,"stargazers_count":59,"open_issues_count":8,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-24T00:06:07.588Z","etag":null,"topics":["angular","notifications"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flauc.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2017-11-04T22:44:12.000Z","updated_at":"2024-07-27T06:50:11.000Z","dependencies_parsed_at":"2024-01-16T09:55:53.440Z","dependency_job_id":"c4385ca0-a881-4707-99f8-f95ad0774ebc","html_url":"https://github.com/flauc/ng-push","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flauc%2Fng-push","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flauc%2Fng-push/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flauc%2Fng-push/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flauc%2Fng-push/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flauc","download_url":"https://codeload.github.com/flauc/ng-push/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247987060,"owners_count":21028891,"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","notifications"],"created_at":"2024-07-31T20:00:27.834Z","updated_at":"2025-04-09T05:33:09.674Z","avatar_url":"https://github.com/flauc.png","language":"JavaScript","readme":"# ng-push\n\n\u003e An Angular wrapper around the Notifications API\n\n[![Build Status](https://travis-ci.org/flauc/ng-push.svg?branch=master)](https://travis-ci.org/flauc/ng-push)\n[![NPM Version](https://img.shields.io/npm/v/ng-push.svg)](https://www.npmjs.com/package/ng-push)\n[![NPM Downloads](https://img.shields.io/npm/dt/ng-push.svg)](https://www.npmjs.com/package/ng-push)\n\nIf you arn'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 --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\nTo generate all `*.js`, `*.d.ts` and `*.metadata.json` files:\n\n```bash\n$ npm run build\n```\n\nTo lint all `*.ts` files:\n\n```bash\n$ npm run lint\n```\n\n## License\n\nMIT © [Filip Lauc](mailto:filip.lauc93@gmail.com)\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflauc%2Fng-push","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflauc%2Fng-push","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflauc%2Fng-push/lists"}