Ionic-cli: Local Resource Generation

[imhoffd]

It would be nice to investigate a local solution to the resources generation, instead of using the legacy resources server and requiring a login.

• https://www.npmjs.com/package/sharp (requires native code)
• https://www.npmjs.com/package/jimp

Issues this might solve or be solved with this:

• https://github.com/ionic-team/ionic-cli/issues/2331 (online generation requires login, offline wouldn't)
• https://github.com/ionic-team/ionic-cli/issues/2132 (Android adaptive icons)
• https://github.com/ionic-team/ionic-cli/issues/3672 (PWA icons)
• https://github.com/ionic-team/ionic-cli/issues/2679 (differentiation between landscape/portrait splashes)
• https://github.com/ionic-team/ionic-cli/issues/3851 (option to remove alpha channel)
• https://github.com/ionic-team/ionic-cli/issues/2924, https://github.com/ionic-team/ionic-cli/issues/3540, https://github.com/ionic-team/ionic-cli/issues/3849 (connectivity, streaming issues)

[harshzalavadiya]

I guess ionic resources was built as an service because image resizing with nodejs will require third party libraries and will add too much overhead to actual framework

And most off libs are not very well suited for cross platform

Long ago when I was working on proxied environment I wrote an small utility on weekends using golang that allows to generate resources offline and is lightweight no dependency an wrapper can be easily wrote around it if we want to ship as npm and can download binaries according to OS.

Maybe worth making and less time consuming if folks at ionic are interested

PoC https://github.com/harshzalavadiya/ionic-resource-generator

Edit: Jimp looks more promising

[imhoffd]

@harshzalavadiya (and others) CLI 4.9.0 just shipped with a hidden option to try a local resources generation tool.

Try this:

npm i -g cordova-res
ionic cordova resources --cordova-res

[harshzalavadiya]

That's really cool 😎, thanks

Btw, repo link on npm is giving 404 isn't it open source

[imhoffd]

@harshzalavadiya Thanks, I just had to make it public.

https://github.com/ionic-team/cordova-res

[trumbitta]

@dwieeb this needs to be the new default :D

[imhoffd]

@trumbitta Thanks! Glad you like it. I'll be rolling it out to more people as I get more feedback.

[rodrigograca31]

I got something to add:
Currently the resource processing happens on an ionic server and first uploads a "non valid" image to then say its too big.... What a waste, at least check that it has a reasonable size before proceeding...

{"Error":"image too large: 29906794","Width":0,"Height":0,"Type":"","Vector":false⠴ Uploading source

It uploaded my almost 30MB png splashscreen to then say its too big....
Yeah now I know its too big and have fixed it (was exporting with no compression at all, my bad)
Probably the same with the icon resource....

This is wasting so much bandwidth..... not a problem for me but ionic servers could save so much bandwidth!

[imhoffd]

@rodrigograca31 Thanks, but that won't even be a consideration for local resource generation. It won't need to upload.

[rodrigograca31]

@dwieeb Yeah, was just mentioning it while they stay with non local resource generation.

[imhoffd]

Ionic CLI 5 ships with support for generating Cordova resources locally using the cordova-res utility, which completely replaces the existing code for generating resources remotely in ionic cordova resources.

Give it a try! Leave feedback/bug reports in either repo. Thanks!