Flutter Web support

[dawsonc623]

Are there plans to support Flutter Web at any point? There is a Notification API in JavaScript, so I imagine it is possible.

[MaikuB]

Not likely at this stage. I looked at how the notifications API works on the web and every callback is tied to each instance of a notification so the model is quite different. It looked like the only thing that can be done is to show a notification immediately i.e. there's no way to schedule a notification. As such a developers would most likely need to put a guard in their code when running if web support was provided in the plugin.

This leads me to think there isn't much value in providing web support through this plugin as you could use the notifications API directly via Dart with full functionality and in a similar manner if the plugin were to support. Could be I missed seeing a use case for adding it the plugin so happy to be persuaded but note that web support would need contributions from others.

[dawsonc623]

Thanks for the response. Admittedly, I have not looked into what it would take. I can think of a few "clever" things that could be done (such as using setTimeout for a "scheduled notification"), but I would actually have to spend some real time thinking through all of the nuances.

I think having at least partial support for notifications in web would be worthwhile - especially the instant notifications. The most fundamental use case I can think of is communication systems where the app may notify a user whenever they receive new communication.

Having a guard in place for detecting whether or not certain features are in place is not uncommon in the web, anyway. Feature detection is kind of a fact of life when running on many platforms. In fact, this library already has some Android-only and iOS-only things that need to be addressed by the user, so I do not think that is going to be a huge concern. The added benefit, however, is a consistent API for the features that are available across multiple platforms. There would just need to be solid documentation for what is available on which platforms.

As for getting it done, I have never written a Flutter plugin before, and I am admittedly new to Flutter and the ecosystem in general. However, since it is likely I will have to find a way to support web notifications for my project anyway (it is for work, so if it is a requirement then I have no choice) I figure I might as well do it in a way others can benefit from, as well.

[hiashutoshsingh]

I am using this in web it works fine...is there any enhancement needed in this ? @MaikuB

[MaikuB]

@hiashutoshsingh i'm not sure how you are using this plugin on the web when it doesn't support it to begin with.

[gedw99]

Regarding the scheduling just use hive with a timer

[CodeDoctorDE]

Any updates?

[giorgio79]

