How should URL Schemes be redirected?

What is URL Scheme#

In modern URL protocols, in addition to the common http protocol in browsers, there is also a type of URL called URL Scheme, which looks like these links:

alipayqr://platformapi/startapp?saId=10000007 Open Alipay QR code scanner
weixin://scanqrcode Open WeChat QR code scanner

Common URL Schemes can be found online, and here I found a list of Common iOS App URL Schemes

The "protocol header" of these URLs is defined by the app itself. After these URLs are correctly processed, they will be opened and passed to the corresponding app with the URL content. Common methods of opening include: browsers and the built-in scan QR code function on mobile phones.

Is URL Scheme a URL? Of course it is, it has similar characteristics to http URLs, such as supporting GET parameters. Through this method, parameters can be carried to the target app for processing.

Open URL Scheme in a browser

Open URL Scheme in a browser

What is it used for?#

By using it, you can implement jumps between different apps. Although web technology is very mature now, Native applications cannot be directly moved to run in browsers. Some necessary APIs are not supported (such as reading NFC information on web pages), or the cost of operating an additional platform is too high and not worth it.

So when someone shares an app link with you, the first thing they ask you is: Open in "App"? If you don't do this, you may get a web version that is completely unusable:

You must open this app today!!

Due to the government's crackdown, the situation where the use of apps is mandatory has decreased a lot. It's just a way to restrict functionality. There are three places in one picture hinting you to open the app.

Before the crackdown? It was so annoying that when you searched for images, you were forced to use the app to see the results... (I won't name names, those who have used it know)

Is it so bad? Then what is this thing for? It must have been created because there is a demand for it. For example, when buying and paying on a web page, when logging in quickly on a web page; the web page cannot access the information stored in your phone's app, and you don't want to enter your password again on the web page, which you always forget, or even be questioned about all your security information, right?

So this thing can only have pros and cons. After the government's intervention, I think the pros will gradually balance.

How to jump in interaction?#

So if I need to use this URL Scheme, how can I guide users to open the app and use functions that cannot be achieved on the web page?

Several ways to jump with URL Scheme#

As mentioned earlier, URL Scheme is essentially still a URL, so the methods of opening links normally can be used:

<a> tag
Using JavaScript to create an iframe

var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);

Using JavaScript to redirect

window.location.href = url;

However, as mentioned earlier, URL Scheme needs to be registered by the app actively. What if the app is not installed? Then the opening will look like this:

How to determine if the jump is successful#

By the way, there is also a Universal Link that allows the system and the browser to actively help you determine whether the corresponding app is opened. However, it is only available on Apple devices.

Since accessing the URL is one-way and does not provide any feedback to the program, we can only judge whether it is successfully opened from some other phenomena:

Source: Various scenarios to invoke apps

The commonly used method is the timer method. The principle is that after jumping to the app, the JS thread in the browser may be paused, and at this time, "time stops", and if the app is not installed, it may stay on the original web page without moving, thus judging that the URL Scheme was not successfully opened, and then performing subsequent logic.

However, the code looks complex and has been well done in terms of compatibility. Can it be simplified?

var work = false;
window.location.href = "URL Scheme"
window.onblur=function(){work = true;}
window.setTimeout(function(){
  if(!work){
    Failed to open logic, for example:
    window.location.href = "next link"
  }
},1000)

This is what I tried to write, but as mentioned in the article above, the speed of invoking on different models needs to be considered, and I fixed it to 1 second here, which is not too long for the user to see further actions on the page.

However, you may also notice that although it is the same way to judge whether the page has lost focus, if the URL Scheme is invalid, a window will pop up in Safari browser, so handling it this way may cause users who do not have the app installed to not get the correct feedback.

Of course, this depends on different platforms. Based on my actual testing, a considerable number of apps' built-in browsers/the default browsers on Android will not provide any feedback when encountering an unknown URL Scheme.

So, following the principle of better to kill a thousand than to let one go, in actual business, it should be used like this:

window.location.href = "URL Scheme"
window.setTimeout(function(){
  Failed to open logic, for example:
  window.location.href = "next link"
},1000)

Waiting is still needed to make it visually less abrupt for users who can jump (there is still something loading under the pop-up window)

Support the vigorous development of Universal Link!

Reject rogue behavior and force users to open apps for basic functions!