There is such a requirement in business: after the internal object link is opened on the third party H5 page (mobile browser, wechat, Dingding, etc.), it will jump to an H5 transfer page. The user can arouse the APP and enter the target object in the APP by clicking the “Open APP view” button on the page.

Train of thought

  • To realize H5 page arousing mobile APP, we need to use APP URL Schema protocol (communication between applications), which is provided by APP developer colleagues.
  • We judge the operating environment to distinguish Android/iOS terminal, and invoke the corresponding Schema protocol to evoke APP (some companies provide the same Schema format at both ends).
  • Because it is technically impossible to monitor whether the Schema successfully evokes APP, the user can jump to the download interface after a specified time through a timer to guide the user to download (it is deemed that the evoking fails and the APP is not installed locally).
  • In addition, if a third party uses Schema in wechat browser, it will not work (wechat may now provide relevant labels to achieve this). Therefore, it is necessary to judge the wechat environment and prompt users to click on the upper right corner “… “Open in the default browser.

URL Schema Protocol format

URL Schema is an in-page jump protocol. Through this protocol, you can easily jump to an APP object page.

A simple Schema protocol format is as follows:

[scheme]://[path]? [query] Scheme: protocol name (user-defined by the developer) (optional if necessary) Path: page path Query: request parametersCopy the code

For example, you can call Schema like this:

<a href="tenx://file? type=folder&id=ESC"</a>Copy the code


1. The internal application (understood as the application for enterprise employee account login) jumps to the H5 transfer page: the internal application can judge whether the running environment is moving the H5 application, take the internal application link as the query parameter, and jump to the H5 transfer page for APP recall processing;

Here we can use higher-order components, such as React:

<Route exact path='xxx' render={props= > <MobileInterceptor {. props} component={App} />} / >function isRunMobile() {
  return /Android|webOS|iPhone|iPad|BlackBerry/i.test(window.navigator.userAgent);

const isMobile: boolean = isRunMobile();

type TProps = {
  component: React.ComponentType<any>;
} & RouteComponentProps;

const MobileInterceptor = ({ component, ... otherProps }: TProps) = > {
  if (isMobile) {
    const { origin, href } = window.location;
    window.location.href = 'H5 invokes APP page URL + current page information passed as parameter ';
    return null;
  return React.createElement(component, otherProps);
Copy the code

2. H5 transfer page evokes APP through the button: When clicking the button:

  • First, obtain the operating environment: when the built-in browsers such as wechat and Dingding are opened, the guide is opened in the default browser of the mobile phone;
  • When in the mobile phone independent browser, first set the loading animation to evoke the APP;
  • Access the protocol via window.location.href to invoke the APP;
  • Define a timer to jump to the download APP interface at the appropriate time (deemed unsuccessful).
export function isRunThirdPartyApp() {
  const userAgent = navigator.userAgent.toLowerCase();
  return {
    isWechat: /MicroMessenger/i.test(userAgent),
    isQQ: /QQ/i.test(userAgent) && ! userAgent.toLowerCase().includes('mqqbrowser'),
    isWebo: /WeiBo/i.test(userAgent),
    isDing: /DingTalk/i.test(userAgent),
    isMail: /Mail/i.test(userAgent),

const [status, setStatus] = useState<'default' | 'openInBrowser' | 'loading'> ('default');

const openApp = () = > {
  const runEnvs = isRunThirdPartyApp();
  let isOpenInBrowser = Object.keys(runEnvs).some(envKey= > runEnvs[envKey as keyof typeof runEnvs]);

  if (isOpenInBrowser) {

  if (status === 'loading') return;

  window.location.href = 'Schema url';
  setTimeout(() = > {
    if(! docHidden.current) {window.location.href = 'Download url';
    docHidden.current = false;
  }, 3000);
Copy the code

One thing needs to be noted: we used dochidden. current above to judge whether to jump or not. When the APP is successfully evoked, the page will be hidden.

const docHidden = useRef<boolean> (false); If the APP is successfully invoked, the page is considered to be hidden and the download page will not be jumped

useEffect(() = > {
    const handleVisibilityChange = () = > {
      if (document.hidden) docHidden.current = true;
    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () = > {
      document.removeEventListener('visibilitychange', handleVisibilityChange); }});Copy the code

The problem record

There is a problem when evoking APP in xiaomi mobile phone browser on Android:

  • When the APP is not running in the background of the phone, the APP can be normally aroused and the target object can be opened in the Mi browser.
  • When the APP is running in the background of the phone, a new window will be opened to open the target object instead of opening the APP when the Mi browser is invoked.
  • After investigation, it was found that there was no problem with jingdong’s Schema invocation in the same way of calling Schema, but there was a problem with the APP we wanted to invoke.
  • Finally, android colleagues checked the problem and processed the action support initiated by Mi browser to evoke APP through Schema in the code and configuration compatibility.