Summary of H5 wake-up APP implementation methods and points for attention

Preface

As a front-end developer, you often have such a requirement. If a user has installed your own APP, open the APP homepage or a specified page. If the APP is not installed, jump to the corresponding download page. Such a demand is also an indispensable part of attracting new users and fission, so we need to solve it. Let’s take a look today at how to achieve this.

Jump to APP method

There are currently two better ways to implement this function: URL Scheme, meta tags and Universal Links.

URL Scheme

URL Scheme is an external interface that allows apps to jump to each other. By defining a unique URL path for the APP, you can quickly open the specified APP from the outside. The URL Scheme of each app is different. If the same URL Scheme exists, the system will respond to the URL Scheme of the app installed first, because the URL Scheme of the app installed later is overwritten and cannot be called. The format of the URL scheme is:

[scheme]://[host]/[path]?[query]

Introducing several commonly used URL Scheme platforms:

• QQ: mqq://
• WeChat: weixin://
• Tencent Weibo: TencentWeibo://
• Taobao: taobao://
• Alipay: alipay://
• Weibo: sinaweibo://

Supports both Android and iOS platforms

meta tags

Set the meta tag on the web page, and when you open it with Safari, your app's navigation bar will be displayed at the top. If the app is not installed, click it to jump to the app store to download it. If the app is installed, you can directly wake up the app through the meta tag at the top.

iOS only

Universal Links

Universal Links is a universal link. Users of iOS9 and above can seamlessly redirect to an app by clicking on this link without having to open it through Safari. If the user does not have this app installed, the web page pointed to by this link will be opened in Safari.

iOS exclusive and only available in iOS 9.0

Various ways of use

Both URL Scheme and Universal Links need to be configured, and only after configuration can they take effect.

URL Scheme Usage

The URL Scheme is not difficult to use. The simplest way to use it is to add an a tag link:

<a href="weixin://" rel="external nofollow" >Open WeChat</a>

This method of access is relatively simple and can be used on both Android and IOS, but it does not work on WeChat. WeChat has a whitelist that completely blocks the use of URL Scheme. Unless it is added to the whitelist, it can be opened directly like JD.com, otherwise it is impossible.

Meta tag usage

The meta tag method is also very simple. You only need to add the meta tag to the web page:

 <meta charset="UTF-8" name="apple-itunes-app" content="app-id=7777777, affiliate-data=myAffiliateData, app-argument=yourScheme://">

The effect is to display a sticky bar at the top of the web page.

Use of Universal Links

This configuration method is a bit troublesome. I have not been involved in iOS development, so I will give you an introduction to the official website.

Summarize

None of the above methods can provide a perfect solution. Either only Apple supports it, or there will be many restrictions on head apps, so you need to do a lot of other work yourself to adapt.

First of all, we need to confirm which method to take. Based on the above introduction, only the first URL Scheme method should be the best choice. After all, both platforms support it. The next step is how to solve how to open it in the head APP. In fact, this problem usually prompts users to open it in an external browser, so this basically solves the problem. Let's use code to implement it step by step.

Realize the wake-up APP function

Prompt browser to open

First, you need to implement a small prompt that opens in the browser as follows:

Realize the function of judging the top APP

Here, we use the browser's User-Agent to determine whether it is WeChat or other APP browsers. The code is as follows:

/**
 * Determine whether the browser is a head APP
 */
function isBlackApp() {
  var u = navigator.userAgent.toLowerCase();
  return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf('mqqbrowser') > -1;
}

The above function determines several browsers, WeChat, Weibo, QQ, and QQ Browser. If you click the open or download button, it will determine whether it is a head APP. If it is, it will prompt you to open it in the browser. Otherwise, you can directly open your own APP. The code is as follows:

function openTuer() {
  if (isBlackApp()) {
    // Header APP lets the web page display tips and opens in the browser showTips();
  } else {
    // If it is not a head APP, open it directly. You don’t need to use parameters here. You can add them later after writing them. openApp(0, 0);
  }
}

The core method of waking up the APP

The openApp function is also mentioned above, so what is it specifically like? Here we will see how to implement this function. Here, according to the current project requirements, two parameters are required to open the APP, one is which to open a certain page of the APP, and the other is the parameter arg required to open a certain page. So our openApp function requires two parameters.

Implementation of openApp

The openApp function is very simple, calling two functions as follows:

function openApp(which, arg) {
    jumpApp("testApp://which=" + which + "&arg=" + arg);
    noApp();
}

The first function is responsible for opening the APP, and the second one is responsible for the address jump if the APP is not opened or installed.

Implementation of jumpApp

Note that this function can be implemented using iframe before iOS8, but it cannot be implemented after iOS8 because it is blocked by Apple, so it can only be implemented through page jump. The specific code is as follows:

function jumpApp(t) {
  try {
    var e = navigator.userAgent.toLowerCase(),
      n = e.match(/cpu iphone os (.*?) like mac os/);
    if (((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)) {
      window.location.href = t;
    } else {
      var r = document.createElement("iframe");
      (r.src = t), (r.style.display = "none"), document.body.appendChild(r);
    }
  } catch (e) {
    window.location.href = t;
  }
}

Implementation of noApp

The implementation of noApp is also very simple. Just define a timer. If there is no response within a certain period of time, jump to the specified download page. The specific code is as follows:

var timer = null;
function noApp() {
  var t = Date.now(),
    r = "http://www.tuerapp.com";
  timer = setTimeout(function() {
    return Date.now() - t > 2200
      ? (clearTimeout(timer), !1)
      : !document.webkitHidden && !document.hidden && void (location.href = r);
  }, 2000);
}

So far, the basic functions have been realized, and there may be many problems in the actual process.

Summarize

This is the end of this article about the implementation method and precautions of H5 wake-up APP. For more relevant H5 wake-up APP method 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!