How to Open Native Apps from H5 Pages: Schemes, Smart Banners & Universal Links

During the Chinese New Year holidays, developers still need to learn techniques for opening native apps from H5 pages. This article explains how to detect whether an app is installed and how to launch it on iOS and Android.

Overview

When a user clicks a button on an H5 page, the goal is to open the corresponding app if installed, otherwise redirect to a download page. Different handling is required for Android (Google Play, etc.) and iOS (App Store). The article also discusses scenarios such as H5 pages displayed inside WeChat.

Custom Scheme

App developers can register a custom URL scheme (e.g., goto://wahaha). Common schemes for popular apps are listed (taobao://, mqq://, weixin://, etc.). Front‑end developers can use these schemes in anchor tags or trigger them via location.href or an invisible iframe.

Examples:

<a href="ibooks://">iBooks link</a>

<a href="21cto://21cto.com/article/2929">Custom schema link</a>

Smart App Banners

iOS Safari supports Smart App Banners via a meta tag placed in the page head. Adding

<meta name="apple-itunes-app" content="app-id=YOUR_APP_ID"/>

displays a banner that opens the app or redirects to the App Store.

Advanced usage can include the app-argument parameter to deep‑link to a specific page inside the app, and affiliate data for tracking.

<meta name="apple-itunes-app" content="app-id=311507490,app-argument=http://bookID/1234"/>

Detecting App Installation

Because browsers cannot directly query installed apps, a common workaround is to attempt to open the scheme, start a setTimeout (e.g., 500 ms), and if the app does not launch, redirect to a download URL. The technique often uses a hidden iframe to avoid navigation errors.

Example JavaScript (simplified):

var url = { open: 'ssdk://news_Article', down: 'http://www.okapp.com/download' };
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = url.open;
setTimeout(function(){ window.location.href = url.down; }, 500);

Universal Links

iOS 9 introduced Universal Links, allowing standard HTTPS URLs to open the app when the app is installed. This requires an apple-app-site-association JSON file on the web server specifying the app’s bundle identifier and supported paths.

Android equivalents include deep‑linking libraries such as Branch.io.

WeChat Considerations

WeChat blocks custom schemes unless the developer is on a whitelist. Therefore, when the page is viewed inside WeChat, the user should be prompted to open the link in an external browser.

Conclusion

The article summarizes several practical methods—custom schemes, Smart App Banners, hidden iframes with timeout, and Universal Links—for launching native apps from web pages, noting their limitations and the need for testing across browsers and platforms.