I'm trying to render some WebGL in my PhoneGap/Cordova app but I'm having no luck.
var canvas = document.createElement('canvas');
var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (!gl) {
console.log('WebGL not supported');
}
The gl variable is always null.
I've tried with a OnePlus One and a Nexus 5 which are both Android KitKat v4.4.4 Chrome 38.
The same code works fine on iOS8 and on a desktop.
The code works on a normal webpage loaded in chrome on those devices. So does http://get.webgl.org/
I've even tried using CCA which uses crosswalk to bundle Chrome into the app.
I've tried Googling bug I'm flooded with people having problems from when devices didnt support it (iOS < v8 and Android < v4.4).
I'm thinking that it might be something that I have to enable in the build chain.
Thank you in advance.
Glen
I've figured it out with some help.
Even though I have Chrome 38 installed, the WebView is actually not using the installed chrome version but another version that ships with the OS and doesn't auto update.
The WebView is actually Chrome 33 which doesn't support WebGL.
When Android L comes out, it will support WebGL in the WebView which will automatically update too.
In regards to the CCA version, it bundles Chrome 37 which supports WebGL. It works on devices that don't have blacklisted GPUs. If you follow these instructions it tells you that you can make it ignore the blacklist and run on all devices but might have unstable results.
If you want to use WebGL on Android 4.0+ Ludei (http://ludei.com) has a project called WebView+ that allows you to use the latest Chromium project on Android. The drawback is that 15Mb are added to your final APK. You can test it using the CocoonJS Launcher App: https://play.google.com/store/apps/details?id=com.ideateca.cocoonjslauncher&hl=es where you can point to a URL (even use a QRCode so you do not have to type the whole URL on a mobile device) or even upload a whole ZIP file with your project to test it off-line.
Related
I am getting the following error (see image) when running a very basic Ionic 4 / Capacitor app on an Android 6 device.
I think it is because the the Android system webview needs to be updated.
I don't have access to the device myself as it is with a client, all I have is an emulator. I can't seem to update the webview version on the emulator and I don't think this is possible so I can't replicate.
Capacitor states it should work with back to Android 5.1 if the webview is up to date.
I am not that familiar with older Android devices.
Is it as simple as sending this link and getting them to update the webview via the play store?
Will the device have play store installed?
https://play.google.com/store/apps/details?id=com.google.android.webview&hl=en
Capacitor docs:
https://capacitor.ionicframework.com/docs/android/
**Note:** Currently to use an Android Emulator you must use a system image of at least Android version 7.0 on API 24. This is due to the System WebView version not being able to be updated on emulators. Physical devices should work as low as Android 5.1 so long as they are kept updated.
Update:
I go the app to run on the device by removing all Capacitor plugins.
How ever I still have several issues:
I need to use plugins in the app
The css is not getting displayed correctly at all. None of the Ionic 4 colors are applying and the style are off.
It appears even after updating the Android system webview via google play to the latest and updating google chrome it is still using an old version of the webview.
Here is the userAgent output:
Mozilla/5.0(Linux; Android 6.0; C72 Build/MRA58K; wv) AppleWebKit/537.36(KHTML, like Gecko) Version/4.0 Chrome/44.0.2403.119
Mobile Safari/537.36
The latest version on chrome is 73.0.3683.90 so it is way off.
This is the device:
https://www.chainway.net/Products/Info/42
Final Update:
I contacted the manufacturer of the device and they confirmed that the webview was locked to version 44 on the firmware.
They are look at providing an updated version of the firmware with a more recent webview version.
Also it was only the capacitor/core plugins that were not working. I could still use other 3rd party plugins such as a barcode reader.
If you are in the situation above I recommend using navigator.userAgent to determine the webview version as mentioned by #jcesarmobile in the comments below.
Yes, if you send that link and they update the Android System WebView then the app should work fine.
Unless your customer is in China, Play Store doesn't work there.
I currently just created an Ionic 4 application and when i test on my android 5.1 device nothing shows, i go to google to find out what the issue could be and it turns out ionic 4 has a problem working on android 5.1 and lower devices. Is there anyway to get it to run on at least android 5.1 ?
It appears that Ionic has a closed issue on Github for this that states that Android 5 is not entirely supported:
https://github.com/ionic-team/ionic/issues/15438
One of the Ionic team members states:
"We are aware of this issue and have been working to fix it for some time. The main issue here is that there seems to be a constant stream of things that need to either be polyfill or reworked in order to support older Android. And to add to this, the android emulator is not always the best test ground
As the older android emulators are not connected to google play, they do not receive updates to the browser, meaning that though a real android 5 device might have chrome 70, the emulator is stuck on chrome 37 (~1% of the global market), which is a drastically different environment.
While we are making fixes internally in both stencil and ionic/(core,angular), devs can enable Angular Polyfills to fix some older features.
For most cases though, people will not be seeing "older" webviews that devs are getting in the Android emulator. They will be getting new chrome (70+) and all the latest web features.
We will we continuing to address this issue and make sure things work as expected."
I have been trying to investigate during these days exactly which browser is the one that comes by default in the android devices, but I am still confused.
If I understood this correctly, there are two possibilities depending on the device and Android version:
"Android Browser" (its version depends only on the Android API? no updatable? based on WebKit?)
"Chrome for Android" based on WebKit
I have done some tests with all the devices that I have been able to obtain and I have seen that approximately from version 5.0 or 5.1 of Android the default browser begins to be Chrome for Android. I think that because on versions smaller than 5.0 I cannot debug the app-browser connecting it to my PC and from the chrome://inspect and on versions higher I can do it, but maybe I'm wrong. I would like to ask if anyone can verify or correct that?
I have also realized that in versions higher than 5.0 there is an application called "Android System WebView" also available in PlayStore, but I would also like to ask: Does this have any relation to the type of browser installed (Android Browser or Chrome For Android)?
Is this even possible with version 4.4.2 now? I had tried to use webview to load swf file on android application but it does not work. Can someone verify this?
Using Flash in Webviews on Android has not official been supported for a while. It sometimes works on older (4.0 and older) Androidversion where the flash plugin still is installed but the reach is constantly decreasing and I wouldn't recommend using it.
To deploy flash applications on your mobile device you might be able to use AIR though:
http://get.adobe.com/de/air/
I need to display WebGL graphics in my webview. Is there any way to modify Android WebView to enable WebGL. If yes, How?
WebGL was not supported in WebViews before Android Lollipop. In KitKat, Android switched to Chromium as the native WebView implementation, but it is locked to Chromium 33, with no WebGL. In Lollipop, WebView is updated via the Play Store, and now supports WebGL. (source: https://developer.chrome.com/multidevice/webview/overview)
Trying to extend WebView to support it is next to impossible.
One thing you might consider, is use CSS 3D transformations instead of WebGL, those are supported on Android ICS and forward, see http://caniuse.com/#feat=transforms3d
WebGL is not supported in current Android webview, you can however use crosswalk-project which is a web runtime that supports WebGL and package it in a android app along with your WebGL app. The latest Intel XDK supports building Android apps with crosswalk runtime.
You can view WebGL on new Android devices using the Chrome Beta app or Firefox beta app. The only device I have tested and this worked on is the Asus Nexus 7 tablet running Android 4.2.2.
My Motorola Razr running Android 4.1.2 does not support WebGL with google Chrome Beta.
Not sure if this directly helps.. but FYI.
Although it is not possible to enable WebGL for Android WebView, there is an option to have native apps using WebGL for rendering using CocoonJS by Ludei (www.ludei.com). They even have a demo app in Google Play to show some known WebGL demos running even in Android 2.3 devices.
https://play.google.com/store/apps/details?id=com.ludei.demos.webgl
Even running on OUYA!
http://www.youtube.com/watch?v=ypyqkAo1jgo
I have chrome version 28.0 on OS 4.2.2 WebGl is not enabled by default you need to enable it by typying chrome://flags/ in seach bar just the way shwn in pic below
Once you have enabled web gl relaunch chrome and you will be able to run most of three.js experiments . I have shared screenshots for few :-
I also tried everything on webview but I was unable to set webgl flags. Probably it is not possible to use webgl in webviews .