Can't use custom URL schemes with Photino+React

[stevesobol]

As with the last issue I opened, I'm trying to fix this myself; I'm just opening this issue to document the problem.

With Photino and plain Javascript, I can register a custom URL scheme and it just works.

With React, something isn't happening. Clicking on a link with the href set to "app://blah/whatever" generates an error stating that the app: scheme isn't registered.

This is happening with the Edge Webview2 - I think. I do have the WebView2 runtime installed. I'm not 100% sure Photino's using it and I'm not sure how to check whether WebView2 is being used.

[MikeYeager]

Hi @stevesobol Photino does use the Evergreen version of Webview2 on Windows. We appreciate your work on this. Photino registers custom schemes prior to loading any content. We're wondering if React is trying to register the same scheme causing confusion? Out of curiosity, have you tried it on Mac or Linux? If you can share the code with us we can try it out as well. We generally do our Photino work on Thursdays btw.

[stevesobol]

I haven’t tried Linux or Mac yet. Data point: posting and receiving messages through window.external does work.

…

On Aug 3, 2023 at 07:37 -0700, Mike Yeager ***@***.***>, wrote: Hi @stevesobol Photino does use the Evergreen version of Webview2 on Windows. We appreciate your work on this. Photino registers custom schemes prior to loading any content. We're wondering if React is trying to register the same scheme causing confusion? Out of curiosity, have you tried it on Mac or Linux? If you can share the code with us we can try it out as well. We generally do our Photino work on Thursdays btw. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[stevesobol]

Debian Bookworm x64/KDE works. Trying Mac next.

The problem might be Vite (probably isn't, but might be). I'm working on getting a Photino/React project to work with Vite on Windows. In addition to Mac, I'm going to create a new project (by default, Photino/React uses npm) and I'll see if I have problems with it.

One other difference: I'm using Visual Studio on the Windows PC, and VSCodium on Linux (and that's what I'll use on the Mac, too). Probably should also try using VSCodium on Windows.

(VSCodium is Visual Studio Code, but it's built without all the proprietary crap Microsoft adds, and is MIT-licensed, unlike Visual Studio Code.)

[stevesobol]

The difference between my successful attempts and my unsuccessful attempts: the successful attempts used npm and straight Javascript. Creating a new project using the current React template works. With only one modification, I can load scripts using a custom script tag on any platform (I had it working on all three).

But my preferred toolchain includes Vite and TypeScript. And to get things working with my environment:

• I had to make sure I was using the TypeScript compiler's default module-resolution scheme. (compilerOptions.moduleResolution)

• Once I fixed that problem, the custom URL scheme still wasn't working, and the reason was... CORS! That was fixed by disabling CORS in my vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
    plugins: [react()],
    build: {
        outDir: './build',
        rollupOptions: {
            input: ['src/index.tsx', 'index.html'],
            external: [/^app:.*/,]
        }
    },
    server: {
        cors: false,
    },
})

Now, everything works!

This is important because create-react-app isn't supported anymore, and Vite will scaffold a simple React app for you. Plus, Vite uses Rollup, which is much faster than Webpack, which IIRC is what CRA used.

https://dev.to/ag2byte/create-react-app-is-officially-dead-h7o

We should develop a Photino.React template that uses Vite instead of CRA.

(Wait. Did I just volunteer...?)

Let's leave this issue open until I can add a link to a gist.

[MikeYeager]

@stevesobol We would love to see a sample!

[MikeYeager]

Closing due to inactivity. Please re-open if this is still an issue.