Programmers who have written hybrid must have encountered such needs. If the user has installed their own APP, they will open the APP or jump to a certain page in the APP. If it is not installed, guide the user to the corresponding page or app store to download. This involves the interaction between H5 and Native. H5 can evoke the APP and jump to the corresponding page. How does H5 realize the awakening APP?
So, let's talk about how H5 realizes the evocation APP. The end-calling technology here is also called deep link technology. Of course, different platforms implement it a little differently. These are the common ones.
URL Scheme (Generic)
Universal Link (iOS)
App Link, Chrome Intents (Android)
How H5 Evokes APP - Using URL Scheme
This method is a relatively common technology, and the compatibility of various platforms is also very good. It is generally composed of a protocol name, path, and parameters. This is generally provided by students developed by Native. After our front-end students get this scheme, they can be used to open the APP or a certain page in the APP.
Open Method
The commonly used opening methods are as follows.
1. Jump directly through the window.location.href
window.location.href = ''
2. Jump through iframe
const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = ''
document.body.appendChild(iframe)
3. Use the a tag to jump directly
4. Open via js bridge
window.miduBridge.call('openAppByRouter', {url: ''})
Determine Whether the Arousal Is Successful
When the user fails to evoke the APP, we hope to guide the user to download it. So how can we know whether the current APP is successfully evoked?
We can listen to the visibilitychange event of the current page. If the page is hidden, it means that the caller is successful. Otherwise, the caller fails and jumps to the app store.
Applicability
URL Scheme has good compatibility and can be supported by both Android and iOS. It is currently the most commonly used method. However, it also has some obvious disadvantages.
It is impossible to accurately judge whether the arousal is successful. Because in essence this way is to open a link, and it is not a normal HTTP link. Therefore, if the user does not install the corresponding APP, there will be no response in the browser after trying to jump. Use timers to guide users to the app store. However, the time of this timer does not have an accurate value, and the calling time of different mobile phones is also different. We can only roughly estimate its time to achieve, generally set to about 3000ms is more appropriate;
From the above picture, we can see that there will be a pop-up window prompting you whether to open the corresponding APP, which may lead to user loss;
There is a risk of URL Scheme hijacking. For example, if an app also registers this scheme with the system, the aroused traffic may be hijacked into this app;
Easily blocked. The app can easily intercept the jump initiated by the URL Scheme.
How H5 Evokes APP - Using Universal Link (iOS)
Universal Link is a new feature added in iOS 9, which can be used to open the APP directly through the link of the HTTPS protocol. Its advantage over the previous URL Scheme is that it uses the HTTPS protocol. So if there is no success in calling the terminal, then this webpage will be opened directly. It is no longer necessary to judge whether the arousal was successful. And with Universal Link, the popup will no longer pop up whether it is open or not. For users, the efficiency of calling the terminal is higher.
Principle
Register the domain name you want to support in the APP. You can configure an apple-app-site-association file in the root directory of your domain name. The specific configuration front-end programmers do not need to pay attention, just confirm the supported domain names with the iOS programmers.
Open Method
openByUniversal () {
// Open a page.
window.location.href = ''
// oia.zhihu.com
}
Applicability
Compared with URL Scheme, universal links have a big advantage in that there is no pop-up window prompting whether to open or not when calling the terminal. This will improve the user experience and reduce the loss of some users;
No need to care whether the user installs the corresponding APP. For users who do not have it installed, clicking the link will directly open the corresponding page, because it is also the path of the HTTP protocol. This can also solve the problem that the URL Scheme cannot accurately judge the failure of the calling an end to a certain extent;
Only available on iOS;
Can only be actively triggered by the user.
How H5 Evokes APP - Using App Link, Chrome Intents (Android)
App Link
At Google I/O 2015, Android M announced a new feature. App Links allow users to open a specific page of a specific app when they click on a common web link. Its premise is that the app has been installed and verified, otherwise a popup box will be displayed to open the confirmation option. Only supports Android M and above systems.
The biggest role of App Links is to avoid the select browser option box that appears when the app is awakened from the page. The premise is that the corresponding Scheme must be registered so that the associated App can be opened directly.
Chrome Intents
Chrome Intent is a deep-linking replacement for the URI scheme in the Chrome browser on Android devices. If the APP is installed, open the APP through the configured URI SCHEME. If the APP is not installed, the jump fallback URL is configured with the fallback URL, and if it is not configured, it will jump to the app market.
How H5 Evokes APP - Comparison of the Above Schemes
1. URI Scheme
The compatibility of the URI Scheme is the highest, but the experience is relatively poor.
When the APP to be invoked is not installed, this link will go wrong and the page will be unresponsive.
When there are multiple schemes registered with the same, there is no way to distinguish.
Jumping to the target APP from UIWebView in other apps is not supported, so both iOS and Android have their own unique solutions.
2. Universal Link
If the APP has been installed, it will directly evoke the APP; if the APP is not installed, it will jump to the corresponding web link.
Universal Link is to query which APP needs to be opened from the server, so there will be no conflict.
Universal Link supports jumping to the target app from UIWebView in other apps.
The disadvantage is that the user's choice is remembered. After the user clicks the Universal link, iOS will detect whether the user chose to open the app directly or open the website last time. Once the user clicks on this option, it will open your website through Safari. And in subsequent operations, this selection will continue by default unless the user opens it from your webpage by clicking the OPEN button on the Smart App Banner.
3. App link
Advantages are similar to Universal Link.
The disadvantage is that the market support received is relatively poor. In some browsers or mobile phone ROMs, you cannot link to the APP, but open the corresponding link in the browser.
When asking whether to use the APP to open the corresponding link, if "Cancel" is selected and "Remember Selection" is checked, then there will be no response next time you want to link to the APP again.