Blazor Hybrid WebView not able to Obtain GPS Location

[nssidhu]

Description

I have created RCL Project which uses GoogleMap. This is purely done in Javascript/HTM/css using google maps Javascript SDK.
I am trying to use this RCL in Blazor Hybrid Project.
It does load the Map, but Location is denied.

Not sure if this was needed but i also entered the permission for android platform in AndroidManifest.xml, that did not help either.

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
	
	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
	<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
	<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

	<uses-feature android:name="android.hardware.location" android:required="false" />
	<uses-feature android:name="android.hardware.location.gps" android:required="false" />
	<uses-feature android:name="android.hardware.location.network" android:required="false" />

Is there anything else that i need to do?

My location obtaining scripts are in JavaScript file (googleMaps.js) which is my custom JavaScript code that obtains location
and plots the marker for current location.
Additionally, it will also plot multiple marker for nearby business location.

In addition, I Manually gave location permission in the Android emulator, even that did not help

Steps to Reproduce

The steps to create are long.

Version with bug

Preview 13 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

android

Did you find any workaround?

No

Relevant log output

In the picture

[Eilon]

Note to whoever investigates: There might be some WebView-specific settings to enable code inside the WebView (JavaScript world) to use certain browser APIs. Or maybe there are specific Android app permissions to enable it (not just the regular "does this APP use location", but perhaps a more specific "does this app's WEBVIEW use location".

I know we've seen similar things before to do with mic/camera or something like that.

[nssidhu]

I do see that it does require some additional code, but no sure how to write for the current platform.
https://docs.microsoft.com/en-us/answers/questions/291239/geolocation-in-webview-droid.html
https://www.youtube.com/watch?v=L0BjhcP1uDA
https://turbomanage.wordpress.com/2012/04/23/how-to-enable-geolocation-in-a-webview-android/

[jfversluis]

To add to @Eilon's comment, this was the issue he's talking about: #3694

[nssidhu]

@jfversluis I tried options mentioned in #3694, but it did not help me in this latest release of MAUI that i am using.

[jfversluis]

Would you be able to put this together in a small sample project? Preferable on GitHub?

[ghost]

Hi @nssidhu. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

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.

[nssidhu]

Here is the GitRepo

https://github.com/nssidhu/BlazorHybridWebViewGPSIssue

[nssidhu]

So i updated the repo to check if native GPS/Location would work and it does. so now in the repo i have native code that is working, but at the same time JavaScript/webview which is not working.

I would have ended up using native code and forget about obtaining location from JavaScript for Location, but native code does not have live tracking, i would have to get it via timer. I also noticed that getting location via native code is extremely slow as well.

As suggested by @Eilon there might be permission that need to be enabled for WebView/BlazorWebView since that is browser-based permission.

Now when I use the same code in Blazor wasm project, i don't need to specify the permission upfront, when JavaScript Code (that will get gps coordinate) is about to execute it prompts user for permission. So, wondering if it is allowed to provide those permission upfront in the code, like we do in native code.

[nssidhu]

Hoping this might be helpful to someone who is looking into fixing it within BlazorWebView
https://www.youtube.com/watch?v=L0BjhcP1uDA

[jfversluis]

With the link you added earlier, I added this code to your MauiProgram.cs

        //This is need for enabling webView GPD & Camera Permission.
        //If you are not using WebView or using webview but don't need acces to GPS & Camera, this may not be needed at all
        builder.ConfigureMauiHandlers(handlers =>
        {
            handlers.AddHandler<IBlazorWebView, MauiBlazorWebViewHandler>();

            // Gerald: This was added
	   BlazorWebViewHandler.BlazorWebViewMapper.AppendToMapping("EnableGeoLocation", (handler, webview) =>
	   {
		handler.NativeView.Settings.SetGeolocationEnabled(true);
		handler.NativeView.Settings.JavaScriptEnabled = true;
		handler.NativeView.Settings.AllowFileAccess = true;
		handler.NativeView.Settings.SetGeolocationEnabled(true);
		handler.NativeView.Settings.SetGeolocationDatabasePath(handler.NativeView.Context.FilesDir.Path);
	   });
        });

Not 100% sure if these are all needed, but at least this makes it work :)

