Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flutter Web support #481

Open
dawsonc623 opened this issue Feb 18, 2020 · 31 comments
Open

Flutter Web support #481

dawsonc623 opened this issue Feb 18, 2020 · 31 comments
Labels
help wanted Extra attention is needed

Comments

@dawsonc623
Copy link

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

@MaikuB
Copy link
Owner

MaikuB commented Feb 19, 2020

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
Copy link
Author

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.

@MaikuB MaikuB added the help wanted Extra attention is needed label Aug 8, 2020
@hiashutoshsingh
Copy link

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

@MaikuB
Copy link
Owner

MaikuB commented Oct 16, 2020

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

@gedw99
Copy link

gedw99 commented Oct 21, 2020

Regarding the scheduling just use hive with a timer

@CodeDoctorDE
Copy link

Any updates?

@giorgio79
Copy link

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
Copy link

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
Copy link

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
Copy link

gedw99 commented Jan 30, 2021

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
Copy link

gedw99 commented Jan 30, 2021

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
Copy link

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
Copy link

giorgio79 commented Jan 31, 2021

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
Copy link

sgehrman commented Jun 8, 2021

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

@giorgio79
Copy link

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

@morzan1001
Copy link

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
Copy link
Owner

MaikuB commented Feb 16, 2022

@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
Copy link

@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
Copy link

mkhatib commented Mar 10, 2022

@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
Copy link
Owner

MaikuB commented Mar 10, 2022

@mikhael28 this was fixed a while back

@morzan1001
Copy link

@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
Copy link

@MaikuB alright great, thank you!

@loic-hamdi
Copy link

Any update on the Web support implementation?

@mikhael28
Copy link

@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
Copy link

razfazz commented Mar 15, 2023

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
Copy link

duo xie maiku

@ervindobri
Copy link

Any updates on this?

@The-RootCause
Copy link

Any updates or progress ? Thank you

@koji-1009
Copy link

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
Copy link
Contributor

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 Levi-Lesches mentioned this issue Nov 15, 2024
13 tasks
@Levi-Lesches
Copy link
Contributor

Levi-Lesches commented Nov 15, 2024

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.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests