{"id":13459194,"url":"https://github.com/jaywcjlove/iNotify","last_synced_at":"2025-03-24T16:31:23.978Z","repository":{"id":31597164,"uuid":"35162010","full_name":"jaywcjlove/iNotify","owner":"jaywcjlove","description":":loudspeaker: JS achieve the browser title flashing, scrolling, voice prompts, Chrome/Safari/FireFox/IE notice. has no dependencies. It not interfere with any JavaScript libraries or frameworks. has a reasonable footprint 5.05kb (gzipped: 1.75kb)","archived":false,"fork":false,"pushed_at":"2024-09-23T19:12:50.000Z","size":13029,"stargazers_count":1040,"open_issues_count":15,"forks_count":184,"subscribers_count":46,"default_branch":"master","last_synced_at":"2024-10-29T15:29:09.559Z","etag":null,"topics":["inotify","javascript","notification"],"latest_commit_sha":null,"homepage":"https://git.io/iNotify","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaywcjlove.png","metadata":{"files":{"readme":"README-zh.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"MIT-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":{"ko_fi":"jaywcjlove","buy_me_a_coffee":"jaywcjlove","custom":["https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"]}},"created_at":"2015-05-06T14:03:03.000Z","updated_at":"2024-10-29T13:38:52.000Z","dependencies_parsed_at":"2023-01-14T19:21:56.796Z","dependency_job_id":"26a5e04b-cfa1-4d41-8caa-a80438717ea3","html_url":"https://github.com/jaywcjlove/iNotify","commit_stats":{"total_commits":168,"total_committers":6,"mean_commits":28.0,"dds":0.0892857142857143,"last_synced_commit":"9ec7bc6d5597c576af4423f545d6f59c6366707f"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2FiNotify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2FiNotify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2FiNotify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2FiNotify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaywcjlove","download_url":"https://codeload.github.com/jaywcjlove/iNotify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244141479,"owners_count":20404837,"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":["inotify","javascript","notification"],"created_at":"2024-07-31T09:01:09.787Z","updated_at":"2025-03-24T16:31:23.498Z","avatar_url":"https://github.com/jaywcjlove.png","language":"JavaScript","funding_links":["https://ko-fi.com/jaywcjlove","https://buymeacoffee.com/jaywcjlove","https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://jaywcjlove.github.io/iNotify\"\u003e\n    \u003cimg alt=\"iNotify 实例预览\" src=\"https://github.com/jaywcjlove/iNotify/blob/master/website/assets/iNotify.png?raw=true\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://jaywcjlove.github.io/#/sponsor\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/jaywcjlove/iNotify/issues\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/jaywcjlove/iNotify.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/jaywcjlove/iNotify/network\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/forks/jaywcjlove/iNotify.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/jaywcjlove/iNotify/stargazers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/jaywcjlove/iNotify.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/jaywcjlove/iNotify/releases\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/release/jaywcjlove/iNotify.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@wcjiang/notify\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@wcjiang/notify.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nJS 实现浏览器的 title 闪烁、滚动、声音提示、通知，没有依赖. 它不会干扰任何 JavaScript 库或框架。有合理的体积 5.05kb (gzipped: 1.75kb)，官方文档[实例预览](https://jaywcjlove.github.io/iNotify)。\n\n## 下载\n\n```bash\n# v2.x\n$ npm install @wcjiang/notify --save\n# v1.x\n$ npm install title-notify --save\n```\n\n## 使用\n\n```js\nimport Notify from \"@wcjiang/notify\";\n\nconst notify = new Notify({\n  message: \"有消息了。\", // 标题\n  effect: \"flash\", // flash | scroll 闪烁还是滚动\n  openurl: \"https://github.com/jaywcjlove/iNotify\", // 点击弹窗打开连接地址\n  onclick: () =\u003e {\n    // 点击弹出的窗之行事件\n    console.log(\"---\");\n  },\n  // 可选播放声音\n  audio: {\n    // 可以使用数组传多种格式的声音文件\n    file: [\"msg.mp4\", \"msg.mp3\", \"msg.wav\"],\n    // 下面也是可以的哦\n    // file: 'msg.mp4'\n  },\n  // 标题闪烁，或者滚动速度\n  interval: 1000,\n  disableFavicon: false, // 可选，默认不禁用。如果为true则不覆盖原有favicon\n  // 可选，默认绿底白字的  Favicon\n  updateFavicon: {\n    // favicon 字体颜色\n    textColor: \"#fff\",\n    // 背景颜色，设置背景颜色透明，将值设置为“transparent”\n    backgroundColor: \"#2F9A00\",\n  },\n  // 可选chrome浏览器通知，默认不填写就是下面的内容\n  notification: {\n    title: \"通知！\", // 设置标题\n    icon: \"\", // 设置图标 icon 默认为 Favicon\n    body: \"您来了一条新消息\", // 设置消息内容\n  },\n});\n\nnotify.player();\n```\n\n在您的 HTML 中手动下载并引入 **notify.js**，你也可以通过 [UNPKG](https://unpkg.com/@wcjiang/notify/dist/) 进行下载：\n\n```html\n\u003cscript src=\"https://unpkg.com/@wcjiang/notify/dist/notify.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  var notify = new Notify({\n    effect: \"flash\",\n    interval: 500,\n  });\n  notify.setFavicon(\"1\");\n\u003c/script\u003e\n```\n\n## option\n\n- **message**: String 标题\n- **effect**: String, flash | scroll | favicon 闪烁还是滚动\n- **audio**: 可选播放声音\n  - **file**: String/Array 可以使用数组传多种格式的声音文件\n- **interval**: Number 标题闪烁，或者滚动速度\n- **openurl**: String 点击弹窗打开连接地址\n- **onclick**: Function 弹窗点击事件\n- **updateFavicon**: 设置 Favicon 图标颜色\n  - **textColor**: 设置 favicon 字体颜色\n  - **backgroundColor**: 背景颜色，设置背景颜色透明，将值设置为 `transparent`\n- **notification**: 可选 chrome 浏览器通知，默认不填写就是下面的内容\n  - **title**: 默认值 `通知！`\n  - **icon**: 设置图标 icon 默认为 Favicon\n  - **body**: 设置消息内容\n\n## isPermission\n\n判断浏览器弹框通知是否被阻止。\n\n```js\niNotify.isPermission();\n```\n\n## 声音设置\n\n### player\n\n播放声音\n\n```js\niNotify.player();\n```\n\n### loopPlay\n\n自动播放声音\n\n```js\niNotify.loopPlay();\n```\n\n### stopPlay\n\n停止播放声音\n\n```js\niNotify.stopPlay();\n```\n\n### setURL\n\n设置播放声音 URL\n\n```js\niNotify.setURL(\"msg.mp3\"); // 设置一个\niNotify.setURL([\"msg.mp3\", \"msg.ogg\", \"msg.mp4\"]); // 设置多个\n```\n\n## title\n\n最新的版本默认不播放标题闪烁动画，初始化之后需要调用 `setTitle(true)` 方法才播放标题动画。\n\n### setTitle\n\n设置标题，\n\n```js\niNotify.setTitle(true); // 播放动画\niNotify.setTitle(\"新标题\"); // 闪烁新标题\niNotify.setTitle(); // 清除闪烁 显示原来的标题\n```\n\n### setInterval\n\n设置时间间隔\n\n```js\niNotify.setInterval(2000);\n```\n\n### addTimer\n\n添加计数器\n\n```js\niNotify.addTimer();\n```\n\n### clearTimer\n\n清除计数器\n\n```js\niNotify.clearTimer();\n```\n\n## favicon 通知\n\n### setFavicon\n\n设置 icon 显示数字或者文本\n\n```js\niNotify.setFavicon(10);\n```\n\n### setFaviconColor\n\n设置 icon 显示文本颜色\n\n```js\niNotify.setFaviconColor(\"#0043ff\");\n```\n\n### setFaviconBackgroundColor\n\n设置 icon 显示文本颜色\n\n```js\niNotify.setFaviconBackgroundColor(\"#0043ff\");\n// 设置字体和背景颜色\niNotify.setFaviconColor(\"#f5ff00\").setFaviconBackgroundColor(\"red\");\n```\n\n### faviconClear\n\n清除数字显示原来的 icon\n\n```js\niNotify.faviconClear();\n```\n\n## chrome 通知\n\n### notify\n\n弹出 chrome 通知，不传参数为预设值...\n\n```js\niNotify.notify();\niNotify.notify({\n  title: \"新通知\",\n  body: \"打雷啦，下雨啦...\",\n  openurl: \"http://www.bing.com\",\n  onclick: function () {\n    console.log(\"on click\");\n  },\n  onshow: function () {\n    console.log(\"on show\");\n  },\n});\n```\n\n- title 一定会被显示的通知标题。\n- dir 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）。\n- icon 一个图片的 URL，将被用于显示通知的图标。\n- body 通知中额外显示的字符串。\n- openurl 点击打开指定 URL。\n- onclick 每当用户点击通知时被触发。\n- onshow 当通知显示的时候被触发。\n- onerror 每当通知遇到错误时被触发。\n- onclose 当用户关闭通知时被触发。\n\n## 其它\n\n`iNotify.init().title;` 获取标题\n\n## 例子\n\n### 实例一\n\n```js\nfunction iconNotify(num) {\n  if (!notify) {\n    var notify = new Notify({\n      effect: \"flash\",\n      interval: 500,\n    });\n  }\n  if (num === 0) {\n    notify.faviconClear();\n    notify.setTitle();\n  } else if (num \u003c 100) {\n    notify.setFavicon(num);\n    notify.setTitle(\"有新消息！\");\n  } else if (num \u003e 99) {\n    notify.setFavicon(\"..\");\n    notify.setTitle(\"有新消息！\");\n  }\n}\n```\n\n### 实例二\n\n```js\nvar notify = new Notify({\n  effect: \"flash\",\n  interval: 500,\n});\nnotify.setFavicon(\"1\");\n```\n\n### 实例三\n\n```js\nvar iN = new Notify({\n  effect: \"flash\",\n  interval: 500,\n  message: \"有消息拉！\",\n  updateFavicon: {\n    // 可选，默认绿底白字\n    textColor: \"#fff\", // favicon 字体颜色\n    backgroundColor: \"#2F9A00\", // 背景颜色\n  },\n}).setFavicon(10);\n```\n\n### 实例四\n\n```js\nvar iN = new Notify().setFavicon(5);\n```\n\n### 实例五\n\n```js\nvar iN = new Notify({\n  effect: \"flash\",\n  interval: 500,\n  message: \"有消息拉！\",\n  audio: {\n    file: \"msg.mp4\",\n  },\n})\n  .setFavicon(10)\n  .player();\n```\n\n### 实例五\n\n```js\nvar iN = new Notify({\n  effect: \"flash\",\n  interval: 500,\n  message: \"有消息拉！\",\n  audio: {\n    file: \"msg.mp4\", //可以使用数组传多种格式的声音文件\n  },\n  notification: {\n    title: \"通知！\",\n    icon: \"\",\n    body: \"您来了一条新消息\",\n  },\n})\n  .setFavicon(10)\n  .player();\n\n//弹出chrome通知，不传参数为预设值...\niN.notify();\n\niN.notify({\n  title: \"新通知\",\n  body: \"打雷啦，下雨啦...\",\n});\n```\n\n### 实例六\n\n```js\nvar iN = new Notify({\n  effect: \"flash\",\n  interval: 500,\n  message: \"有消息拉！\",\n  audio: {\n    file: [\"msg.mp4\", \"msg.mp3\", \"msg.wav\"],\n  },\n  notification: {\n    title: \"通知！\",\n    body: \"您来了一条新消息\",\n  },\n});\n\niN.setFavicon(10).player();\n\nvar n = new Notify();\nn.init({\n  effect: \"flash\",\n  interval: 500,\n  message: \"有消息拉！\",\n  audio: {\n    file: [\"openSub.mp4\", \"openSub.mp3\", \"openSub.wav\"],\n  },\n  notification: {\n    title: \"通知！\",\n    icon: \"\",\n    body: \"您来了一个客户\",\n  },\n});\n\nn.setFavicon(10).player();\n```\n\n## 贡献者\n\n一如既往，感谢我们出色的贡献者！\n\n\u003ca href=\"https://github.com/jaywcjlove/iNotify/graphs/contributors\"\u003e\n  \u003cimg src=\"https://jaywcjlove.github.io/iNotify/CONTRIBUTORS.svg\" /\u003e\n\u003c/a\u003e\n\n由 [contributors](https://github.com/jaywcjlove/github-action-contributors) 制作。\n\n## License\n\n[MIT © Kenny Wong](./MIT-LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaywcjlove%2FiNotify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaywcjlove%2FiNotify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaywcjlove%2FiNotify/lists"}