javascriptcustom-protocol

JavaScript - Invoke Custom Protocol


I created a custom protocol into the registry named fdmyalbs. Invoking this protocol executes a PowerShell script which, for the time being, logs into a pre-defined file the received string (command + arguments).

When using windows' File Explorer and entering into the address field the string fdmyalbs:MyApp?data=sdfsdfsdfsfdsf sdfsdfsdfsdfsdfsdf, the created file shows fdmyalbs:MyApp?data=sdfsdfsdfsfdsf%20sdfsdfsdfsdfsdfsdf which is exactly the input except that a blank is replaced by %20.

This means that the custom protocol definition is correct and activates the script as expected. Now, I'm trying to do the same from within a vanilla JavaScript function using the following code:

:
:
var l_Test_URL = 'fdmyalbs:MyApp?data=sdfsdfsdfsfdsf sdfsdfsdfsdfsdfsdf' ;
const fetchPromise = fetch(l_Test_URL);
  
  fetchPromise
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error: ${response.status}`);
      }
      return response.json();
    })
    .then((data) => {
      console.log(data[0].name);
    });
:
:
  

This code triggers an error message which reads: Fetch API cannot load fdmyalbs:MyApp?data=sdfsdfsdfsfdsf%20sdfsdfsdfsdfsdfsdf. URL scheme "fdmyalbs" is not supported.

My interpretation is that fetch is not suitable in this case. I'm looking for an alternative method (instead of fetch) that would do the job.


Solution

  • The Fetch API is inextricably linked to HTTP. This means that your interpretation is correct... that you cannot use the Fetch API with your custom protocol handler.

    As far as I know, the only think you can do with that custom protocol is to link to it.

    <a href="fdmyalbs:MyApp?data=sdfsdfsdfsfdsf%20sdfsdfsdfsdfsdfsdf">Launch App</a>
    

    You can also call a click on that link programmatically...

    document.querySelector('a').click();
    

    This should prompt the user about launching your app.

    Alternatives to the custom protocol handler include running a web server as part of your app. Alternatively, you create a browser extension to push data back and forth between your app and your native app.