Develop Reference

Meteor mobile application seemingly not loading outside assets

Here is my issue, I am using Bootstrap (twbs:bootstrap), font-awesome (natestrauser:font-awesome) and Avatar (utilities:avatar).
When I load my application in a desktop browser, all assets load fine.
When I load my application in a mobile browser, all assets load fine.
But when I load my application in the compiled (Android) app, font-awesome and Avatar don't load their assets. The reason I am targeting them is they are both reliant on contacting outside sources. font-awesome is served off of a CDN and Avatar retrieves avatars from social networks. I know I can package font-awesome but I can't do the same for avatars so I need to figure this out.
I have looked to see if Meteor does something odd like sandboxing the app to prevent outside contact but I can't seem to find any mention of these kinds of issues. Is there a default security settings that I can set where it would allow my app to 'contact' whitelisted sites? It would be absurd but it is Meteor after all.
I figure someone more knowledgeable in Meteor can point out my error.
There is no code for font-awesome (besides using CSS classes) and there is really no specific code for Avatar besides {{> avatar ... }}
Thank you in advance!

Note, as of 5/30/2017: Please skip to EDIT 2 below unless you want to read the very long and confusing ramblings of my former self. Thank you.
Okay, I was right but not necessarily right about who was causing what (I was kind of right). The reasoning behind it makes sense so I am thankful for that.
Here is what I've determined. Cordova has a whitelist under /res/config.xml where URLs are whitelisted and only those URLs are the only URLs allowed outside of the application.
But, if you try to edit config.xml it will be overwritten by Meteor on build which indicates this config is governed / overwritten by Meteor.
I searched around and found a few things: Meteor / Cordova, Meteor. The second article gives the solution. You must use the package browser-policy to whitelist what URLs you want.
After installing browser-policy, you must include them in a file in /server. I tried installing them inside a if(Meteor.isServer) block outside of /server but it didn't work.
Hope this helped! I couldn't find anything similar to this and I presume others will run into this road block as well
EDIT: This will only fix it for desktop. For my issue, I had to create a top-level file called mobile-config.js and use config settings from this page to whitelist URLs. This change happened in Meteor 1.0.4
EDIT 2:
Here is it said more clearly: You must whitelist all outside URLs that you want to contact inside of mobile-config.js
For instance, if you want to contact google.com from your mobile app, you would add
App.accessRule('https://www.google.com')
Thankfully Meteor has fixed their extreme documentation issue and has now included this on the official documentation here

Cordova Webview -webkit-backface-visibility not working

I create a simple Android application using the latest version of Cordova and replace content of www folder by sample code of a memory game written by Igor Minar on Github (https://github.com/IgorMinar/Memory-Game). The problem is the cover image (front side) does not display. The cards always display the content image (back side) for both sides.
Then I create a new Android application without Cordova but use a simple android.webkit.WebView and everything work as expected with similar www content.
I think this is an issue of Cordova Webview. I want to use Cordova because it's a good SDK so I want to ask if someone can give me a solution for this webview issue.
Thanks in advance.

After a long experimentation using this website: http://thewebrocks.com/demos/3D-css-tester/
(source code on github)
and based on the code of #nguyen-canh-linh, which he manages to get working even in Android < 4.4 webview (see on his repository)
I found that you CAN NOT have two css properties animated in the same class - but I was aware of that fact (a bug I read about on the Internet) - I did not realize that the trick needed to avoid flickering in recent webkit version ie: * { transform: translate3d(0,0,0); } was indeed seen as an animation and triggers the bug
Note: also be careful with: backface-visibility: hidden; do not apply it to every element (*), it could be buggy as well.

Get jQuery w/ Android Cordova Links to open in browser

I have an Android cordova app, and I use jQuery Mobile for the interface. Basically I am trying to get certian links to open in a browser window instead of cordovas childbrowser.
I have some code here, that I think should work, but i can't seem to debug. Could someone take a look?
http://t.co/kAJ7mrj5

Although I'm not certain if this is the problem, I see this attribute:
onclick="navigator.app.loadUrl(http://forum.xda-developers.com/showthread.php?t=1703488", {openExternal: true});
I think that should be:
onclick="navigator.app.loadUrl('http://forum.xda-developers.com/showthread.php?t=1703488', {openExternal: true});"
Notice the quotes.

initializing iscroll with phonegap and jQuery mobile

I have built a project using phonegap and jquery mobile, and have iscroll working perfectly on the first page. However on my second page iscroll isn't running. Can someone tell me how you initialize a jquery script on the page in JQM? I am new to both platforms and think it may be a simple mistake! Thanks

I never used phonegap, but im building a JQM-webapp as well, so i hope this works for you.
iScroll seems to cause several problems trying to implement it in JQM. This is why they came up with jquery.mobile.iscrollview which bascically adapts the iScroll javascript to the jQuery Mobile environment.
Just include the script and add data-iscroll="" to your div. And include all of your scripts in the given order.

checkDOMChanges: set to false to prevent auto refresh on DOM changes. If you switch off this feature you have to call iScroll.refresh() function programmatically every time the DOM gets modified. If your code makes many subsequent DOM modifications it is suggested to set checkDOMChanges to false and to refresh the iScroll only once (ie: when all changes have been done). Default true.
see more on there page:http://cubiq.org/iscroll

data-rel="external" not working in jQueryMobile Beta 2 and PhoneGap 1.0

I just upgraded to PhoneGap 1.0 and jQueryMobile Beta 2 and it seems like file:// navigation is totally borked. I've posted a super stripped-down 2 page example for Android 2.2 here: https://bitbucket.org/uhlenhuthm/pgdemo/overview
DETAILED PROBLEM DESCRIPTION:
I've created a very simple 2 page test application in PhoneGap 1.0 for Android. In my assets/www folder, I have two files: index.html and hola.html. PhoneGap loads the index.html file which contains a single button (see below). Clicking on the button SHOULD load a new page (no AJAX loading), but instead the button just changes color while being tapped and nothing else happens. This only happens when the link has data-ajax="false". Setting data-rel="external" actually has no effect and JQM loads the page using AJAX (another bug). AJAX loading works fine, but that's not what I need (for a more complex project). Including the phonegap.min.js file doesn't fix the problem either.
The weird thing is that this works in the browser (not going through PhoneGap on the phone, it goes to hola.html no problem). Maybe there's something weird with how JQM and PhoneGap deal with file:// URLs?
Am I making a bonehead mistake or is there something really wrong here?

Attempt to give this a read. He points out many different issues with upgrades, this being one of them. Here is a quote detailing what probably is causing this issue: "If you are unable to open a second html page in your app then you're missing the following tag which should be placed in the application tag of your apps AndroidManifest.xml:"
<activity android:name="com.phonegap.DroidGap" android:label="#string/app_name" android:configChanges="orientation|keyboardHidden"><intent-filter></intent-filter></activity>
I hope this helps!