ERR_UNKNOWN_URL_SCHEME - Windows

[james-elicx]

Describe the bug

The URL scheme does not seem to be working on Windows. The dev tools console spits out the following, indicating an issue with the URL scheme on Windows.

GET spacedrive://thumbnail/6bb08002b967e052 net::ERR_UNKNOWN_URL_SCHEME

The thumbnails are being generated fine.

One thing that is maybe worth noting is that if you use the URL https://spacedrive.anything/thumbnail/6bb08002b967e052, the function for register_uri_scheme_protocol runs with spacedrive://anything/thumbnail/6bb08002b967e052 as the value for the parsed URI. It does not run at all when trying to use spacedrive:// though.

Reproduction

Run the dev or production build on Windows.

Expected behavior

No response

Platform and versions

pnpm 7.24.3
cargo 1.66.1 (ad779e08b 2023-01-10)
rustc 1.66.1 (90743e729 2023-01-10)

Operating System:
Edition: Windows 11 Pro
Version: 22H2
System Type: 64-bit operating system, x64-based processor

Stack trace

No response

Additional context

No response

[james-elicx]

Copying over what I wrote on Discord.

I believe that this may be by design at the moment.

@FabianLars wrote in tauri-apps/tauri#5333 (comment) that Windows uses https://(scheme).localhost/ instead of (scheme)://, which is backed up in the source code for Tauri's WebView library.

This issue MicrosoftEdge/WebView2Feedback#1825 has been tracking the use of custom protocol schemes in WebView2. The new CoreWebView2CustomSchemeRegistration class is intended to offer this functionality, however, it is still in prerelease.

I imagine that the folks over at Tauri will need to investigate the use of CoreWebView2CustomSchemeRegistration when setting up custom protocols on Windows once it joins stable releases of WebView2.

I could be wrong - I don't have much experience with Tauri - but from what I read, this explanation makes sense.

[oscartbeaumont]

If https://spacedrive.localhost/ works it should be a super easy fix. You would just need to do a conditional check for the os here. The only challenge with that is the OS check is async and that function is run in the React context so it can't be async. The best solution would probally be to const os = useOperatingSystem(); and then pass the result of that into the getThumbnailUrlById function when it's called inside React. This way it will guess the OS from the user agent on first load and then once Tauri responses with the correct OS it will update the URL it if we guessed it incorrectly.

[FabianLars]

I could be wrong - I don't have much experience with Tauri - but from what I read, this explanation makes sense.

Yep, all you said was correct so far.

About the os check:
In theory it should be enough to check it on the navigator or maybe on the userAgent. This is what we do in tauri itself too, and it's sync: https://github.com/tauri-apps/tauri/blob/75a0c79dea39e3e8372097152a0fa82cf6493686/tooling/api/src/helpers/os-check.ts
Speaking of what tauri does, it also has a helper function for custom protocols which handles the scheme and escaping: https://tauri.app/v1/api/js/tauri/#convertfilesrc which may serve as inspiration.

[oscartbeaumont]

We will look at moving to the convertFileSrc function then because it seems like the proper way to do it. I was not aware it existed when we introduced the custom protocol which is why it was not originally used.

We are doing something similar to the navigator hack you showed within the useOperatingSystem() hook here. Although the code you sent looks significantly cleaner.

Thanks for jumping in @FabianLars and thanks @james-elicx for reporting this.

[james-elicx]

Looking at one of the Tauri examples, the handler inside register_uri_scheme_protocol could probably be modified as follows.

Note that percent-encoding will need to be added as a dependency.

let url = req
	.uri()
	.strip_prefix("spacedrive://localhost/")
	.unwrap_or("");
let decoded_url = percent_encoding::percent_decode(url.as_bytes())
	.decode_utf8_lossy()
	.to_string();
let path = decoded_url.split('/').collect::<Vec<_>>();

And changing the getThumbnailById in App.tsx` to:

getThumbnailUrlById: (casId) => convertFileSrc(`thumbnail/${casId}`, 'spacedrive'),

Having tried this, I can confirm that it fixes the problem on Windows, but I cannot test if it functions as expected on macOS or Linux.