Example of writing mobile H5 to invoke APP (IOS, Android)

iOS

1. URL scheme

This solution is basically for browsers other than WeChat, QQ built-in browser, QQ browser, etc. You can get a scheme from native and put it in the a tag or jump to location.href.

Use an iframe to jump to the page. If there is a scheme, if not, it will trigger the timer to jump to the download address. However, this method in iOS will prompt you twice when there is no app.

 var openApp = function (src) {
        // Try to open the APP through iframe. If it can be opened normally, it will switch directly to the APP and automatically block the default behavior of the a tag. // Otherwise, open the href link of the a tag const ifr = document.createElement('iframe');
        ifr.src = src;
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        var time = +new Date()
        window.setTimeout(() => {
          document.body.removeChild(ifr);
          if ((+new Date()-openTime>2500)){
            window.location = 'APP Store download address'
          }
        }, 600);
      };

2. Universal Link (ios)

This is a feature introduced by iOS9. If your app supports Universal Links, you can easily launch the app through a traditional HTTP link (if your app is already installed on the iOS device, no additional judgment is required), or open a web page (if your app is not installed on the iOS device). Perhaps it can be explained more simply. Before iOS 9, for the need to wake up the APP from various browsers, Safari, UIWebView or WKWebView, we usually can only use scheme.

window.location.href = "Universal Link given by APP"

Summarize

Compatible writing

if (isGreaterThan9){
   window.location.href = "Universal Link given by APP";
   return;
}
openApp(src)

android

Similar methods

 if (openApp('url scheme url')) {
            openApp('url scheme url');
          } else {
            setTimeout(() => {
              window.location.href = 'APP Market Download Address'; // Usually Google, different app stores have different addresses}, 600);
          }
      }

Summarize

This is the end of this article about mobile H5 wake-up APP. For more relevant mobile H5 wake-up APP content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!