Unable to open asset URL - ionic, Android - android

I'm building an ionic application and I faced with an issue that affect only the Android devices.
I have some public images that I'd like to load like this:
<img src={imageurl} alt="" />
I'm using this plugin https://github.com/capacitor-community/http to make API calls, to avoid CORS issues. All the API calls are working on both platforms, but the images only works on iOS.
If I check the inspector this is the error message I get:
If I check the Android Studio logs I see these error messages: E/Capacitor: Unable to open asset URL:
If I'm using axios to make the API calls it works fine on Android but then it'll break on iOS due to CORS issues.
I was trying to separate the API calls and only use the native plugin on iOS but I don't think that is possible.. Android was able to make the calls with axios but response was always got response like this:
Android AndroidManifest is extended with this: android:usesCleartextTraffic="true"
webDir: "build",
bundledWebRuntime: false,
android: {
allowMixedContent: true
},
server: {
cleartext: true,
hostname: "baseurl.hu",
iosScheme: "localhost",
androidScheme: "https"
},
This is how I run the app:
ionic capacitor copy android
Android Studio run.

Related

Cordova: cordova_plugins.js failed to load resource

I am learning to use cordova and i have been just doing a normal install of android platform in my cordova application, everything worked fine except for some errors i don't intent to fix just yet (which are external resource files loaded from javascript). I just installed phonegap-plugin-push for working on a push notification support, i believe i have to first register the device on which the notification should be recieved so i ran the app without any other configuration rather than downloading the libraries and putting the google-services.json file at the root application folder.
I try to find the commands for pushing but i am unabled to do so and i think it might be because of an error thrown in the console
Failed to load resource: net::ERR_FILE_NOT_FOUND /cordova_plugins.js
so i have been searching on google and i have found that i don't need to add anything but cordova.js as i have already done upon cordova application installation in order to work with cordova features.
I don't know if i have to add something else or if i am missing some code in order to make this plugin work, probably this plugin is not compatible with cordova but phonegap is built over cordova so i don't know.
in case it is necessary, this are the versions i am using:
Cordova-CLI: 7.1.0
Google Play Services: 46
Android support repository: 47
Android SDK: 26
I failed to say that the application running in cordova is done with angular and angular-ui-router.
After long hours of testing i've found out that the problem is caused by angular-ui-router, because i was using angular-ui-router i have set a <base href> tag in the head tag which is what is making cordova to fail, this is now actually how cordova is intended to work, it is because of how the files are placed. On android the files are placed in android_asset/www/, i don't know how the files are placed in other platforms, but when <base href> tag is set with a new value then the calls are now trying to be done in a directory where the files are not placed.
The solution in angular is to not set a <base href> tag and disable html5Mode in the config
app.config(["$stateProvider", "$locationProvider", "$urlRouterProvider",
function($stateProvider, $locationProvider, $urlRouterProvider){
// Set the default url state
// NOTE: Do not set <base href> tag, this breaks cordova calls
$urlRouterProvider.otherwise("/");
// Disable html5 native router mode
$locationProvider.html5Mode(false);
......
}
]);
I've realized this because in chrome device remote inspector i was getting error calls to wrong directories, by looking at the url where the application is running i saw that the calls were not in the proper directory

cannot use cordova plugin to open files under ionic 2 and typescript

I am developing an android app based on ionic 2 using typescript.
I would like o open a PDF file inside my app with another app that is registered for the fyletype (e.g. Acrobat Reader).
Therefore i tried the two standard plugins:
https://github.com/disusered/cordova-open
https://github.com/pwlin/cordova-plugin-file-opener2
Although ive added both plugins via "ionic plugin add ..." and of course played around with several combination referencing to it
the result is always that they ere not found
cordova-open
var open = cordova.plugins.disusered.open;
Property 'disusered' does not exist on type 'CordovaPlugins'.
cordova-plugin-file-opener2
cordova.plugins.fileOpener2.open(
filePath,
fileMIMEType,
{
error : function(){ },
success : function(){ }
}
);
Property 'fileOpener2' does not exist on type 'CordovaPlugins'.
I am running the app on an emulator via ionic run android
Could you please give some hint how i can achieve to use one of these plugins?
Thank you very much
Shane

