Ionic4 with Crosswalk Webview on Android platform

DISCLAIMER: I’m aware crosswalk is not supported anymore, and that it adds substantial size to the APK

Now, since Ionic4 is not working in WebView versions <54 I’m trying to make current Ionic beta16 work with crosswalk. I was able to install and run everything with some workarounds, but can’t get icons to show. There’s no error in console. I can see valid network request for the icons and responses with something like this

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M32 256c14.1..."/></g></svg>

But icons are not shown (there is blank space and sidemenu is working)
I’ve created gist with steps I did to make it work

Anyone got it working on Ionic4?

My info

Ionic:

   ionic (Ionic CLI)             : 4.4.0 (C:\Users\Ivica\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.2
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, (and 6 other plugins)

System:

   NodeJS : v11.2.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10
1 Like

Have you solved this problem?
My app not show ionic icons with crosswalk.

Nope. Still have a problem. I think I will just make the minimum version 5.0 and whoever has 4.4 and less will get the PWA version, which works perfect on those devices if they have Chrome installed.

I finally managed to have it work with SVG icons showing.
I had to use a slightly modified version of the fetch workaround, found here:
https://github.com/ionic-team/ionicons/issues/572#issuecomment-478587306

But there was another problem, because requested URLs were something like:

file:///svg/md-home.svg

but didn’t work (file not found), because of that triple slash at the beginning.
So I had to modify the workaround code such as:

        //remove triple slashes from the URL
        req.open('GET', url.replace(/^file\:\/\/\//, 'file\:'), true);

There probably are more elegant solutions, but this is working for me with this ionic info:

Ionic:

   Ionic CLI                     : 5.2.1 (C:\Users\Paolo\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 8.0.0
   Cordova Platforms : android 7.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, (and 6 other plugins)

Utility:

   cordova-res : 0.6.0
   native-run  : 0.2.8

System:

   Android SDK Tools : 26.1.1 (C:\Android\Sdk)
   NodeJS            : v8.9.4 (C:\Program Files\nodejs\node.exe)
   npm               : 5.6.0
   OS                : Windows 10

On a device with Android 6.0.1 and WebView v44.

I don’t know what I changed, but now requested URLs are something like:

file:///android_asset/www/svg/md-home.svg

So I now have to use this instead:

        //remove triple slashes and prefix from the URL
        req.open('GET', url.replace(/^file\:\/\/\/android_asset\/www\//, 'file\:'), true);