JS pulls up or downloads the app implementation code

The product puts forward a requirement. Use the mobile web page to determine whether your company's app is installed. If it is installed, launch the app. If it is not installed, it will jump to the download page.

After various attempts to check the information, I summarized a fairly acceptable method.

The principle of launching the app is to unify the js and native addresses into one address, for example (qiyimobile://self/qiyi.madeindexpage). The browser then initiates a request. If the app is installed, it will intercept the request and open it.

The following is the Android code configuration. In fact, the scheme and host need to be unified with the js side

<span style="font-size:18px;"><intent-filter> 
        <action android:name="android.intent.action.VIEW" /> 
        <category android:name="android.intent.category.DEFAULT" /> 
        <category android:name="android.intent.category.BROWSABLE" /> 
        <data  
      android:scheme="qiyimobile"  
      android:host="self/qiyi.madeindexpage"  
      android:pathPrefix="/**"> 
     </data> 
</intent-filter></span>

js side is a little more troublesome. If it is easier to just launch the app, just connect directly through a or window.location.href="**". However, there is a problem here, that is, some mobile phones will recognize the protocol we set before and try to open the webpage when the app is not installed. Of course, they will report that the webpage cannot be found. The iframe method used here has slightly better compatibility.

 var ifr = document.createElement('iframe');
 ifr.src = 'qiyimobile://self/qiyi.madeindexpage';
 document.body.appendChild(ifr);

When the app is not installed on the phone, you should jump to the download page. Many people say that you can jump directly after a delay, as follows

window.location.href=“打开地址”
 setTimeout(function() {  
  window.location.href=“下载地址”
      }, 500);

Of course, this is also problematic, because some mobile phones will not automatically clear the timer when launching the app. That is, regardless of whether the app is installed or not, the page will jump to download after 500ms. Page. So judging whether you need to jump to the download page is the most troublesome thing. Finally, trying the following is a better solution.

Set an initial time. There will be an end time after opening and pulling up the app address. Calculate the difference between the two. When the difference is greater than a certain time, it means that the app is installed. When the difference is small, it means that the app is not opened and you need to jump to Download page.

The final code is as follows

downloadapp.addEventListener('click', function() {
      var start = new Date();//记录初始时间
      var t = 500;
      var ifr = document.createElement('iframe');
      ifr.src = 'qiyimobile://self/qiyi.madeindexpage';//打开app
      document.body.appendChild(ifr);
      ifr.onload = function() {
      };
      ifr.style.display='none';
      setTimeout(function() {
        document.body.removeChild(ifr);
        var end = new Date();//记录结束时间
        console.log(end - start)
        if (end - start <= (t + 30)) {//两者之差小于30ms时跳转到下载页
          window.location.href = "https://www.baidu.com"
        }
      }, t);
    })

The above is the JS implementation code for pulling up or downloading the app introduced by the editor. I hope it will be helpful to you. Everyone is helpful. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more articles related to the implementation code of JS pulling up or downloading the app, please pay attention to the PHP Chinese website!