I need to know is if I can, from an HTML web open an application that is installed on the mobile device. Is this possible? I could do with help of plugins can open installed applications from a single application, but from the browser?
I'm also working on Android and iOS with ionic framework
I hope you're talking about the Ionic Framework hybrid mobile application.
It can be done easily using Cordova InAppBrowser plugin. Using this plugin you can execute external app or open link inside a browser if mentioned app don't exist.
You will want to do something like this:
var scheme;
// Don't forget to add the org.apache.cordova.device plugin!
if(device.platform === 'iOS') {
scheme = 'twitter://';
}
else if(device.platform === 'Android') {
scheme = 'com.twitter.android';
}
appAvailability.check(
scheme, // URI Scheme
function() { // Success callback
window.open('twitter://user?screen_name=gajotres', '_system', 'location=no');
console.log('Twitter is available');
},
function() { // Error callback
window.open('https://twitter.com/gajotres', '_system', 'location=no');
console.log('Twitter is not available');
}
);
This example will try to execute Twitter app, if that app don't exist it will open twitter inside a child browser.
Needed Cordova plugins:
cordova plugin add com.lampa.startapp
cordova plugin add cordova-plugin-inappbrowser
cordova plugin add org.apache.cordova.device
Read more about it here: http://www.gajotres.net/how-to-launch-external-application-with-ionic-framework/
Related
I try to use Angularjs http service to call my PHP API. Everything working fine in Browser. But, when I test it on my Android Phone, it will not work.
My Issue:
In Android PhoneGap Application, Whenever I trigger the Angularjs http service it will always trigger the function (error) even when the Mobile is connected with Internet.
I have try look this but their solution aren't working:
Angular $http.get() does not work in Phonegap DevApp
Cordova 5.3.1 Android app can't access the internet
I also have ensure the Phonegap config.xml has allowed Internet Permission Access with:
<access allows-arbitrary-loads-in-media="true" allows-arbitrary-loads-in-web-content="true" allows-local-networking="true" origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
However it is still not Working.
My Question:
Is Angularjs http service is not able to work on PhoneGap Mobile Application but only Web Browser?
Aside from config.xml , is there any other configuration have to be made to allow PhoneGap Mobile Application to access the Internet?
Angularjs code:
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
$http({
method: 'POST',
data: {
'email' : $scope.email,
'password' : $scope.password,
},
url: 'https://unsurfaced-cross.000webhostapp.com/PGLogin.php'
}).then(function (response){
$scope.users = response.data;
if(response.data[0]=="LOGIN"){
alert("Successful Login");
$window.location.href = './homepage.html';
}else{
alert("Login Failed. Incorrect Email or Password.");
}
},function (error){
alert("Please ensure You are connected to Internet.");
});
seem like actually I just didn't install the whitelist plugin, for my case the whitelist plugin didn't installed by Default.
Since I was using PhoneGap, instead of using command like cordova-plugin-whitelist#latest, cordova create, cordova plugin add cordova-plugin-whitelist or etc.
I should use: phonegap plugin add cordova-plugin-whitelist
After install the Whitelist Plugin, everything working fine.
So,
Angularjs http service is able to work on PhoneGap Mobile Application.
Aside from config.xml , we have to ensure that all necessary and required plugin was installed such as Whitelist plugin.
I am new to Ionic and I am trying to upload an image taken from camera that is stored in Android filesystem:
var ft = new FileTransfer();
console.log('Uploading: ' + fileURL);
ft.upload(fileURL,
encodeURI("http://192.168.192.62:3000/api/meals/picture"),
pictureUploaded,
function(error) {
console.err(error);
$ionicLoading.show({template: 'Ooops error uploading picture...'});
setTimeout(function(){$ionicLoading.hide();}, 3000);
},
options);
var pictureUploaded = function() {
console.log('uploaded!');
$ionicLoading.hide();
};
fileUrl is pointing to an existent image: file:///data/data/com.ionicframework.nutrilifemobile664547/files/Q2AtO1462636767466.jpg
In chrome://inspect/#devices console I get the following error and it looks like because of the error the FileOptions are also not properly sent, this is the error (Not allowed to load local resource):
Cordova version: 6.1.1
Ionic version: 1.7.14
This happens when you use the "livereload" option with Ionic.
Try running in normal mode
With ionic webview >3.x, you have to use convertFileSrc() method.
For example if you have a myURL local variable such as file:// or /storage.
let win: any = window; // hack ionic/angular compilator
var myURL = win.Ionic.WebView.convertFileSrc(myURL);
Another possible reason is that you have a webview plugin installed (like https://github.com/ionic-team/cordova-plugin-ionic-webview or just https://github.com/apache/cordova-plugin-wkwebview-engine). Also this will not allow to use cdvfile:// protocol as well.
It might be too late but... you could convert native path to blob using File then convert blob to URL using URL.createObjectURL(blob) and passing/setting as src to your html element. This is unnecessary for production environment but you could use it for development with -lc. It might work
07-Dec-2018
This is the version where it works for me on Ionic 3.9.2 app.
Remove the latest version of webview and then:
i.e. ionic cordova plugin add cordova-plugin-ionic-webview#1.2.1
https://github.com/ionic-team/cordova-plugin-ionic-webview/releases/tag/v1.2.1
Note: This version works fine with normalizeURL() method.
I've written a small application to test the working of cordova app on XDK.
The source code is same as this question
However, I am attaching the code here :
(function()
{
"use strict";
/*
hook up event handlers
*/
function register_event_handlers()
{
/* button Login */
$(document).on("click", ".uib_w_9", function(evt)
{
//intel.xdk.notification.showBusyIndicator();
/*$.post("http://url/test.php", {test:'1'},
function(res){
alert(res);
}
);*/
$.ajax({
beforeSend: function(){
intel.xdk.notification.showBusyIndicator();
},
type: "GET",
url: 'http://url/test.php',
data:{test:'1'},
success: function(res){
alert(res);
intel.xdk.notification.hideBusyIndicator();
},
error:function(res){
alert(res);
intel.xdk.notification.hideBusyIndicator();
},
dataType: 'text'
});
});
}
document.addEventListener("app.Ready", register_event_handlers, false);
})();
This is the JS file of the application.
The screenshot of the app in XDK emulator :
Now When I do a build of the app using XDK cloud, I get a .apk file.
On uploading the file to GenyMotion Emulator, screen below :
The click doesn't do anything, nor does the showBusyIndicator() show, nor the alert appear.
What am I missing and what is going wrong ?
I've plans to use this ide for a proper project and hence the testing, some help will be appreciated.
UPDATE
I did a Cordova Hybrid App build initially and that caused the problem.
When I did a legacy android build, then the problem was solved.
So what do I need to do to get it to work with the Cordova Build ?
Build Page :
There is a known issue with AJAX when Intel XDK builds apk with Cordova CLI version 4.1.2. on Android version > 4.4
There is a workaround, go to Project Settings -> Build Settings -> Android, change Cordova CLI version from 4.1.2 to 3.5 and AJAX should work.
I want to open Google play games app on my mobile from my android phonegap build application using WEBINTENT plugin.
window.plugins.webintent.startActivity({
action: window.plugins.webintent.ACTION_VIEW,
url: 'facebook://'
},
function() {alert('success')},
function(errorMsg) {alert('Failed to startActivity errorMsg=' + errorMsg)}
);
},false);
This code works well to open facebook.
How to use it to open play games application.?
Thanks.
web intent plugin can only open apps that have an url scheme to open it.
if the games you want to open don't have an url scheme, then you can't open them with the web intent plugin
You can use the startapp plugin to open apps using the package name
https://github.com/lampaa/com.lampa.startapp
To use it on phonegap build, add this on the config.xml
<gap:plugin name="com.lampa.startapp" source="plugins.cordova.io" />
To open an app use this code:
navigator.startApp.check("com.package.name", function(message) { /* success */
console.log(message); // => OK
},
function(error) { /* error */
console.log(error);
});
I am trying to force the links in my app to open in external browser. I am working with jQuery mobile & Phonegap build.
My app has a page with generated contact details. Among the details there is an link to the person's website:
row+='<div class="accWWW"> '+ data[i].website +'</div>';
I have these 2 functions defined in my code.
//function which forces open in browser
function openBrowser(url){
if(device.platform === 'Android') {
navigator.app.loadUrl(url, {openExternal:true});
} else {
window.open(url, '_system');
}
}
//opens generated URL's
function openGenerated(obj){
var url = obj.getAttribute("href");
console.log(url);
openBrowser(url);
return false;
}
I also have a simple <div class="accWWW"> Google </div> set in my index.html
So... this link to Google opens perfectly in iOS (haven't yet tested on Android because iOS was my biggest problem), but the generated link wouldn't do anything if I hadn't added the openGenerated function. Now there is an action, but it opens inside the app.
Do you have any idea why that is?
Also when checking on the laptop I get these errors in the console( link is my development url):
Uncaught ReferenceError: device is not defined *link*:277 // makes sense probably, because I am not using a mobile device
Uncaught SecurityError: Blocked a frame with origin "http://www.test.com" from accessing a frame with origin "*link*". Protocols, domains, and ports must match.// what is this?
I was thinking maybe it's an access issue, but I added <access origin="*" browserOnly="true" /> in my config.xml, so there shouldn't be a problem with this.
LATER EDIT: On Android the Google link doesn't work at all and the generated one opens inside the app... Apparently device.platform is always null, but the device plugin is added in xml as I can see in phonegap build this list of plugins:
Installed Plugins
Apps will be built with the latest version of a plugin unless you lock the version in your config.xml (see below). -- Plugin installed as a dependency of another plugin
Third Party VERSION LATEST VERSION
com.phonegap.plugin.statusbar 1.1.0 1.1.0
PhoneGap Core
org.apache.cordova.device 0.2.8 0.2.8
org.apache.cordova.inappbrowser 0.3.3 0.3.3
LATER EDIT:
Device.platform doesn't seem to be working, so I modified my function, adding Ved's suggestion, to:
function openBrowser(url){
if(navigator.app)
navigator.app.loadUrl(url, {openExternal:true});
else {
var ref = window.open(url, '_system', 'location=no');
ref.addEventListener('loadstart', function(event) {
});
ref.addEventListener('loadstop', function(event) {
console.log(event.type + ' - ' + event.url);
});
ref.addEventListener('exit', function(event) {
});
}
}
on iOS still opens inside the app. For Android I think it's working fine.
I fixed my issue.
I was adding cordova.js in my html. Apparently this broke things.