Install and open Android /ios native application in javascript/Angular JS

Question

We have "scan" button in our mobile Web application.The mobile web application is completely HTML5 and Angular JS and javascript/ajax based. We need to install some third party native scanning application from Google Play/iTunes based on user Agent Android/Iphone and if application is already installed we need to open it when user clicks scan button. Please suggest any solution in javascript/Angular JS.Below solution I tried

setTimeout(function() {

      window.location = 'http://my-installation.url'; //to download
    }, 1000);

    window.location = 'myapp://custom-scheme-url'; //to open

But this approach is full of issues. Many times it is redirecting to googleplay/itunes although the application is installed and sometimes when application is not installed it is opening myapp://custom-scheme-url and then immediately giving error like "this web page is not available error". We tried with different values of timeout as well but was not helpful.

Please suggest if there is any way apart from setting timeout to check if app is already installed or not.

Answer 1

Part of your problem can be solved with the use of an iframe. See this ticket for more details.

Specifically:

If you need to open an iOS application if it is installed and also want to preserve your page's functionality, the location.href = 'myapp://?params=...'; won't help since if myapp:// is not registered, the redirect leads user to unreachable destination.

A solution:

var frame = document.createElement('iframe');
frame.src = 'myapp://?params=...';
frame.style.display = 'none';
document.body.appendChild(frame);