{"id":24992762,"url":"https://github.com/cybex-dev/js_notifications","last_synced_at":"2026-05-06T00:38:15.797Z","repository":{"id":257792896,"uuid":"859761439","full_name":"cybex-dev/js_notifications","owner":"cybex-dev","description":"An extended NotificationsAPI for Dart Web notifications","archived":false,"fork":false,"pushed_at":"2025-04-04T17:52:47.000Z","size":646,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-06T20:42:24.002Z","etag":null,"topics":["flutter","flutter-package","flutter-plugin","flutter-ui","flutter-web","javascript","notifications","notifications-api","notifications-plugin","service-worker","web"],"latest_commit_sha":null,"homepage":"https://js-notifications-web.web.app/","language":"Dart","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/cybex-dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-09-19T08:30:31.000Z","updated_at":"2025-11-19T11:58:07.000Z","dependencies_parsed_at":"2024-12-10T06:18:02.319Z","dependency_job_id":"f1f9916c-43f3-4e54-8076-0f19513b12a7","html_url":"https://github.com/cybex-dev/js_notifications","commit_stats":null,"previous_names":["cybex-dev/js_notifications"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/cybex-dev/js_notifications","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybex-dev%2Fjs_notifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybex-dev%2Fjs_notifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybex-dev%2Fjs_notifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybex-dev%2Fjs_notifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cybex-dev","download_url":"https://codeload.github.com/cybex-dev/js_notifications/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybex-dev%2Fjs_notifications/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32673955,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["flutter","flutter-package","flutter-plugin","flutter-ui","flutter-web","javascript","notifications","notifications-api","notifications-plugin","service-worker","web"],"created_at":"2025-02-04T13:57:38.936Z","updated_at":"2026-05-06T00:38:15.773Z","avatar_url":"https://github.com/cybex-dev.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# js_notifications\nAn extended NotificationsAPI for Dart Web notifications.\n\n## UI Examples\n\nExamples of notifications on different platforms.\n\n### Simple Notification\n\nExample of a simple notification:\n\n```dart\nJsNotificationsPlatform.instance.showNotification(\"Test Notification\", tag: \"test\");\n```\n\n### macOS\n\n![](https://raw.githubusercontent.com/cybex-dev/js_notifications/refs/heads/master/images/macos_simple_notification.png)\n\n### Windows\n\n![](https://raw.githubusercontent.com/cybex-dev/js_notifications/refs/heads/master/images/windows_simple_notification.png)\n\n### Linux\n\n![Coming soon](https://raw.githubusercontent.com/cybex-dev/js_notifications/refs/heads/master/images/linux_simple_notification.png)\n\n### Notification with action\n\nExample of a notification with actions:\n\n```dart\nJsNotificationsPlatform.instance.showNotification(\n    \"Oh no!\",\n    body: \"Subverted expectations result in expected unexpected expectations. Anyway, check the icon...\",\n    tag: \"inquisition\",\n    icon: \"https://pbs.twimg.com/media/CtCG_f4WcAAJY-1.jpg\",\n    actions: [\n        JSNotificationAction(action: \"dismiss\", title: \"Whatever\"),\n        JSNotificationAction(action: \"unexpected\", title: \"Didn't expect that\"),\n    ],\n    requireInteraction: true,\n);\n```\n\n### macOS\n\nNote: when hovering over the notification to display actions, the image is not displayed.\n\n![](https://raw.githubusercontent.com/cybex-dev/js_notifications/refs/heads/master/images/macos_unexpected_notification.png)\n\n### Windows\n\n![](https://raw.githubusercontent.com/cybex-dev/js_notifications/refs/heads/master/images/windows_unexpected_notification.png)\n\n### Linux\n\n![Coming soon](https://raw.githubusercontent.com/cybex-dev/js_notifications/refs/heads/master/images/linux_unexpected_notification.png)\n\n## Inspiration\nThe Dart Web package is limited in showing notifications, one can only show a title, body, and icon. This package extends the NotificationsAPI to allow for more customization.\n\n## Setup\n\n### Imports\nAdd the following to your `pubspec.yaml` file:\n```yaml\ndependencies:\n  js_notifications: ^0.0.3\n```\n\n### Copy service worker\nCopy the service worker file named `js_notifications-sw.js` from the `example` directory to your web directory. _The name is very important, so make sure to have the file named `js_notifications-sw.js`._\n\n## Usage\n\n### import the package\n```dart\nimport 'package:js_notifications/js_notifications.dart';\n```\n\n### Grab instance\n```dart\n\nfinal _jsNotificationsPlugin = JsNotificationsPlatform.instance;\n```\n\n\n### Requesting permission\n```dart\n_jsNotificationsPlugin.requestPermission().then((permission) {\n    print(permission);\n});\n```\n\n![](https://raw.githubusercontent.com/cybex-dev/js_notifications/refs/heads/master/images/chrome_permissions.png)\n\n### Creating a notification\n```dart\n_jsNotificationsPlugin.showNotification('Title', {\n    body: 'Body',\n    icon: 'icon.png',\n    badge: 'badge.png',\n    image: 'image.png',\n    tag: 'tag',\n    data: {\n      'key': 'value'\n    },\n  }\n);\n```\n\n_Note: the tag is used to identify the notification, if a notification with the same tag is shown, the previous notification is replaced.\n\nFor convenient notification access, provide a tag or one will be generated via the [uuid](https://pub.dev/packages/uuid) package, specifically `uuid.v4()`._\n\n### Creating a notification with actions\n\nHere, we use the `actions` parameter to add actions to the notification. These are filled with `JSNotificationAction` objects.\n\n```dart\nJsNotificationsPlatform.instance.showNotification(\n    \"Click me\",\n    body: \"An interactive notification\",\n    tag: \"interactive\",\n    actions: [\n        JSNotificationAction(action: \"dismiss\", title: \"Click me\"),\n        JSNotificationAction(action: \"click-me\", title: \"No, click me!\"),\n    ],\n    requireInteraction: true,\n);\n```\n\nThere are convenience methods to create actions, `fromAction`, `fromTitle` and `simpleWithIcon`.\n\n#### Platform limitations:\n- macOS: Limited to 2 actions (text only) with `Settings` automatically added as a 3rd option. \n- Windows: Limited to 3 actions, fully customizable.\n- Linux: Usually limited to 3 actions, customizability based on distro \u0026 desktop environment.\n\n### Creating a \"heads up\" notification\n\nFor this, we use the `requireInteraction: true` option\n\n```dart\nJsNotificationsPlatform.instance.showNotification(\n    \"Attention\",\n    body: \"I just wanted your attention\",\n    tag: \"attention\",\n    actions: [\n        JSNotificationAction(action: \"dismiss\", title: \"Go away\"),\n    ],\n    requireInteraction: true,\n);\n```\n\n### Handling notification click or close events\n```dart\n_jsNotificationsPlugin.actionStream.listen((event) {\n    print(event);\n    switch (event.action) {\n        case \"unexpected\": {\n            _sendBasicNotification(\"I know, neither did they.\");\n            break;\n        }\n        //... other actions\n    }\n});\n\n_jsNotificationsPlugin.dismissStream.listen((event) {\n    print(event);\n});\n```\n\n\n### Get a list of all notifications\n```dart\n_jsNotificationsPlugin.getAllNotifications().then((notifications) {\n    notifications.forEach((notification) {\n      print(notification);\n    });\n});\n```\n\n### Get a specific notification\n```dart\n_jsNotificationsPlugin.getNotification('my-awesome-notification-tag-here').then((notification) {\n    print(notification);\n});\n```\n\n## Features and bugs\n\nAny and all feedback, PRs are welcome.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcybex-dev%2Fjs_notifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcybex-dev%2Fjs_notifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcybex-dev%2Fjs_notifications/lists"}