Shulou(Shulou.com)06/01 Report--

This article mainly introduces "html5 wake-up APP case analysis". In daily operation, I believe many people have doubts about html5 wake-up APP case analysis. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "html5 wake-up APP case analysis". Next, please follow the editor to study!

URL Scheme-the medium of calling end

Source

Generally speaking, the smart devices we use have a lot of our personal information. For example: contact information, bank card / credit card information, Alipay / Paypal/ account password, photos and even itinerary and location information.

If every app on your device, whether official or installed from any mall, can get this information at will, then you will receive harassing messages and emails, and the consequences will be disastrous. How to make this information not used by other applications at will, or how to make this information used only with the knowledge and permission of the device owner, is the core security issue that all smart devices and operating systems should care about. To solve this problem, Apple uses a mechanism called "sandboxie": applications can only access the resources it claims to be possible to access. All applications submitted to App Store must follow this mechanism.

Sandboxie is a good solution in terms of security, but it is overcorrected. Just because we don't want to disclose sensitive personal information doesn't mean we don't want to share all the information with other applications. Therefore, we urgently need an auxiliary tool to help us achieve application communication, URL Schemes is this tool.

What is URL Schemes?

Let's take https://www.baidu.com as an example. Scheme is naturally https, followed by the passed parameters. URL Schemes does not have a particularly strict specification, so the specific definition of the following parameters is customized by app developers.

Just as we assign a URL to the server resource so that we can access it, we can also assign a special format URL to the mobile phone APP to access the APP or a function in the APP. APP needs to have a logo so that we can locate it, which is the Scheme part of URL.

However, there are several important differences between the two:

All web pages must have a URL, whether it's a home page or a subpage. But not all applications have their own URL Schemes, let alone every function of every application has a corresponding URL Schemes. Almost none of the functions have corresponding URL applications. Whether an App supports URL Schemes depends on whether the author of that App adds URL Schemes-related code to his work.

A URL corresponds to only one web page, but not every URL Schemes corresponds to only one app. This is because Apple does not have a rigid requirement for URL Schemes that does not allow repetition, so there have been incidents in which App used Alipay's URL Schemes to intercept payment accounts and passwords.

The URL of general web pages is easy to predict, but URL Scheme is very difficult to guess because there is no unified standard, and it is unrealistic to get the URL Schemes of the application through guessing.

Before popularizing the relevant knowledge of URL Schemes, as a front-end developer, do not delve into the principle of it, and leave it to app developers. Let's get down to business. The first thing, of course, is to ask the client to provide the Url Schemes of App.

Use the browser to open scheme

Opening scheme in a browser is like opening a different http address. You can open it in an a tag.

Open App to open the application

Clicking the link on the H5 page above will try to wake up the corresponding app, and in some browsers, a prompt box may pop up asking the user if they are allowed to open the application.

If the opened scheme does not have a local app, the click will not react.

Of course, you can also use JavaScript code to open it, as long as you add the appropriate event trigger and handling.

There are several ways to open a connection in JavaScript code:

Create a new hidden iframe with the address pointing to the url to be opened

Use _ window.location or _ window.location.href to refresh the current page

Create a new hidden a tag with the address pointing to the open url and trigger the open link event

Create a script script dynamically, create a new a tag in the script and open the

/ / how to open url var urlOpen = {/ / not well supported in ios' iframe': function (url) {var iframe = document.createElement ('iframe'); iframe.style.display =' none'; iframe.src = url; document.body.appendChild (iframe);}, 'location': function (url) {_ window.location.href = url }, 'href': function (url) {var a = document.createElement (' a'); a.style.display = 'none'; a.href = url; document.body.appendChild (a); a.click ();},' script': function (url) {var script = document.createElement ('script') Script.setAttribute ('type',' test/javascript'); script [XSS _ clean] ='(function () {'+ 'var a = document.createElement ("a");' + 'a.style.display = "none";' + 'a.href = "' + url.replace (/" / g,'\ ") +'";'+ 'document.body.appendChild (a) '+' a.click ();'+'}) ()'; document.body.appendChild (script);}, 'open': function (url) {window.open (url);}}

The above method is only solved in the installed App device to wake up App function, and can not determine whether App has been installed, without installation, jump to the download link.

The browser determines whether to install the application.

Browsers don't actually have the ability to determine whether a certain App is installed on the phone, so it can only be done in an opportunistic way.

Determine whether the page is in the background in JavaScript to determine whether the page was opened successfully. Html5 provides the following events and properties to take advantage of:

Pagehide: triggered when the page is hidden

Visibilitychange: page hiding is not triggered when it is currently displayed (switching tab also triggers this event)

Document.hidden: this value is true when the page is hidden and false when displayed

These events or properties are not supported by all browsers. The following is an example of adding an open scheme or download event to the button where id is openBtn, but it is not supported for Android version 4.4 or later

Var downloader, scheme = 'luwei://', / / app scheme address to be opened iosDownload=' http://xxx.com'; / / if you open the scheme invalid app download address andDownload =' http://xxx.com'; var u = navigator.userAgent; var isAndroid = u.indexOf ('Android') >-1 | | u.indexOf (' Linux') >-1; / / g var isIOS =!! u.match (/ (I [^;] +) (U;)? CPU.+Mac OS X /); / / ios terminal / / add a click event handler function document.getElementById ('openBtn'). Onclick = function () {_ window.location.href = scheme to the button whose id is openBtn / / attempt to open scheme / / set a scheduled download task for 3 seconds, and download app downloader = setTimeout (function () {if (isAndroid) {_ window.location.href = andDownload;} if (isIOS) {_ window.location.href = iosDownload) after 3 seconds }, 3000); document.addEventListener ('visibilitychange webkitvisibilitychange', function () {/ / if the page is hidden, it is speculated that the scheme was opened successfully, and the download task if (document.hidden | | document.webkitHidden) {clearTimeout (downloader);}}); window.addEventListener (' pagehide', function () {clearTimeout (downloader)) })

There is no perfect plan.

Unable to wake up App in Wechat, we need to "open it with a browser" because Wechat blocks all sharing links from scheme, which means that all calls to scheme in sharing connections are blocked by Wechat. Some app can be opened on Wechat because Wechat has a whitelist (it is good to have a relationship), and scheme calls will not be blocked from sharing links in the whitelist.

At this point, the study of "html5 awakening APP case study" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.