shax
November 21, 2018, 8:09pm
1
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
armanb
February 4, 2019, 2:47pm
2
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);