Develop Reference

Apache Cordova on VS output problems

Hi I'm new to Apache Cordova. I've recently developed a web application that works fine on chrome and devices but when i get Visual Studio Apache Cordova (visual studio 2015) output some CSS files seem to be not loaded completely i mean some parts of CSS are not working as it must. and the second problem is the output is different in different devices on nexus 5 it is 90% OK but in LG L70 or bluestacks less than 30% is OK.
anyone knows the reason and solution?
Thanks

Well, without any code it is hard to tell (and your question is very broad!). I also have to bite my tongue in order to not go raging against Cordova (again).
But from my (luckily) poor experience with Cordova you have do deal with different WebViews and their different implementations.
I recommend you to get the Android WebView version of your device and test your app with this in mind. May you find similarities like "Everything goes wrong in WebView versions below 3.2.1" and modify your app accordingly to your findings.

First make sure you don't have any errors in your html / css by using the online validators.
Second, make sure the CSS you are using is available on the version of Chrome / Android that those devices have (www.caniuse.com). Make sure you are using the browser specific prefixes where needed (i.e new versions of Chrome would not need, but older Chrome/Webview would).
In my experience that will find many of the issues with a Cordova app, especially on Android. Most likely your CSS is not taking into consideration all the variation among mobile browsers. It is not easy to do unless you have done it before.
Another way to ease these issues on Android is to use the Crosswalk plugin. Since you are using VS 2015 it is real easy and available in the config.xml editor to add. This will increase build time / size of the app, but it is just about necessary for serious Android hybrid app development. What crosswalk does is package a new up to date version of Chromium with your app. It makes many issues like you are seeing go away, plus it gives you a lot of newer web APIs (webrtc for example) on the devices.
One last option is to use a tested / supported library like ionic (can just use their CSS if you want and not full stack), jQuery mobile, Onseen UI, etc... You can use this together with Crosswalk to get a very consistent experience on all the Android devices / versions.

Change default webkit on Apache Cordova - Android

In my team we are developing an application which is going to be played on tablets, the project has been largely developed and tested on Google Chrome.
At this time we are inserting this webapp on Apache Cordova in order to display it as a native application on Android (and later on iOS), but the app doesn't displays well on the tablet, this because of the WebKit version, which varies on every Android version and does not work as in Chrome.
The question is... There is any way to change the webkit version which operates with Apache Cordova? (or any other web rendering engine)

There is no way at this current time to change the Webkit version used by Apache Cordova - this is because Cordova uses the native Android WebView component, which is based on an old Webkit version. The native Android WebView is quickly becoming the IE 6 of the mobile world, if it isn't already.
EDIT WHOOO! Android 4.4 announced that the default WebView will now be built on top of Chromium! This means that Cordova apps running on Android 4.4 should run much faster (new JS engine) and support more features (HTML5 things.) There is still a lot of confusion around this new WebView and what it means. The best article I have read so far is here: http://www.mobilexweb.com/blog/android-4-4-kitkat-browser-chrome-webview
A lot of people have realized that this is becoming a big problem with Cordova apps. There has been some experimental work to build a version of WebView that uses the Chromium source (and thus an updated version of Webkit (Blink?)), you can view the code here: https://github.com/pwnall/chromeview Check out the "issues" tab and follow it; I've been getting a few emails every week from people filing issues. I think some forks are ahead of others and hopefully they are getting close. (According to Cordova mailing list archives, Opera was able to get this working on 2.2 but I can't find any code or anything more than a passing reference.)
If you are able to get WebView built with Chromium, it shouldn't be that difficult to switch out which WebView class Cordova uses; I'm pretty sure this ability was already added to Cordova with this and similar commits: https://git-wip-us.apache.org/repos/asf?p=cordova-android.git;a=commit;h=f6049881
I think a lot of people are holding their breath that Android 5.0 will finally have an updated WebView that uses Chromium source and will be updated in sync with Chromium... if so, that'll be awesome, but it still leaves us with 4.0 and below that doesn't seem to work at all.

I'd suggest checking out CrossWalk. It's developed by Intel and uses the Blink rendering engine (same as chrome). You package it with your cordova app and then you can use same the Web rendering engine across all devices and versions 4.0+.
https://crosswalk-project.org/
Note: It adds about 20MB to your app's size, but I'd say that's minor for the headaches it would save you in cross device/version testing that you'd have to do.
Check out here to get started with crosswalk and cordova..
https://github.com/crosswalk-project/crosswalk-website/wiki/Create-Sample-App-With-Crosswalk-Cordova-Android

