How can I enable communication between ionic app and browser? - javascript

I am trying to make an app in ionic that can send message to browser in same device (android or ios) and receive response back from browser. Is it possible?

I am pretty sure that it is not possible to communicate with the native device browser to track which URL the user is visiting. However, using cordova-plugin-inappbrowser you can open a browser window inside your application and track URL changes.
By listening to events, either loadstart or loadstop you can see where the user is and retrieve the URL with something like this:
var browserRef = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
browserRef.addEventListener('loadstart', function(event) {
console.log(event.url);
});
You can find more information on this plugin here.

Related

How to open saved web app using JavaScript?

I'm new to PWA (Progressive Web App) and using Angular. I have configured a service worker module as described in the Angular docs. Everything is working fine. On Android, the user is able to add the app to the home screen and it is working on offline as well. But I'm unable to find the functionality to open the saved web app by triggering an action in the browser.
Let's say https://pwa.com is a domain and I want to open saved app (on the home screen) from another domain like https://example.com or from another route on the same domain like https://pwa.com/openApp by clicking on a button. Is there any possibility to do this?
Looks like this is possible for Android: https://developers.google.com/web/fundamentals/integration/webapks
But doesn't seem like it works for iOS
https://medium.com/#firt/progressive-web-apps-on-ios-are-here-d00430dee3a7

Registering a Custom href Protocol on Windows Mobile in JavaScript

I am developing a web-based mobile application, My application has a button that takes the user to the dialer where a USSD code is ready for the user to dial. This works fine on Android Devices and iOS devices.
Trigger USSD
On Windows 10 Mobile that link triggers the People App or the Skype App. If this was a native app I know I could register a URI protocol to trigger the dialer. Is there a workaround in JavaScript I can use to target the dialer (Or Phone App) specifically such as registering a custom href protocol maybe.
For my understanding, like you said, the app itself is responsible for registering custom URI or catch the intent of existing URI, even from the browser. On Android, the user can choose from all the application that catch the intent what application he wants to use.
I think that the answer should be what kind of protocol the Phone app uses, then use this protocol in order to 'target' the dialer.
It seems there is no protocol of Phone app being exposed, but you can use the PhoneCallManager.showPhoneCallUI method to launch the built-in phone call UI with the specified phone number and display name.
Windows.ApplicationModel.Calls.PhoneCallManager.showPhoneCallUI(phoneNumber, displayName);

Tell if android app is installed using javascript or jquery

I have an android app that can be accessed through a web browser too. I need to put a banner to let the user install the android application. How can i tell (if the user enters to the application through the web browser) using javascript or jquery, if the android app is already installed on his mobile phone?
All i want to do is: If the user clics the banner and the app is already installed, open the android app. Otherwise, redirect the user to the playstore to let him install the app.
Let's say your app is uploaded on both Apple AppStore and Google Play stores.
You need to:
Sniff in your webpage which OS is installed from the device accessing your page
good link to find how => here
Enable deep linking to listen for exactly same link from your mobile native app
for Android you need to register your main activity or any other activity to listen for these links
for iOS - no idea honestly, look around or find a 3rd party service
code for Google Play with deep link. And the deep link is same as your website page you want to cache/index in Google Search (or any other search engine)
sample link to index/use => http://my_website.com/results
// below snipplet need to be for Android devices only
// i.e. need to sniff and have if/else validation for Android, iOS, desktop and so on
// will call with 25 mills delay in case deep link fails, i.e. no installed app
setTimeout(function () { window.location = "https://play.google.com/details?id=com.foo.myapp"; }, 25);
// try to load the deep link URL
window.location = "http://my_website.com/results";
repeat above for iOS and desktop/Windows Mobile
Additional advantage of above is the full app indexing without the lame App Indexing excuse from Google (min sdk no more than 17, Chrome for Android availability and so forth limitations).
There is no way to detect if an app is installed using Javascript.
However you can get the behavior you describe and you don't even need any javascript:
Choose an URL for your app on a web server you own and make the banner link to it.
Set this web URL as a deep link handled by your app by specifing it in your app's manifest. It should open the main Activity.
On your web server, configure this URL to redirect to the Play Store URL of your app. Optional: if your app is also on iOS, you could detect the iOS browser and display something else.
If the app is installed it will handle the URL and open, otherwise the browser will follow the link and the redirect and the Play Store app will open to handle the Play Store URL to your app.

How to open an app from web on Android

I create 'iframe' element, use the http scheme to open an app on Android Device, it works fine if the app is installed.
When the app is not installed, I use setTimeout function setting window.location = marketurl,
it will open market, and it works fine on Android Browser, but it doesn't work on chrome 25+.
I only see an error message in my browser.
What should I do?
I believe there are some new changes to the functionality in Chrome for Android v. 25 and later. You may need to implement Intent. This is created to prevent unsafe app open from the browser.
Here is one example from Google Chrome for developers that will open the Zxing barcode scanner app.
Take a QR code
Reference: https://developer.chrome.com/multidevice/android/intents
It is no longer possible to launch an Android app by setting an
iframe's src attribute. For example, navigating an iframe to a URI
with a custom scheme such as paulsawesomeapp:// will not work even if
the user has the appropriate app installed. Instead, you should
implement a user gesture to launch the app via a custom scheme, or use
the “intent:” syntax described in this article.

Closing a mobile browser tab with javascript

I need a native app to fire a browser with some URL that will take the user to a mobile website. Inside the mobile website, there has to be a button that closes the browser (or sends any signal to the native app) so that the user gets back to the native app. Currently I'm trying to close the window, but I don't think that's gonna do the trick in all mobile devices.
My code:
$( document ).bind('pageinit', function(){
$.mobile.activePage.find('#close').click(function(){
window.open('', '_self', '');
window.close();
});
});
I'm using jQuery mobile.
Setup a custom URI handler (for Android and for iOS). Then all you have to do is redirect to a URL that matches, perhaps using window.location.
It seems that there are security restrictions that wouldn't allow you to close the window via JavaScript. See here
EDIT: You basically have two options: implement a custom URL handler for each platform you're developing for; or embedding a web view into your application (UIWebView for iOS or WebView for Android).
On iOS if you launch Safari from your app you won't be able to get back to your app after Safari closes, unless your app is registered as a custom URL handler and the page you are on launches a URL that launches your app.
On iOS if instead of launching Safari you show the web page in a UIWebView you have control over exiting the page.

Categories