“As the saying goes that the program yuan will not write an article is not a good public number xiaobian”

Most companies have their own apps, and apps need a constant influx of new users to continue to operate and achieve good revenue. It is necessary to introduce new users into native APP in this way.

Some contents are not experienced well on the webpage, or some functions need to be realized in the APP, and users need to be introduced into the APP to retain users. Click the web button to open the APP and automatically jump to the corresponding page.

First of all, this method only applies to the mobile terminal H5 page, the general smart phone can be used. The es5 code pattern used here is easy to understand.

I’m going to introduce this to you in the form of a cartoon and I hope you can understand it better.

Let’s take a look at how to use a feature of mobile browsers:

The web page is opened by accessing the APP protocol, actually using the URL scheme of the APP.

If an app is installed, the protocol request will be detected by the app. During the opening of the app, the APP interface will cover the H5 webpage. Therefore, the access to open APP address is delayed after the download, so that users can not see the download jump.

If the app is not installed, the protocol request will have no effect. Execution continues until the jump page is downloaded.

Determine the UA of the current browser and uppercase it. For Android and ios models to do two different processing.

Determine android or ios models according to UA, and process them respectively.

Android devices:

This is implemented by hiding iframe. Iframe request protocol start address, creating an IFrame takes time, delay a little time, add the IFrame to dom, generate a request.

If the app is installed, the browser will pop up a prompt asking the user if they want to start the app.

If it is not installed, the browser waits a second and then downloads it.

The reason why iframe is used is to prevent the js request from being interrupted and jumping to a blank page after the location jump.

In the code, data.now ()-t < 1200, so it is 1200. In fact, it is also an estimated value. In order to solve most of the installed apps, it will still jump to download after 1 second. As soon as the app is opened, the browser interface is overwritten by the app interface. But js does not stop execution, after a delay will still open in the background download page, but blocked.

IOS device:

First of all, ios browsers don’t support iframes anymore, so the above approach doesn’t work on ios.

Therefore, you can only use location here.

If the app is installed, the ios browser will pop up a box before opening the App protocol, asking you whether to open it.

This prompt will not pop up if it is not installed.

Welcome to our official account: Web front-end Talk