Acknowledge whether user has a program bound to a certain protocol

Question

I need to know if on their browser or OS, user has a navigation program associated with the protocol geo:

My link are like this: <a href="geo:51.5125509,-0.2190250">Address</a>

Previously, I was just checking if user was on mobile, and in this case, open the link. If on desktop, the link was changed to

https://www.openstreetmap.org/directions?to=51.5125509,-0.2190250.

However, user can have registered a default website or program on desktop for a given protocol, so I want to change my function.

I'v tried to test

navigator.registerProtocolHandler('geo', 'https://www.example.com/%s', 'Test Geo Handler');

but it necessarily triggers a permission modale and actually does not tell anything about what I need.

EDIT: I already checked these questions but in my case it's not a custom protocol so I thought I might have a chance.

Check if a browser supports a custom protocol using JavaScript?

How to check if a custom protocol supported

Answer 1

The navigator.registerProtocolHandler() method allows web applications to register themselves as possible handlers for particular protocols, but it does not provide a way to check if any handler is already registered for a protocol without triggering a permission modal.

So you might consider a practical approach: attempting to navigate or open the geo: link and handling any errors or fallbacks gracefully.
That is not straightforward because browsers do not typically provide feedback to JavaScript about whether a protocol handler is available or if the attempt to open the protocol was successful.

But, for your specific use case, you could enhance the user experience by providing options based on the device type or allowing the user to choose their preferred navigation method.
Continue using device detection to provide a sensible default. Mobile devices are more likely to have a native handler for geo: links.

For desktop users, instead of directly changing the geo: link, you could offer a choice. Display a modal or a dropdown that allows desktop users to select between opening the link in a map service on the web (like OpenStreetMap or Google Maps) or attempting to open it directly with a registered program.

<a href="#" onclick="handleGeoLink('51.5125509,-0.2190250')">Address</a>

<script>
function handleGeoLink(coords) {
  // Detect mobile devices (simple check, consider using a library for a robust solution)
  if (/Mobi|Android/i.test(navigator.userAgent)) {
    // Directly attempt to open geo: link on mobile devices
    window.location.href = `geo:${coords}`;
  } else {
    // For desktop, offer choices or directly navigate to a web map service
    // Example: open a modal or use a dropdown to let the user choose
    if (confirm("Do you want to open this address in a web map service?")) {
      window.open(`https://www.openstreetmap.org/directions?to=${coords}`, '_blank');
    } else {
      // Optionally, try to open the geo: protocol directly
      // That may not work if no handler is registered, but there is no direct way to check
      window.location.href = `geo:${coords}`;
    }
  }
}
</script>

Again, this does not directly detect if a geo: protocol handler is registered on the desktop, but instead improves user experience by offering choices.
Direct detection of protocol handler support without triggering a permission modal or without user action remains a limitation in web APIs due to privacy and security reasons.