With the release of Apache Cordova Android 4.0.0, it supports "pluggable WebViews".
So, using Crosswalk with Cordova is just matter of installing the cordova-plugin-crosswalk-webview.

Using Webrtc in Native App

My questions is :
1 -- Is it possible to have a WebView( Provided by Native framework) instance in my Native App , and extend it to support Webrtc,
if 1 is Yes, then probably following would be the action Item
1 -- Have a webrtc build on Android, 2 -- In Android WebView extend Javascript to couple / bind the Webrtc call,
Please confirm..
What i am trying to do is
1 -- We have webrtc based Voice / Video chat application working fine in Chrome & Mozilla desktop Browser, as both comes with webrtc... , i.e. user need to access www.xyz.com and it will start video / voice sessions,
2 -- same thing on mobile, we would like to go as a native app, i.e. we are trying to make an application, which will have native WebView instance, in which we will access www.xyz.com to have voice / video session
3 -- I tried the way i explained in 2 but it seems, in WebView instance provided by Application framework doesn't have webrtc enabled in it, so i am trying to add it and this is what i am thinking,
-- WebView instance has some mechanism to extend the Javascript , that means
http://dev.w3.org/2011/webrtc/editor/webrtc.html
some of these API i need to add into the WebView, and for their implementation will come if i am able to successfully integrate and build Webrtc over android and iOS Platform
Please comment....

If you want to use webRTC in a Native App, i've built a small android app (https://github.com/pchab/AndroidRTC) that share the back camera to a nodeJS server (https://github.com/pchab/ProjectRTC).
I found that the easiest way to use the libjingle library is with IntelliJ IDEA. I've had a lot of problems with Eclipse and Android Studio.

You're going to have a hard time with the WebView, although it's coming on (newer) Android at least. Nothing on the horizon for iOS.
If you want complete native, you can check out what we've done # FM with IceLink, sounds like it might work for you.

Android WebView does not support WebRTC APIs at this point.
Work is underway on Java an Objective-C bindings, though that may not solve your problem.

With Android L release this should be possible by using just the Android WebView, more below :
http://developer.android.com/about/versions/android-5.0.html#WebView

