Redirect to application if installed, otherwise to App Store

后端未结

关注

 8  2531

I know it\'s possible to link directly to an app in iOS by registering a custom scheme (e.g. so://) and it\'s also possible to link to the app in the appstore via itunes.

相关标签:

8条回答

天涯浪人

2020-12-02 05:23

If you have a web page you link to from the email with the web page containing an iframe with the src set to the custom scheme for your App, iOS will automatically redirect to that location in the App. If the app is not installed, nothing will happen. This allows you to deep link into the App if it is installed, or redirect to the App Store if it is not installed.

For example, if you have the twitter app installed, and navigate to a webpage containing the following markup, you would be immediately directed to the app. If you did not have the Twitter app installed, you would see the text "The Twitter App is not installed."

<!DOCTYPE html>
<html>
    <head>
    <title>iOS Automatic Deep Linking</title>
    </head>
    <body>
        <iframe src="twitter://" width="0" height="0"></iframe>
        <p>The Twitter App is not installed</p>
    </body>
</html>

Here is a more thorough example that redirects to the App store if the App is not installed:

<!DOCTYPE html>
<html>
    <head>
    <title>iOS Automatic Deep Linking</title>
    <script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
    <script src='//mobileesp.googlecode.com/svn/JavaScript/mdetect.js'></script>
    <script>
      (function ($, MobileEsp) {
        // On document ready, redirect to the App on the App store.
        $(function () {
          if (typeof MobileEsp.DetectIos !== 'undefined' && MobileEsp.DetectIos()) {
            // Add an iframe to twitter://, and then an iframe for the app store
            // link. If the first fails to redirect to the Twitter app, the
            // second will redirect to the app on the App Store. We use jQuery
            // to add this after the document is fully loaded, so if the user
            // comes back to the browser, they see the content they expect.
            $('body').append('<iframe class="twitter-detect" src="twitter://" />')
              .append('<iframe class="twitter-detect" src="itms-apps://itunes.com/apps/twitter" />');
          }
        });
      })(jQuery, MobileEsp);
    </script>
    <style type="text/css">
      .twitter-detect {
        display: none;
      }
    </style>
    </head>
    <body>
    <p>Website content.</p>
    </body>
</html>

0 讨论(0)

小鲜肉

2020-12-02 05:31

If someone is still stuck in this issue and needs easiest solution, you will love node-deeplink

1.) If app is installed: Calling an app through deep linking will always call componentDidMount of root component. So you can attach a listener there. Like:

Linking.getInitialURL()
      .then(url => {
        if (url) {
          this.handleOpenURL({ url });
        }
      })
      .catch(console.error);

    Linking.addEventListener('url', this.handleOpenURL);



handleOpenURL(event) {
    if (event) {
      console.log('event = ', event);
      const url = event.url;
      const route = url.replace(/.*?:\/\//g, '');
      console.log('route = ', route);
      if(route.match(/\/([^\/]+)\/?$/)) {
        const id = route.match(/\/([^\/]+)\/?$/)[1];
        const routeName = route.split('/')[0];

        if (routeName === 'privatealbum') {
          Actions.privateAlbum({ albumId: id });
        }
      }
    }
  }

2.) If app is not installed: Just set up a route in your server and node-deeplink package will handle the bridging between web browser to app store when a app is not installed in your mobile.

By this, both the cases will be handled without any struggle

0 讨论(0)

上一页 1 2