Web Support

[Levi-Lesches]

Note

This is a work in progress

Adds web support. The plan is as follows, taken from #481 (comment):

Basic functionality

• Get a web version of the plugin to register on launch
• Show a notification with show()
• List all notifications using getActiveNotifications()
• Cancel notifications using cancel() and cancelAll()
• periodicallyShow and periodicallyShowWithDuration would throw UnsupportedError
• pendingNotificationRequest would return an empty list

Advanced Functionality

• Support all customizations options offered by web.NotificationOptions
• Register a custom service worker that can listen for notification clicks
• Call handlers when a notification is clicked in the foreground / background
• Support getNotificationAppLaunchDetails() from terminated state

PR Cleanup

• Document everything (ie, re-enable lint)
• Add web-specific examples to the example app
• Write tests where applicable

Custom service workers

Of course, getNotificationAppLaunchDetails and setting any handlers would require the ability to customize the service worker. That appears to be blocked on flutter/flutter#145828, but after reading flutter/flutter#156910, it seems that today's service worker is not technically needed and can be replaced. While we wait for an official mechanism to do so, there is a way to do so today:

let flutter_sw = await navigator.serviceWorker.getRegistration();
if (flutter_sw != null) flutter_sw.unregister();
let plugin_sw = await navigator.serviceWorker.register("/flutter_local_notifications_sw.js");

Where our custom service worker can start off as simple as

function _handleNotif(event) {
  console.log(`Clicked: ${event}`);
  clients.openWindow("/you-clicked-on-a-notification");

}

self.addEventListener("notificationclick", _handleNotif);

Where of course, we'd add more to pass the details of the notification into the Flutter app, and let the plugin pull the data.

[Levi-Lesches]

@MaikuB I'll once again put in my request to disable the always_specify_types and lines_longer_than_80_chars lints, as they cause a lot of headache when trying to write readable code here. Disabling them now won't require changing old code, but will allow cleaner code going forward, and there may be a fair amount of code since this is a big feature. I'll also point out again that always_specify_types contradicts Effective Dart and there are even replacements such as omit_obvious_local_variable_types and specify_nonobvious_local_variabletypes. As for line lengths, the new formatter will allow custom line lengths, for which I find 100 is a reasonable limit, especially with variable names as long as WebFlutterLocalNotificationsPlugin.

[Levi-Lesches]

Love this test feedback!

 Failed to load ".../flutter_local_notification_test.dart": Instance of 'VmServiceDisappearedException'

[therickys93]

Hi @Levi-Lesches, I would like to know how I can install this alpha version inside my project. Can you please write a simple procedure on how to use it? Thanks so much

[Levi-Lesches]

Look into git dependencies in your pubspec, and set the URL to my repo and ref to my branch

[therickys93]

Look into git dependencies in your pubspec, and set the URL to my repo and ref to my branch

thanks so much. Is there an example on how to show a basic notification (title and subtitle) like on the other platforms? I cannot find a simple example in your code.

[Levi-Lesches]

It's been a while since I've touched this PR, but show() should work. Are you able to run the example app on chrome?