I Am
Volodymyr Hudyma
<FrontEndDeveloper />
You Are Here: Home/Open Mobile Application From The Browser

Open Mobile Application From The Browser

January 30, 2021

Table Of Contents

    Launching the mobile application of the specific page from the browser is called Mobile App Deep Linking.

    It is very useful if you have both web and mobile applications and want to easily navigate between them.

    You can launch an email campaign that contains a link that users can click to read more about your products in your mobile app.

    There are many use cases, but the general purpose is to optimize user experience and increase conversion rates.

    Deep Linking Types

    There are two main types of Deep Links:

    • Default

      The link opens an application if it is installed, otherwise an error message will be displayed.

    • Deferred

      The link opens an application if it is installed, otherwise the user is redirected to Play or App Store (or another chosen location).

    Besides these, you may have heard of Contextual Deep Linking.

    Contextual Deep Links are usually default or deferred with some additional parameters added to collect more information about users.

    Creating A Deep Link

    Let's create a Deferred Deep Link to our mobile app that will open it if it's installed, otherwise redirect to the Store where the user can download it.

    Important note: This solution may not work in all browsers or older Android/iOS versions. However, it should work fine with Chrome and Safari.

    ANDROID

    For Android, Google provides the Intent URL:

    // Android Intent Syntax
    intent:  
      HOST/URI-path // Optional Host  
      #Intent;  
        package=\[string\];  
        action=\[string\];  
        category=\[string\];  
        component=\[string\];  
        scheme=\[string\];  
      end;
    
    // Android Code
    const url = "intent://APP_HOST/#Intent;scheme=APP_NAME;package=APP_PACKAGE;end";
    
    window.location.replace(url); 

    Be sure to replace APP_NAME and APP_PACKAGE with the values that belong to your mobile app, APP_HOST is an optional host value that may not be needed (but is required to open the instagram app in the next example).

    Example code for Instagram:

    // Open Instagram
    const url = "intent://instagram.com/#Intent;scheme=https;package=com.instagram.android;end";
    
    window.location.replace(url); 

    IOS

    On iOS, try opening the mobile app and set the timeout to a few seconds, which only runs when an app is not installed:

    window.location.replace("APP_NAME"); 
    
    // Wait 10s and redirect to App Store if app was not opened
    setTimeout(() => {
      window.location.replace("APP_STORE_URL"); 
    }, 10000);

    Be sure to replace APP_NAME and APPSTOREURL with the values that belong to your mobile application.

    Example code for Instagram:

    window.location.replace("instagram://"); 
    
    setTimeout(() => {
      window.location.replace("https://apps.apple.com/us/app/instagram/id389801252"); 
    }, 10000);

    The Complete Example

    To put all the code together, let's create a simple React application:

    npx create-react-app deep-linking

    Install the react-device-detect library, which would help us detect the user's operating system:

    yarn add react-device-detect

    Open the App component and replace it with the following code:

    import React, { useEffect } from "react";
    import { isAndroid, isIOS } from "react-device-detect";
    
    const App = () => {
      useEffect(() => {
        if (isAndroid) {
          const url =
            "intent://instagram.com/#Intent;scheme=https;package=com.instagram.android;end";
    
          window.location.replace(url);
        } else if (isIOS) {
          window.location.replace("instagram://");
    
          setTimeout(() => {
            window.location.replace(
              "https://apps.apple.com/us/app/instagram/id389801252"
            );
          }, 10000);
        } else {
          window.location.replace("https://instagram.com");
        }
      }, []);
    
      return (
        <div className="App">
          <div>
            If you have not been automatically redirected, click on the following link:
          </div>
          {isAndroid ? (
            <a href="https://play.google.com/store/apps/details?id=com.instagram.android">
              Open Android app
            </a>
          ) : isIOS ? (
            <a href="https://apps.apple.com/us/app/instagram/id389801252">
              Open iOS app
            </a>
          ) : (
            <a href="https://instagram.com">Open Web app</a>
          )}
        </div>
      );
    };
    
    export default App;

    Important note: Do not try to test it on either iOS or Android by manually typing the url into the browser, as it will not work. Create a link somewhere that points to your React app and test by clicking on it.

    Summary

    Mobile App Deep Linking is a very complicated subject.

    It is very hard to prepare a solution that works for every scenario.

    Fortunately, you do not always have to take care of it yourself - there are a lot of paid services that would generate links for you and do all the redirect logic under the hood.

    Newsletter
    Receive all new posts directly to your e-mail
    No spam, only quality content twice a week
    Let me know what you think about this article
    Click here to write response...
    Pawan
    September 07, 2021
    Hii, How can i open metamask app using chrome browser in mobile?
    Author
    August 29, 2021
    Hi, Giuseppe. Could you please write me on LinkedIn: https://www.linkedin.com/in/volodymyr-hudyma-98bb78131/? I will try to help you.
    Giuseppe
    August 26, 2021
    Hi, can you help me understand how to find the various app spec to do the intent?
    Author
    May 18, 2021
    Hi Alain. Are you asking if it works on Chrome > 25? It should work, but remember that you need a user action, like clinking on a link. If users type the URL directly into the browser, redirect won't work, as I mentioned in the article.
    Alain Brun
    May 18, 2021
    Hi Could you confirm it works on OS version > 25? An article from Google says no on Chrome : • When the Intent URI is redirected from a typed in URL. • When the Intent URI is initiated without user gesture. • JavaScript timer tried to open an application without user gesture. Alain Brun