maui
maui copied to clipboard
dotnet
Geolocation js API in BlazorWebView
Description
When I try to get geolocation inside a BlazorWebView, on iOS got a message like ":// Would Like To Use Yor Current Location". It's like when a simple page in a browser try to get location data. This message appears even when the app already have access to location data. After clicking OK on the popup, location works as expected. On Android platform Not working at all.
Steps to Reproduce
Try to get device location inside a BlazorWebView with javascript navigator.geolocation API.
Link to public reproduction project repository
none
Version with bug
7.0 (current)
Last version that worked well
Unknown/Other
Affected platforms
iOS, Android, Windows, macOS, I was not able test on other platforms
Affected platform versions
Every iOS and Android version
Did you find any workaround?
I can find some promising info on the web but none of them working.
https://github.com/darnton/BlazorDeviceInterop https://github.com/RemiBou/BrowserInterop https://github.com/dotnet/maui/issues/4768
Relevant log output
No response
Hi @kissgyula , were you able to review the sample app mentioned in this specific comment? https://github.com/dotnet/maui/issues/4768#issuecomment-1137906982
Please refer to this project as an example for implementing permission management in MAUI Blazor apps for Windows, Android, and iOS. It shows how to access the device's location, camera, and microphone from JavaScript web APIs.
We've decided to refer developers to this sample rather than add a docs page since implementing this is rather involved. In the future, we hope to provide a framework-integrated solution that doesn't require individual apps to worry about configuring WebView options and handling permission requests.
It has the same problem as I mentioned.
Asking Location permissions twice and the second popup can be scary for users.
The second problem is, that this example is for net6.0. With project upgraded to net7.0 got build errors.
Asking Location permissions twice and the second popup can be scary for users.
To make sure I understand the problem, is the issue:
- That there are any dialogs at all to ask for permission?
- That the user is being asked twice?
- That the dialog has the weird
://in it?
The second problem is, that this example is for net6.0. With project upgraded to net7.0 got build errors.
What errors did you get? I'm not aware of any breaking changes that would affect this type of thing.
On Android, the app asking for location permission, and in c# code I can get location data. Inside a BlazorWebView not.
On iOS got the second dialog with that "://" characters. I think this second dialog is the standard dialog in iOS Safari browser, when a page try to access location information. That "://" should be the URL of the website like "https://example.com" but becaouse BlazorWebView not have an URL we got this strange dialog. After clicking OK, I can get the location correctly.
The compile errorrs I got after changing to net7.0 is gone after deleting the bin and obj folders and rebuild the project. But have the same behavior. No location on android, and the second dialog in iOS.
I think I need other solution, like some kind of wrapper for Geolocation js API that got the location data in c# and update the location API data in the BlazorWebView. This projects ( https://github.com/darnton/BlazorDeviceInterop https://github.com/RemiBou/BrowserInterop ) I think do this, but also not working, cannot access Location trough Geolocation js API.
@kissgyula what happens when you try to run the sample from https://github.com/MackinnonBuck/MauiBlazorPermissionsExample? Please share details about your experience from it.
Hi @kissgyula. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.
@kissgyula what happens when you try to run the sample from https://github.com/MackinnonBuck/MauiBlazorPermissionsExample? Please share details about your experience from it.
It's different on every platform.
On iOS got that wierd popup message. (See screenshots).
On android cannot access the Geolocation API (https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) to get the device GPS position.
On Windows works as expected.
On macOS not tested, but i will do it later and report it.
The most problematic for me is the mobile platforms.
We've just discussed about some unique Android behavior, where it will prevent permission requests for too many times, if the permission was denied some fixed (2, 3 - not sure exactly) times. If the user runs into this problem, they will have to go into settings and manually grant the permission so that it works again. Maybe this is what you're facing?
Hi @kissgyula. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.
We've just discussed about some unique Android behavior, where it will prevent permission requests for too many times, if the permission was denied some fixed (2, 3 - not sure exactly) times. If the user runs into this problem, they will have to go into settings and manually grant the permission so that it works again. Maybe this is what you're facing?
No, the permissions are good. On other page in c# code the app has access to location data. The problem is with the BlasorWebview!
Please read back and see the screenshots. The prpblem on iOS is that second popup, and this popup appears every time when restart the app, even the app has the permission for location data. If you select "Allow While Using App" on the first popup, only the second "Browser dialog" asks for location permission every time. On Android not working at all.
Please make some tests and confirm this behavior.
I found some older posts on StackOverflow that mention that the only workaround they could find on iOS was to route all geolocation requests to the native part of the app:
- How to pass geolocation permission to react-native-webview?
- How to prevent WKWebView to repeatedly ask for permission to access location?
So I wonder if this is still true, then you'd have to do the same thing here as well. I think with Blazor it's at least a bit easier because you can use JSInterop to implement it (instead of manually sending messages).
If I understand it is not possible to override the second permission request on iOS becaus BlazorWebView is a browser embedded inside maui. And it's a security feature that cannot be disabled? Is it possible to mak that message more user friendly or is it an Apple thing, that cannot be controlled?
On Android is it possible that also the same security reason, that location request not working, but without any message or popup?
Is anybody can point me to the right direction, how can I "fake" the geolocation API inside the BlazorWebView?
Is it possible to mak that message more user friendly or is it an Apple thing, that cannot be controlled?
It looks like there's a conversation on StackOverflow about this topic: https://stackoverflow.com/questions/70312167/would-like-to-use-your-current-location. The issue can occur without BlazorWebView, so it's might just be a consequence of how WKWebView works.
Android permissions seem to work fine for me when I run the project. Maybe the problem is specific to a version of Android? What Android version are you testing with?
Hi @kissgyula. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.
This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.
I forked the MauiBlazorPermissionsExample, and modified to demonstrate my problem.
I added a map to the Location page. Here you can test the problem and see the behavior I discribed above.
You can see that the coordinates written with numbers works, since it came from c# code in Location.razor.
Whec you click on the location button on the map on Android nothing happends, on iOS you got the second popup that asks for permission.
https://github.com/kissgyula/MauiBlazorPermissionsExampleMap
I updated the sample to net8.0 and the dual prompts on iOS are still coming up (the native one, followed by the webview one). This at the very least should be properly documented so people considering using blazor hybrid are aware of the degraded user experience, even if it's not fixable.
I updated the sample to net8.0 and the dual prompts on iOS are still coming up (the native one, followed by the webview one). This at the very least should be properly documented so people considering using blazor hybrid are aware of the degraded user experience, even if it's not fixable.
Agree, ruins user experience.
