跪拜 Guibai
← All articles
Frontend

Three Ways to Launch a Native App from a Web Page

By WebGirl ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

App-launch from the web is a conversion funnel's narrowest point. Picking the wrong scheme means silent failures in WeChat, jarring permission dialogs on iOS, or users stranded on a broken link with no fallback. The implementation itself is trivial; knowing which combination to deploy per platform is what prevents drop-off.

Summary

Triggering a native app from a mobile web page is a frontend problem with three distinct solutions, each carrying a different cost in complexity and user experience. The oldest and most compatible method is the URL Scheme, a custom protocol like `myapp://` that acts as a blunt instrument: it fires off a request but cannot reliably confirm whether the app actually opened. A common fallback uses a timer and the Page Visibility API to guess failure and redirect to a download page.

For a smoother handoff on iOS 9+ and Android 6+, Universal Links and App Links replace custom schemes with standard `https://` URLs. When the app is installed, the link opens it directly with no prompt; when it is not, the same URL loads the corresponding webpage. The tradeoff is that this requires server-side association files and client-side configuration, pulling the work well beyond the frontend.

Inside WeChat's in-app browser, where URL Schemes are routinely blocked, the only official path is the `<wx-open-launch-app>` Web Component. It requires a verified WeChat Service Account bound to an Open Platform account and works most reliably on Android. The frontend's role across all three methods is narrow: fire the correct link. Whether the app wakes, and what it does next, is determined entirely by native-side configuration.

Takeaways
URL Scheme is the universal fallback but cannot confirm success and is often blocked inside WeChat's browser.
Universal Links (iOS) and App Links (Android) use standard HTTPS URLs to open the app when installed or load the webpage when not, eliminating pop-ups.
A timer paired with the Page Visibility API provides a rough heuristic for detecting URL Scheme failure and redirecting to a download page.
The `<wx-open-launch-app>` Web Component is the only sanctioned way to launch an app from within WeChat's in-app browser and requires a verified Service Account.
All three methods depend on native-side configuration; the frontend only fires the request.
Conclusions

The frontend's role in app-launching is surprisingly thin: it fires a link and guesses at the outcome. The real complexity lives in native manifest files, server-side association JSON, and WeChat's account-verification bureaucracy.

URL Scheme's inability to confirm success is a fundamental limitation of the protocol, not a browser bug. The timer-and-visibility workaround is a heuristic that will fail when the app takes longer than expected to open or when the OS suppresses background detection.

The fragmentation is stark: a single 'Open App' button may need three separate code paths depending on whether the user arrived from a system browser, a WeChat message, or a QR code scanned in-app.

Concepts & terms
URL Scheme
A custom protocol prefix (e.g., `myapp://`) registered by a native app with the operating system. Clicking a link with that scheme tells the OS to hand control to the registered app.
Universal Link (iOS) / App Link (Android)
A mechanism that associates a standard HTTPS domain with a native app. When the app is installed, the OS intercepts matching URLs and opens the app directly; otherwise, the URL loads normally in the browser.
Page Visibility API
A browser API that exposes whether a page is currently visible to the user (`document.hidden`). It is used in app-launching as a proxy to detect whether the browser was sent to the background.
WeChat Open Tag (`<wx-open-launch-app>`)
A WeChat-specific Web Component that, when tapped inside the WeChat in-app browser, launches a bound native app. It requires a verified WeChat Service Account and an Open Platform mobile application ID.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