It is definitely not working on web, getting this error
[+1886 ms] Error: Unsupported operation: Platform._operatingSystem at Object.throw_ [as throw] (http://localhost:62072/dart_sdk.js:4361:11) at Function._operatingSystem (http://localhost:62072/dart_sdk.js:55045:17) at Function.get operatingSystem [as operatingSystem] (http://localhost:62072/dart_sdk.js:55091:27) at get _operatingSystem (http://localhost:62072/dart_sdk.js:55004:27) at Function.desc.get [as _operatingSystem] (http://localhost:62072/dart_sdk.js:4855:17) at Function.get operatingSystem [as operatingSystem] (http://localhost:62072/dart_sdk.js:54957:26) at LocalPlatform.get operatingSystem [as operatingSystem] (http://localhost:62072/packages/platform/src/interface/local_platform.dart.lib.js:20:26) at LocalPlatform.get isAndroid [as isAndroid] (http://localhost:62072/packages/platform/src/interface/platform.dart.lib.js:37:19) at new flutter_local_notifications_plugin.FlutterLocalNotificationsPlugin.private (http://localhost:62072/packages/flutter_local_notifications/src/flutter_local_notifications_plugin.dart.lib.js:202:28)

[giorgio79]

Even if you dont intend to support web, could you make sure the package does not break the app if it is compiled to web?
Here is the official way of checking if you are in the web environment:

https://api.flutter.dev/flutter/foundation/kIsWeb-constant.html
https://stackoverflow.com/questions/57937280/how-can-i-detect-if-my-flutter-app-is-running-in-the-web

[rainerlonau]

It´s really strange, because this new verions of firebase cloud messaging uses this plugin and it´s tagged to work with 'web':
https://pub.dev/packages/firebase_messaging/versions/8.0.0-dev.14/example
I mixed my code with their example, using flutter_local_notifications in my app already. But atm I don´t get the notifications popup in chrome showing. I get messegas though and can react to then in my code.
Whenever I have an error like @giorgio79 mentioned I use
if (!kIsWeb)
to exclude flutter_local_notifications.
But it would be awesome to have an step-by-step tutorial or working example on this topic. Seems firebase cloud messaging is just starting to implement 'web' support

[gedw99]

Can you try taking the PWA and “Add to homescreen “ so that it runs in the OS webview. It’s available in all browsers on desktop and mobile.

It will elevate the privileges to allow it to work perhaps.

also seen it do the opposite too with some things like MediaScreen for Video capture.

depend on OS your using for desktop and mobile too.

[gedw99]

It´s really strange, because this new verions of firebase cloud messaging uses this plugin and it´s tagged to work with 'web':
https://pub.dev/packages/firebase_messaging/versions/8.0.0-dev.14/example
I mixed my code with their example, using flutter_local_notifications in my app already. But atm I don´t get the notifications popup in chrome showing. I get messegas though and can react to then in my code.
Whenever I have an error like @giorgio79 mentioned I use
if (!kIsWeb)
to exclude flutter_local_notifications.
But it would be awesome to have an step-by-step tutorial or working example on this topic. Seems firebase cloud messaging is just starting to implement 'web' support

Can you link all the way down to show it being imported ?
i can’t seem to find it when I follow the import chain . I get to here : https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_messaging/firebase_messaging_web/pubspec.yaml

[rainerlonau]

It´s really strange, because this new verions of firebase cloud messaging uses this plugin and it´s tagged to work with 'web':
https://pub.dev/packages/firebase_messaging/versions/8.0.0-dev.14/example
I mixed my code with their example, using flutter_local_notifications in my app already. But atm I don´t get the notifications popup in chrome showing. I get messegas though and can react to then in my code.
Whenever I have an error like @giorgio79 mentioned I use
if (!kIsWeb)
to exclude flutter_local_notifications.
But it would be awesome to have an step-by-step tutorial or working example on this topic. Seems firebase cloud messaging is just starting to implement 'web' support

Can you link all the way down to show it being imported ?
i can’t seem to find it when I follow the import chain . I get to here : https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_messaging/firebase_messaging_web/pubspec.yaml

It´s here: https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_messaging/firebase_messaging/example/lib/main.dart

[giorgio79]

Whenever I have an error like @giorgio79 mentioned I use
if (!kIsWeb)
to exclude flutter_local_notifications.

Yes, I am doing the same in the app code, howerver, the issue seems to be coming from how flutter_local_notifications checks for the platform as per

[+1886 ms] Error: Unsupported operation: Platform._operatingSystem at Object.throw_ [as throw]
...
packages/flutter_local_notifications/src/flutter_local_notifications_plugin.dart.lib.js:202:28)

