Phonegap / Cordova include external src without http / https - android

So here it is, I'm starting a Phonegap app and would like to use a given library. In the library code it tries to reach some URL with this form :
//img.site.com/given_img.png
without http or https at the beginning so it will adapt nicely. But when launching the app on my phone I see it tries to reach :
file://img.site.com/given_img.png
Not http or https... But file protocol. Obviously it fails to load...
Anyone knows how to deal with this ?
Thanks ahead !

As far as I can tell, after researching this for some time... Currently there is no solution out of the box. You have to check the code with JS and force add the wanted protocol into it before execution. I simply changed the way I wanted to do things and avoided that kind of situation.

The idea behind having src="//domain.com/some/pic" is so that the browser will request those assets with the protocol matching your website, meaning, if your website is running on http - it will request the picture over http, vs if your website is running on https it will request the image with https://.
#Jeremy is right, there's no option at the moment.
But you can take the protocol matching your website with var protocol = window.location.protocol and use that in your src={{ protocol + image }}
This is to prevent from writing hard-coded http / https and mix secure with non-secure content in your website which causes errors to jump like "This Page Contains Both Secure and Non-Secure Items"

Related

How to prevent Google Cloud Storage redirect

A file like this one:
https://storage.cloud.google.com/gadr_images/avatar/perja.jpg
gets redirected, and because android image elements do not work with redirected urls, i want to prevent that. How can that be done?
Found a solution:
If u access a an image or other file via:
https://storage.googleapis.com/gadr_images/avatar/perja.jpg
instead u w ill not be redirected. I'm not sure if this is
an official way to access data, but it works, without redirects.
A way to do it is to keep the request that the URL gives you with HTTPS so the redirect stays on the same protocol.
If not you can try using Picasso 2 OkHttp 3 Downloader that may fix the problem if the HTTPS redirection on the same protocol does not work.

how to play video from server?

i want to have a URL like this one (https://www.ooklnet.com/files/381/381489/video.mp4) where when you click it and itll play the video. Thing is this isnt my website or video. i tried my URL which i thought was corrct (http://54.XXX.XXX.238/srv/ProductVideos/lazar108#hotmail.com/s/s_7s.MP4) and it gives me this error:
The requested URL /srv/ProductVideos/lazar108#hotmail.com/s/s_7s.MP4 was not found on this server.
I know for a fact that theres a video in the file path on my server. Proof:
(I need this URL for my android app so i can display the video in the app.)
How can i create a link like this one (https://www.ooklnet.com/files/381/381489/video.mp4)?
I have a Ubuntu 14.04.4 server with AWS EC2!
Any help would be appreciated!!
Thank you!
1) your EC2 has to have security groups open to allow any access to port 80 from the Internet
2) your EC2 has to be running some web server software such as apache
3) apache needs to be configured to serve files, check the document root
4) apache needs to be configured to correctly send mp4 with the right mime type headers see this answer Apache not serving .mp4 files correctly - shows the contents of the file rather than a download prompt
If it is apache ( and not nginx or another web server) you are using check the access log file /var/log/apache2/access.log and the default error log /var/log/apache2/error.log

Accessing JS code from an android Native app

This might seem to be a weird problem, but I am curious to know if it would work. I am working on a POC, and hence have to either prove or disprove that this works or not.
The UI in the Android app would be native (Java + XML layouts) + some other device features access like (Camera/File system etc).
There is a JS library that I have built, that has a few functions which do Ajax post and get requests.
In the app, I have an invisible Webview, where I load a blank HTML (referencing this JS library). And into that WebView, I have injected a JavascripInterface. So, essentially, the UI would be native, and you would never see the Webview. That's just a host which provides access to my JS library to the native code.
Now, on some action on my UI, I call the JS functions on the Webview, which in turn tries to make an ajax call (loadUrl calls ex. javascipt:functionName()). But, those calls fail, without any visible errors.
Note: This same HTML file works, if I load it up on my desktop browser. The AJAX calls succeed.
But, when I initiate Ajax calls through the JavascriptInterface(or webview.loadUrl() calls), they fail, with a reponse status 0.
Things apart from AJAX, like simple function calls, alerts, and callbacks through javascript interface work fine though.
Q: I know this is a weird and an unpractical way to do things. But, would it/should it work?
Update: Even after setting the setBlockNetworkLoads(false), it still doesn't work.
I tried logging the JS calls and errors, and got this error.
Request header field X-Requested-With is not allowed by
Access-Control-Allow-Headers.
Any idea how to solve this?
It seems that your are trying to do a cross domain ajax request.
Cross domain requests are not allowed by same origin policy and so the requests will be blocked. If you are loading a local file in webView and then sending ajax requests from it to other domains, this will be the case.
You if that is the case and it is the same origin policy causing you trouble then you might want to look at Cross-origin Resource Sharing (CORS) or JSONP to workaround it.
Given the error you get it seems that your problem is similar to one discussed here:
Cross-Domain AJAX doesn't send X-Requested-With header
You might want to change server settings to allow X-Requested-With header.
Also it seems that from API level 16, webSettings added a method setAllowFileAccessFromFileURLs(). Setting this to true for the webView might solve the problem as well.
I had a similar issue where I was loading a "web-app" locally into a WebView, just doing Ajax remotely. I observed a similar problem where Javascript alerts etc worked fine, but AJAX calls didn't. It turned out that by default the WebView blocks "network loads".
Make sure you do this:
webView.getSettings().setBlockNetworkLoads(false);
That did it for me. Just to clarify, I wasn't using a Javascriptinterface - just loading a web-app as-is using webView.loadDataWithBaseUrl() - the baseUrl parameter passed to this method was where I perform all my AJAX calls (since this method respects the same origin policy)

