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.

[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

[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.