{"id":16550668,"url":"https://github.com/willianjusten/screamer-js","last_synced_at":"2025-03-16T19:33:02.760Z","repository":{"id":74576782,"uuid":"44321341","full_name":"willianjusten/screamer-js","owner":"willianjusten","description":"Screamer.js is a Vanilla Javascript plugin to provide simple yet fully customisable web notifications using Web Notifications API.","archived":false,"fork":false,"pushed_at":"2017-01-21T01:45:31.000Z","size":1568,"stargazers_count":161,"open_issues_count":0,"forks_count":16,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-04-14T01:49:49.878Z","etag":null,"topics":["customisable-web-notifications","javascript","notifications","vanilla-javascript-plugin"],"latest_commit_sha":null,"homepage":"http://willianjusten.com.br/screamer-js/example/","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/willianjusten.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2015-10-15T14:00:48.000Z","updated_at":"2023-11-06T17:16:21.000Z","dependencies_parsed_at":"2023-03-11T17:26:42.146Z","dependency_job_id":null,"html_url":"https://github.com/willianjusten/screamer-js","commit_stats":{"total_commits":58,"total_committers":9,"mean_commits":6.444444444444445,"dds":"0.22413793103448276","last_synced_commit":"59e29c74a68b492bbf971fcce6bb1058e0d80bca"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willianjusten%2Fscreamer-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willianjusten%2Fscreamer-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willianjusten%2Fscreamer-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willianjusten%2Fscreamer-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willianjusten","download_url":"https://codeload.github.com/willianjusten/screamer-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826797,"owners_count":20354221,"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":["customisable-web-notifications","javascript","notifications","vanilla-javascript-plugin"],"created_at":"2024-10-11T19:35:07.280Z","updated_at":"2025-03-16T19:33:02.462Z","avatar_url":"https://github.com/willianjusten.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Screamer.JS\n[![Build Status](https://travis-ci.org/willianjusten/screamer-js.svg)](https://travis-ci.org/willianjusten/screamer-js)\n\n![Minion using Megaphone](screamer.jpg)\n\n\u003e Screamer.js is a Vanilla Javascript plugin to provide simple yet fully customisable web notifications using [Web Notifications API](http://www.w3.org/TR/notifications/).\n\n## Demo\n\n![screenshot of notifications](screenshot.png)\n\nIf you want to see how it works, take a look at the [DEMO](http://willianjusten.com.br/screamer-js/example/).\n\n## Installation\n\n1. Download the [zip](https://github.com/willianjusten/screamer-js/archive/master.zip)\n2. Paste the [screamer.js](https://github.com/willianjusten/screamer-js/blob/master/screamer.js) at your `js` assets folder.\n3. If you want to use same images, get them on [https://github.com/willianjusten/screamer-js/tree/master/example] and paste to your `img` assets folder.\n\n## How to Use\n\n### CommonJS\n\n```js\n\nvar Screamer = require('screamer');\nvar notification = new Screamer(options);\n```\n\n### AMD\n\n```js\ndefine([ 'Screamer' ], function( Screamer ) {\n  var notification = new Screamer(options);\n});\n```\n\nTo create the Notification you have to create a new instance of `Screamer`, set some options that you wish and use the `notify` method to start the notification. Take a look at this snippet:\n\n```js\n\n// create an instance of Screamer with some options\nvar scream = new Screamer({\n    'title': 'Success!',\n    'body': 'Lorem ipsum dolor sit amet.',\n    'icon': 'icon_success.png',\n    'fade': 1000\n});\n\n// adding an eventListener to call the Notification\nvar button = document.querySelector('#fade');\nbutton.addEventListener('click', function(){\n    scream.notify();\n});\n```\n\nYou can attach this to different events, like `onload`, `ready` or anything else that allows to call the `notify` method.\n\n## Options\n\n- `title` (string) - notification title. (**REQUIRED**)\n- `body` (string) - notification message.\n- `icon` (string) - path to the notification icon.\n- `tag` (string) - unique identifier to stop duplicate notifications.\n- `lang` (string) - language of the notification. (default: en).\n- `timeout` (integer) - time in miliseconds to fade the notification.\n- `before` (function) - A callback function called before show the notification.\n- `after` (function) - A callback function called after show the notification.\n\n## Static Methods\n\n- `Screamer.verifySupport()` - Function to test for Web Notifications API browser support.\n- `Screamer.checkPermission()` - Verify if permission exists, if not, request a permission and verify if granted.\n\n## Testing\n\nFirst of all, install the [NodeJS](https://nodejs.org/) and deppendencies.\n\n```sh\nnpm install\n```\n\nLater, you can run all tests running:\n\n```sh\nnpm test\n```\n\nThis should be open a Firefox instance and do a single run of tests.\n\n## Run Demo locally\n\nBecause the Web Notification require some permissions, you have to run this on a single server. An easy way to run this is:\n\n```sh\npython -m SimpleHTTPServer\n```\n\n*Pay attention if your port is not in use.* \n\n## Browser Support\n\nThis library relies on [Web Notifications API](http://www.w3.org/TR/notifications/). And this API is supported in the following browsers.\n\n![Chrome](https://cloud.githubusercontent.com/assets/398893/3528328/23bc7bc4-078e-11e4-8752-ba2809bf5cce.png) | ![Firefox](https://cloud.githubusercontent.com/assets/398893/3528329/26283ab0-078e-11e4-84d4-db2cf1009953.png) | ![Opera](https://cloud.githubusercontent.com/assets/398893/3528330/27ec9fa8-078e-11e4-95cb-709fd11dac16.png) | ![Safari](https://cloud.githubusercontent.com/assets/398893/3528331/29df8618-078e-11e4-8e3e-ed8ac738693f.png) | ![IE](https://cloud.githubusercontent.com/assets/398893/3528325/20373e76-078e-11e4-8e3a-1cb86cf506f0.png) |\n--- | --- | --- | --- | --- |\n31+ ✔ | 38+ ✔ | 32+ ✔ | 8+ ✔ | Nope ✘ |\n\n## Thanks\n\nThis project would be nothing without this guys:\n\n- [Paulo Oliveira](https://github.com/paulopotter) - he create all the stuff with me.\n- [Natália Medina](https://github.com/ntmedina) - our designer and a lovely girl. (Coelhinha da Duracell!!)\n- [Rodrigo Machado](https://github.com/rcmachado) - he gave me the idea.\n- [All contributors](https://github.com/willianjusten/screamer-js/graphs/contributors)\n\n## License \n\nThis plugin is free and open source software, distributed under the The MIT License. So feel free to use this to create notifications for your site without linking back to me or using a disclaimer.\n\nIf you’d like to give me credit somewhere on your blog or tweet a shout out to @willian_justen, that would be pretty sweet.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillianjusten%2Fscreamer-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillianjusten%2Fscreamer-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillianjusten%2Fscreamer-js/lists"}