- Notifications
You must be signed in to change notification settings - Fork1
An extended NotificationsAPI for Dart Web notifications
License
cybex-dev/js_notifications
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
An extended NotificationsAPI for Dart Web notifications.
Examples of notifications on different platforms.
Example of a simple notification:
JsNotificationsPlatform.instance.showNotification("Test Notification", tag:"test");
Example of a notification with actions:
JsNotificationsPlatform.instance.showNotification("Oh no!", body:"Subverted expectations result in expected unexpected expectations. Anyway, check the icon...", tag:"inquisition", icon:"https://pbs.twimg.com/media/CtCG_f4WcAAJY-1.jpg", actions: [JSNotificationAction(action:"dismiss", title:"Whatever"),JSNotificationAction(action:"unexpected", title:"Didn't expect that"), ], requireInteraction:true,);
Note: when hovering over the notification to display actions, the image is not displayed.
The 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.
Add the following to yourpubspec.yaml file:
dependencies:js_notifications:^0.0.3
Copy the service worker file namedjs_notifications-sw.js from theexample directory to your web directory.The name is very important, so make sure to have the file namedjs_notifications-sw.js.
import'package:js_notifications/js_notifications.dart';
final _jsNotificationsPlugin=JsNotificationsPlatform.instance;
_jsNotificationsPlugin.requestPermission().then((permission) {print(permission);});
_jsNotificationsPlugin.showNotification('Title', { body:'Body', icon:'icon.png', badge:'badge.png', image:'image.png', tag:'tag', data: {'key':'value' }, });
_Note: the tag is used to identify the notification, if a notification with the same tag is shown, the previous notification is replaced.
For convenient notification access, provide a tag or one will be generated via theuuid package, specificallyuuid.v4()._
Here, we use theactions parameter to add actions to the notification. These are filled withJSNotificationAction objects.
JsNotificationsPlatform.instance.showNotification("Click me", body:"An interactive notification", tag:"interactive", actions: [JSNotificationAction(action:"dismiss", title:"Click me"),JSNotificationAction(action:"click-me", title:"No, click me!"), ], requireInteraction:true,);
There are convenience methods to create actions,fromAction,fromTitle andsimpleWithIcon.
- macOS: Limited to 2 actions (text only) with
Settingsautomatically added as a 3rd option. - Windows: Limited to 3 actions, fully customizable.
- Linux: Usually limited to 3 actions, customizability based on distro & desktop environment.
For this, we use therequireInteraction: true option
JsNotificationsPlatform.instance.showNotification("Attention", body:"I just wanted your attention", tag:"attention", actions: [JSNotificationAction(action:"dismiss", title:"Go away"), ], requireInteraction:true,);
_jsNotificationsPlugin.actionStream.listen((event) {print(event);switch (event.action) {case"unexpected": {_sendBasicNotification("I know, neither did they.");break; }//... other actions }});_jsNotificationsPlugin.dismissStream.listen((event) {print(event);});
_jsNotificationsPlugin.getAllNotifications().then((notifications) { notifications.forEach((notification) {print(notification); });});
_jsNotificationsPlugin.getNotification('my-awesome-notification-tag-here').then((notification) {print(notification);});
Any and all feedback, PRs are welcome.
About
An extended NotificationsAPI for Dart Web notifications
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.