How to implement "Open in app" button to a website for an app that uses iOS Universal Links?

Question

I have an React site that uses Apple App Site Association file to handle Universal Links and open the links to my site in my iOS app instead, in case the user has the app installed.

This works perfectly fine when I am clicking a link in some external location, e.g. Google search results.

The problem occurs when I try to create a popup that prompts the user if they want to open the link in app or continue in browser.

Reddit has similar functionality: Reddit's "Open in App" popup

Can this be done using Universal Links or do browsers actually prevent changing Browsing Context if I'm already on my site?

I tried creating this "Open in App" button:

<button
  onClick={() => {
    window.sessionStorage.setItem('has-reacted-to-use-in-app-popup', true);
    closePopup();
    
    // Redirect to app
    window.location.href = 'https://www.my-app-url.com/';
    // If the app is not installed, the timeout function will execute
    setTimeout(() => {
      // Redirect to App Store
      document.location.href = 'https://apps.apple.com/app/my-app-url/id1234567890';
    }, 1000);
  }}
>
  Open in App
</button>

It works perfectly locally and opens the app if it's installed and the store page if not, when the URL is different than https://www.my-app-url.com/

In production, it only reopens the index page.

Thank you in advance!

Answer 1

The app has it's own scheme which is instagram:// or myapp://

You can test your scheme just by entering the link 'myapp://' in the browser. If the scheme is good, it should open your app (on mobile - not sure what will happen on desktop).

If you're using react-native, your scheme should be inside app.json file.