solved Cordova/Phonegap and Babylon

[max123]

Hey guys,

Has anyone had any luck packaging up a Babylon scene inside a Cordova app?

The problem I'm having is apparently path related: I get the error message "Error status: 0 - Unable to load..". Everything works fine on the webserver though.

[mr_pinc]

Pretty sure you need to use - https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview - I have not tried it myself yet, but that's what I found in doing research for an upcoming project.  

[max123]

Unfortunately, crosswalk has been discontinued: https://crosswalk-project.org/blog/crosswalk-final-release.html

[RaananW]

When exactly did you get the error? Only while loading a model? Can you paste the entire stack trace?

It could be something concerning the navigator or window object that can be easily solved. 

[max123]

This particular problem was solved when I updated Xcode. It was happening in simulator mode only. 

However, at this stage, I'm not sure Cordova is a universally viable solution for mobile platform.

My findings so far:

Android (tested on Samsung Galaxy S7):
- Everything works fine, in fact, much better than expected. No issues whatsoever.

iOS (tested on iPhone 5s and 6s)
- Scroll doesn't work. At all. I've read many users have this problem, there's a shittone of suggested solutions, but none has worked for me so far.
- Some Babylon scenes load and work, some fail (Xcode debugger is not reporting any errors/problems).
- Performance is absolute shite compared to viewing the same content through iOS Safari. I presume this is due to an older Webview shipping with Cordova. 
- I'm getting more and more pissed off with the whole Apple ecosystem. With Jobs gone, the company stopped giving a flying fcuk about their products and are only interested in profits.

 

I tried using React Native, but have given up on the idea at installation stage: it failed to install required npm components. There's a bug raised on Github and their solution is to downgrade your npm to v.4. Screw that.

[JCPalmer]

Have you tried CocoonJS? It still use crosswalk AFAIK.  Given that they have a Launcher test App in both App stores, there should be no coding.  Just download the app.  Get an account.  Key in a URL of a page.  Right @Ludei?

[max123]

OK, after a few trials and errors I managed to come up with a workflow that works(-ish):

Global:

1. Install cordova: 
$[sudo] npm install -g cordova
2. Install Xcode and Android Studio

Project:

1. Create project:

$ cordova create project-folder-name com.example.myapp MyAppName
$ cd project-folder-name
$ cordova platform add [ios][android]
$ cordova plugin add cordova-plugin-wkwebview-file-xhr

The last command will replace the default Webview with WKWebview, which is much, much snappier! And the scroll is working too.

 

The problem is, I'm still unable to launch PDFjs modules (I think there's a problem with webworkers as I'm getting an arcane error: Warning: Setting up fake worker). PDFjs doesn't work on Android either. [Edit: it works on Android, had a trailing slash in requirejs config. iOS - still no luck.]

Another problem is BJS  on iOS: can't find/load ANY textures. Something to do with paths I presume. Works great on Android though. 

 

[mr_pinc]

Thanks for posting this solutions.  I'm sure it will come in handy for me and others when we're doing our own Cordova stuff. 

[max123]

Updated instructions:

1. Install cordova: 

$[sudo] npm install -g cordova

2. Install Xcode and Android Studio

Create project:

$ cordova create project-folder-name com.example.myapp MyAppName
$ cd project-folder-name
$ cordova platform add [ios][android]

Add ionic WKWebview plugin:

$ cordova plugin add cordova-plugin-ionic-webview 
$ cordova build [ios][android]

Open your project in Xcode or Android Studio to deploy.

 

 

Using ionic WKWebview solves all issues on iOS.

Enjoy!

[max123]

Ionic's Webview runs localhost (unlike standard-issue WKWebview plugin), so local file CORS issues are gone.

[DylanD]

On 10/23/2017 at 6:29 AM, max123 said:

OK, after a few trials and errors I managed to come up with a workflow that works(-ish):

Global:

1. Install cordova: 
$[sudo] npm install -g cordova
2. Install Xcode and Android Studio

Project:

1. Create project:

$ cordova create project-folder-name com.example.myapp MyAppName
$ cd project-folder-name
$ cordova platform add [ios][android]
$ cordova plugin add cordova-plugin-wkwebview-file-xhr

The last command will replace the default Webview with WKWebview, which is much, much snappier! And the scroll is working too.

 

The problem is, I'm still unable to launch PDFjs modules (I think there's a problem with webworkers as I'm getting an arcane error: Warning: Setting up fake worker). PDFjs doesn't work on Android either. [Edit: it works on Android, had a trailing slash in requirejs config. iOS - still no luck.]

Another problem is BJS  on iOS: can't find/load ANY textures. Something to do with paths I presume. Works great on Android though. 

 

Hey max, I was wondering if you ever had any problems with finding/loading textures(or anything for that matter) with android.

I get many failed to load resource: net::ERR_FILE_NOT_FOUND

Then the texture loads in as a red and black checkerd board (its not supposed to be a red black checkers board at all)

Whats really weird that I cannot figure out is that I have sound files too and some of them load fine but still give an error and other don't load at all and give the error.

None of the textures, or models load in at all.  

Problem: I get that error for all resources I try to load in.  However some of the audio files actually load and I get to hear them, nothing else will actually load though, and I still get the error on the audio files that do load.  I need everything to load and not give an error.

Any ideas?

[DylanD]

Some more info on my setup:

I have Cordova-plugin-whitelist installed

I have Cordova-plugin-file installed

This is my config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.helloWorld.com" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Hello /world</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <plugin name="cordova-plugin-file" spec="^4.3.3" />
    <engine name="android" spec="^6.2.2" />
    <engine name="browser" spec="^5.0.3" />
</widget>

Here is the heard to my index.html

<meta http-equiv="Content-Security-Policy" content="default-src *;
        img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
        style-src  'self' 'unsafe-inline' *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

Here are the errors I'm getting(short version I get a lot of these)

Failed to load resource: net::ERR_FILE_NOT_FOUND

BJS - [10:19:10]: Error while trying to load image: textures/background.png

 

I am using chrome remote debugging to debug.

 

I have setup all of my file paths like so:

folder/file.png

no "./" as I heard this causes problems.

 

The Babylon's side of stuff was working when I make it for a local server but not when I put it on android. I am not building for iOS at all.

[DylanD]

so I'm doing some debugging and it would seem that the sounds are all loaded properly then after they are all loaded I get the error which is:

XHR 0 on: Audio/new/sound1.mp3.

Sound creation aborted

Just some more information.  Im going to continue to debug.

[DylanD]

I think it its because it is trying to load all of these from file:///

which I don't think babylon can

[Guest]

Well it is more a browser/webview limitation