Sencha Touch 2.1 native (android) app not getting json from remote (it works on PC)

I created my first Sencha touch 2 app by watching this video (http://youtu.be/5F7Gx0-W-M4) and it has a store page structured like this:
Ext.define('FirstApp.store.Places',{
extend:'Ext.data.Store',
config:{
autoLoad:true,
model:'FirstApp.model.Place',
proxy:{
type:'ajax',
url:'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyCFWZSKDslql5GZR0OJlVcgoQJP1UKgZ5U',
reader:{
type:'json',
rootProperty:'results'
}
}
}
})
The after-build (after running "sencha app build native") package work very well on my MAC (all browsers) but the generated app (i am running it on my nexus phone) works but doesn't collect any data from the google maps json.
Any help would be appreciated
The example you are referring is using google map's place search API. You can not use this API when you build the app for mobile phone with proxy set to ajax . Basically, you can not use any resource that is outside your domain. Like if your site is at yourdomain.com and there is someotherdomain.com, then you can't make ajax request to this someotherdomain.com from yourdomain.com unless that domain allows you to. In this case, your mobile app is not having any domain. You are just loading a page inside webview.
The reason is, ajax will not be able to load cross-origin resources. App build works on browsers because I believe you're using chrome with --disable-web-security flag. To work with CORS you need to use JsonP proxy. It's the only way if you're packaging for mobile app. If in a case, you own the server ( not in this context though ) then you can allow CORS by setting appropriate headers like
Access-Control-Allow-Origin: *
or
Access-Control-Allow-Origin: http://yourdomain.com/resource
Try setting proxy to JsonP .

PhoneGap + Android + jQuery Mobile - Connection to server unsuccessful

I'm trying to create an Android (2.2) app using Phonegap (version 1.9.0) and jQuery Mobile (1.1.0). Specifically, the app is supposed to send a GET request to an existing WCF REST service and retrieve JSON data (a list of folders) and display each item as an option in a select drop down menu.
Right now, all this works as it should when I use the desktop browser. The WCF REST service sends the correct response, the browser renders the page correctly and puts the options in the select menu as I want it to. However, when I use the following code in Android app using Phonegap:
$.getJSON('http://xxx.xxx.xxx/MobileService.svc/GetFolders?callback=?', null, function (folders) {
$.each( folders, function( i, folder ) {
$("#folders").append("<option value='"+folder.Id+"'>"+folder.Name+"</option>");
});
$("#folders").selectmenu("refresh");
});
...I get the error message when I boot the Android app (debugging on physical device):
Connection to the server was unsuccessful. ("file:///android_asset/www/index.html")
When I comment out the above $.getJSON code, the app loads fine, but the select menu is unpopulated.
I've also noticed that apparently because Phonegap uses the "file://" protocol, it is not affected by the "same-origin policy" that the "http://" protocol is...I had been using JSONP when I was working with the browser, which is why I have the callback. I don't think this should be the reason why it is failing, but I dont know. Any help will be greatly appreciated!
Things I've tried:
Changing the access origin to ".*" in the cordova.xml
Adding 'super.setIntegerProperty("loadUrlTimeoutValue", 60000);' to the activity
You can try to set your cordova.xml to "*" instead of ".*" as seen on the Getting Started Guide
Or even better:
http://xxx.xxx.xxx
It turns out in my particular case that the issue boiled down to the mobile phone being on guest wifi network that didn't have access to the network where the REST service was hosted so the connection was being blocked.
Hope that can help someone

Categories

Resources