Additionally I noticed a Google Maps API key in there... You might want to invalidate that one now ;)

[SteveSandersonMS]

@jfversluis Is it your opinion that this is a bug in BlazorWebView, or is a bug in the underlying MAUI WebView, or is not a bug at all and is something we should have covered in docs somewhere?

[ghost]

Hi @nssidhu. 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.

[nssidhu]

@jfversluis, regarding key, yes I will invalidate in few days (that one was created a specially for this testing), Thanks for pointing that out though.
I just tried out that code now and I am still getting error "user denied the request for geolocation".
I see you are using exact same emulator as well.
I am using Microsoft Visual Studio Enterprise 2022 (64-bit) - Preview Version 17.1.0 Preview 6.0

[jfversluis]

@SteveSandersonMS I would say either something we need to cover in docs (probably more general: this is how to handle the web permissions in .NET MAUI Blazor world) or something we need to make easier for our users.

From a user standpoint I would be in favor of basically just enabling and allowing all permissions on the web level since it will be handled on the platform level. On the other hand, we are dealing with sensitive sensors and APIs here, I can also see that people wouldn't appreciate us just opening up everything.

[jfversluis]

@nssidhu did you try to reinstall the application? Maybe you wrongfully accidentally denied the platform permission at some point? Could you double-check that? As you can see it works for me :)

[nssidhu]

@SteveSandersonMS I would say either something we need to cover in docs (probably more general: this is how to handle the web permissions in .NET MAUI Blazor world) or something we need to make easier for our users.

From a user standpoint I would be in favor of basically just enabling and allowing all permissions on the web level since it will be handled on the platform level. On the other hand, we are dealing with sensitive sensors and APIs here, I can also see that people wouldn't appreciate us just opening up everything.

My thoughts on this,

1. I think seasoned programmers will appreciate if they can precisely control what permission to enable. Providing document on
   how to do it should be sufficient.
2. Enabling all permissions by default will also prompt users to accept all permissions. The better alternative, I think would be to translate platform level specified permission from maifest.xml to equivalent WebView level permission. This will allow things to remain consistent on how to enable permission between WebView and Platform level.

[nssidhu]

@nssidhu did you try to reinstall the application? Maybe you wrongfully accidentally denied the platform permission at some point? Could you double-check that? As you can see it works for me :)

I tried uninstalling and re-installing and also checked in the emulator's setting/location that app does have location permission enabled. But still got the error.
I have made some changes to the code after creating the Git repo, so will try again by taking the code from Git repo and will check if i still run into issue.

[nssidhu]

So i have tried it again, still getting permission denied error.
I have pushed my commits to Git as well.

One thing i noticed is that during first run, i already got the "permission denied error", even before i got the chance to enable permission in the prompt as you can see in the screen shot below.

After providing permission and re-running it , as you can see the app now does have the permission.
My question here is are those permission applicable to BlazorWebView/WebView or just to native code (Which is working anyway) ?

@jfversluis i am clueless here as to why it worked for you. I even tried moving builder.Services.AddBlazorWebView(); before and after the handler to see if that would make any difference, but it did not

[jfversluis]

I think I see the same happening... Here's how I make it work: first deploy, I see the dialog for permission and accept. The error shows.

Now, make sure that you do have a location set in the emulator settings and run the app again either through debugging or not. It will now load and show the location although it still says "User denied the request for Geolocation". I didn't inspect the code too much, but I expect there to be something in your code that doesn't handle this properly as it does work on the second try.

[nssidhu]

@jfversluis My bad, I should have removed the native code before publishing.
There is a code that get the Location using native code which is working, that is why you see the location plotted on the Map.
// await GetLocation();
that call is made out at line 67 in GoogleMpa.razor.cs
i did that to check if i am able to get the Location using Native Code and if can use that as alternative in case things don't work.

I removed/commented it and checked back my code.

[nssidhu]

Any updates on how to get this working ?

[mkArtakMSFT]

@MackinnonBuck can you please include a note in our docs on how to enable location access for WebView? Thanks!

[MackinnonBuck]

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.