I know this question is kinda old, but I find crosswalk (https://crosswalk-project.org/) to be a pretty good solution for using WebRTC inside of an Android app. What crosswalk do, is compiling a chromium browser into an Android app and hosting your site inside of this chromium, so you will have support for the latest browser features, like WebRTC.

I'm building a native app with a webview and webrtc video inside.
So generally it is possible to build such application and nowadays chromium (webview) have a official support https://developer.chrome.com/multidevice/webview/overview , but I have faced really a lot of problem during writing that application.
Few problems are:
Support for phones and os version - I have android 5.1.1 (xperia m2) and after a lot of problems webrtc is running. On android 6 (xperia z5 compact) is not working.. On other phones is sometimes working sometimes not...
You can not be sure, how webview will work - today webrtc is working, but tommorow Google can add some security rule, and it will not work- it's a little bit unstable, and as I have seen, some things depend on os compilation. WebView can get update from store independently of os.
PERMISSIONS - there are a lot of stupid problems, based on the fact that is it a browser inside native app, like - you can't expect a permission question from webview, you have to implement it in android webview config, and in some android versions it is working- in others not :-)
Still a lot of problems of 'young product' - example is that nowadays webview has some issue with devices info display (like camera is front or back) so you have to find a workaround for such problem
Bad video quality - currently my problem is a quality of video- nice quality of video on phone, below maximum resources consumed (cpu, network, memory) and video on computer is really poor...
...and many more
So the fact is - yes this is possible, but it's still not good enough to use it without facing a lot of problems which are not so easy to solve.

You can actually go native with html5 features. So if you use Crosswalk as someone mentioned before, but if you are really set against using: Crosswalk/Ionic/Angular/Cordova (which is awesome), you can still use Crosswalk in a native environment to replace inconsistent and feature lacking WebViews with 1 single, full WebRTC compatible WebView based on the Blink Engine.
I remember reading a few guides on how to get Crosswalk going in Android Studio, here's one I quickly searched, but just Google around there's a bunch of them.
https://www.snip2code.com/Snippet/34721/How-to-use-CrossWalk-runtime-within-an-A

Embedded Chromium or Webkit in Android app

For our Android app, we would like to embed our own browser/rendering engine. The most likely candidate for this, is Webkit/Chromium. We are looking for something similar to WebView, essentially, but backed by a browser (version) that we control.
Background
Significant parts of our app consist of web page fragments embedded in the view (served by the app itself). We try to do this as transparently as possible (from a visual/user experience standpoint). So far, we have been using WebView for this and that works for the most part. Except when it doesn't.
Some phone vendors have unfortunately decided to tweak the standard Android browser here and there. In some cases, this breaks our app or makes the fact the we embed a web page more noticeable.
Our Idea
We'd like to have a component similar to WebView but where we control what version of Webkit/Chromium (or some other rendering engine) is being used. It wouldn't necessarily have to be the latest and greatest version. It is more important that we can get our app to work consistently across as many Android devices as possible.
So far
Our research so far has not turned up anything useful. We have found three dead attempts to port Webkit to NDK (the bare Webkit for Android port uses functionality not available in the NDK and thus not to app developers):
Webkit Android port by Company 100 (no updates for over two years)
mogo-browser (their last revision was to delete all source code)
NDK Webkit (officially abandoned by its author)
Looking on StackOverflow, we have also found a number of similar questions, most of which being solved by pointing to WebView (we already do that, and it's not good enough)
Webkit component for Android
Embed basic WebKit + V8 in my app
Embedding a newer version of WebKit with Android app
We are currently investigating whether Chromium for Android (or parts of it) can be turned into a library that our app could use. Has anyone else done this?
Update
After having a look at the chromeview project on GitHub (accepted answer), we decided that we'd rather wait for Google to release a Chrome-based WebView on future Android devices. The Chromium rendering engine turns out to be fairly large (~40MB), which doesn't leave much space for the actual app :(

pwnall/chromeview · GitHub
https://github.com/pwnall/chromeview
ChromeView works like Android's WebView, but is backed by the latest Chromium code.

You should all check out the Crosswalk project. Sponsored by Intel, and in active development. They pull the Chromium sources and promise to make all new Chromium features available in Crosswalk within 6 weeks.
Crosswalk is a web runtime for ambitious HTML5 applications. It provides all the features of a modern browser, combined with deep device integration and an API for adding native extensions. It is especially suited to mobile devices.
Crosswalk supports Android 4.0 and newer, on ARM and Intel architectures.
Within in one hour of finding this project, I had my Cordova/Phonegap app running on an Android phone with Crosswalk. I'm glad I don't have to adjust my Javascript code to respect the shortcomings of the (pre-4.4) android.webkit.WebView.
https://crosswalk-project.org

Without WebKit there is a GeckoView. Sure it adds over 20Mb of libs to the project.

Nowadays, GeckoView seems an alternative to consider

I tried to use lastest code version of Chromium to build a custom WebView and it's successful.
I will give my approach but not the source code here right now.
Eventually, the size of custom WebView library is about 30MB, quite big for some small app. But it's wonderful because can support perfectly from Android 4.0.
This below is my method:
fetch source code of chromium and build web_view_apk (AndroidWebView test shell) follow this instruction https://www.chromium.org/developers/how-tos/android-build-instructions
use apktool to decompile the apk file of Aw Shell above. https://ibotpeaches.github.io/Apktool/
create your project with res, lib folder as same as decompiled project.
Manifest file is located in /src/android_webview/test/src/org/chromium/shell
src folder: you find the classes in chromium project source code which are respective the files in smali folder of decompiled project.
I will update my code later, but you can try my guide now if don't want to wait.

I would consider Chrome custom tabs:
https://developer.chrome.com/multidevice/android/customtabs

does same code can work on both android tablet and ipad perfectly?

Hello friends I am an android developer and right now i am working on sencha touch framework on android platform to develop an app which can run on multi platform e.g android tablets and ipads.
But i have question in my mind that if i create my app on android tablet emulator according to the android tablet need(means layout configuration),will the same app work on ipad? or i have to work on simulator to make it work on ipad? Please suggest me with ur views.
Thanx in advance.

Most of the things works great for both of them. But there are some issues that you need to test on both the platforms e.g. Video Player for playing local videos on SD card.
Because, this generally is not a problem for iOS, but for android, you'll need your plugins. Also, from UI perspective, you must check on both the platforms. Since same CSS may or may not match. Happy Coding!

Native (i.e. Activity/Window) code is not compatible between the two platforms. If you develop using a web framework such as Phonegap, your differences will just be layout/CSS and plugin issues such as those mentioned by #Rajkiran.
You can also use commercial platforms such as Xamarin for abstraction of the hardware platform.
See this question for more details.