Flutter web does not yet support Platform, so kIsWeb should be checked first until dart / Flutter gets this right I guess :) (as per https://api.flutter.dev/flutter/foundation/kIsWeb-constant.html
https://stackoverflow.com/questions/57937280/how-can-i-detect-if-my-flutter-app-is-running-in-the-web)
Otherwise, I guess I could play with platform dependent build like https://pub.dev/packages/build_config, and exclude this package from the web build, but I wanted to avoid another can of worms :D

[sgehrman]

At least fix the flutter web crash, it's been months.

[giorgio79]

PLease fix this issue by using https://pub.dev/packages/universal_platform instead of dart.io for Platform.operatingSystem

[morzan1001]

Hey everyone, i've also been doing some work with native browser notifications for a flutter web app and here's how i solved it.

Dart provides via the notification class of dart:html a direct implementation of the notification api which is normally called by javascript (https://api.dart.dev/stable/2.16.1/dart-html/Notification-class.html).

So I check in the code if the app is currently running in a browser and if so I use Notification.requestPermission(); to request permission from the browser and then Notification('Test Message'); to display a message via the browser.

For me this works great and I thought maybe this can help some of you when you want to display notifications in the browser.

[MaikuB]

@morzan1001 Nice find! didn't know Dart has support for this. I believe this would make a web implementation easier though if it's going to map to the APIs that the plugin supports, it looks like a web implementation should only cover scenarios when a notification needs to be shown instantly.

Having said that, I believe the web spec for notifications has more functionality that isn't available. For example, being able to specify the vibration pattern via the constructor seems to be missing but a read-only property exists

[mikhael28]

@MaikuB I'm curious, as of today does this package still break a web build during compilation - even if the API's are not explicitly called in a web build? I would like to include this for my iOS and Android builds, but since we want to also (at least partially) support the web - it would be nice to know this doesn't break things completely.

[mkhatib]

@mikhael28 I am using this and web compiles fine. Didn't do anything special myself. That might have been fixed already.

@morzan1001 thanks for sharing! Any chance you explored scheduling notifications? Not sure web supports it, but if there's a way to use ServiceWorkers in flutter, one might be able to use that along the Notifications API to implement scheduling. Maybe. Anyhow, I'd love to see a snippet of how you implemented web notifications alongside using flutter_local_notifications

[MaikuB]

@mikhael28 this was fixed a while back

[morzan1001]

@mkhatib For my flutter project, receiving messages in the background is currently not a usecase, so I can't provide an implementation. But there is indeed a way to register ServiceWorkers in Flutter. You can use this library and then just let the ServiceWorker spawn notifications using the API.

[mikhael28]

@MaikuB alright great, thank you!

[loic-hamdi]

Any update on the Web support implementation?

[mikhael28]

@loic-hamdi if you read the thread, you will see there is some basic support - it looks like you need to request notification permissions first.

[razfazz]

having support for Web (PWA) would be great. also looks like there is some good notifiication support in PWA https://stackoverflow.com/a/56435090/5525799

[mikhael28]

duo xie maiku

[ervindobri]

Any updates on this?

[The-RootCause]

Any updates or progress ? Thank you

[koji-1009]

flutter/flutter#145828

I have submitted a feature request regarding Service Worker. I believe we can move this issue forward once the feature is added.

[Levi-Lesches]

Not likely at this stage. I looked at how the notifications API works on the web and every callback is tied to each instance of a notification so the model is quite different. It looked like the only thing that can be done is to show a notification immediately i.e. there's no way to schedule a notification. As such a developers would most likely need to put a guard in their code when running if web support was provided in the plugin.

@MaikuB I'm curious about this now as I've picked up some more Flutter web projects. As far as I can tell, we can support:

• cancel(id) by using ServiceWorkerRegistration.getNotifications() to get the notification in question, then calling Notification.cancel()
• cancelAll() by calling Notification.cancel() for all the notifications returned by ServiceWorkerRegistration.getNotifications()
• getActiveNotifications() by returning the result of ServiceWorkerRegistration.getNotifications()
• getNotificationAppLaunchDetails by having the service worker pass the initial event to the new window
• pendingNotificationRequest could return an empty list
• periodicallyShow, and periodicallyShowWithDuration would not be supported. They could be safely modified to return Future<bool> to see whether they succeeded.
• And of course, Future.show would be supported by either creating a Notification object or using ServiceWorkerRegistration.showNotification()

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. What do you think?

[Levi-Lesches]

From more research, it seems this is a viable option. I'm not guaranteeing I have time now, but since I'm interested, I started a branch to get some testing going. So far, I've managed to:

• get the example running on web
• register the web plugin at launch
• request permission
• fire a notification with show()
• implement getActiveNotifications()
• implement cancel() and cancelAll()

I'll keep making progress using the approach I described above, and I've started a draft PR at #2466 for anyone to follow and subscribe to. The branch may change at any time, but if you'd like to play around or try it out, feel free to do so.