Cordova Hybrid App fails, Legacy Android Build Works

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.

Phonegap 3 - Call Cordova methods in hosted application

I'm porting a Phonegap 2.7 application to Phonegap 3. The application is hosted, so phonegap loads an external url instead of a local html. This hosted webapp loads cordoba.js, however I'm unable to use plugins such as splashscreen and notifications from the hosted webapp:
navigator.splashscreen.hide();
// Uncaught TypeError: Cannot call method 'hide' of undefined
navigator.notification.vibrate(500);
// Uncaught TypeError: Cannot call method 'vibrate' of undefined
The hosted application required the same Cordova file that was included when I created the Phonegap 3 project. Why am I unable to use this API's? This worked fine on Phonegap 2.7.
UPDATE: Events are triggered correctly:
document.addEventListener('deviceready', callback, false);
callback is correctly called, so there is some kind of cordova interaction already. Problem seems plugins.
Call the plugin directly with cordova.exec. it goes like this:
cordova.exec(function(response){}, function(errorText){}, "PluginName", "method", []) ;
Cordova exec()!
I wonder if your cordova.js file just doesn't have the navigator.splashscreen object. In Cordova 3.0, all of the plugins were separated out, and the cordova.js file just became the bridge code. When the app runs, it loads all of the plugin .js files via ajax - see the cordova_plugins.js file in a built project. As it loads these files, Cordova will fix up the namespaces for you, so that navigator.splashscreen namespace actually maps to the splashscreen js code. I'm betting you are not loading this cordova_plugins.js file which means the clobbering isn't working.
It's still working because the bridge code works. When you use exec() you're just running the command that navigator.splashscreen.hide does: https://github.com/apache/cordova-plugin-splashscreen/blob/master/www/splashscreen.js#L26
If I were you, I'd try to rebuild the app the new Cordova 3.x way, with the cordova cli. That way you won't have to actually call the exec function manually which seems pretty brittle (the exec() probably won't change, but it seems like a pain looking up the exec calls for every plugin interaction you need.)
BTW I'm not sergio on irc, so feel free to give him the answer if he posts since he answered your question first. I'm just trying to explain why that happens and why it doens't work for you anymore - basically, 2.7 and 3.x are pretty different in terms of plugins.

Pusher not working on Phonegap for Android

I'm facing a problem and would really appreciate your help...
Android SDK: 4.0
Phonegap: 1.8.1
Pusher: 1.12
I have created an Android project using Phonegap that needs to receive server notifications through Pusher.
I'm running it in Eclipse and AVD emulator, but the problem is that every time I try to establish a connection to pusher, I get an Unavailable state from the bind to state_change.
I have tested the connection to Internet in the emulator browser and it works fine. I have also tested that the server is responding and that the Pusher key is the right one by testing my code on Firefox.
This are the steps I have followed:
I have included the WebSocket.java and WebSocketFactory.java files in the src folder.
I have included websocket.js file in my js folder and included a reference in the index.html file.
I have included a reference to http://js.pusher.com/1.12/pusher.js in the index file.
I have included the following line in my Android App.java file: this.appView.addJavascriptInterface(new WebSocketFactory(this), "WebSocketFactory");
This is the code I'm using to connect to Pusher:
// Connect
var pusher = new Pusher(CONFIG.PUSHER.APP_KEY);
pusher.connection.bind('state_change', connectionStateChange);
function connectionStateChange(state) {
alert(state.current);
}
Is there something I'm missing? Any ideas on why the connection is not working or about where to check?
Thanks for your help.
Chadid
For version 2.x of pusher-js and above the library will work within PhoneGap without any additional requirements or setup. Simply include the library and use it - no need for WebSocket.java or WebSocketFactory.java.
For version 1.x this blog post and associated code demonstrates how to get Pusher working on PhoneGap:
http://blog.pusher.com/2012/7/5/pusher-on-phonegap-for-android

Categories

Resources