0

I'm developing an Arabic android hybrid application using IONIC and Cordova, but seems some issues ( not applying font, scrolling not smooth etc...) to android 4.0-to 4.4. To solve this issue I tried with cocoonjs+webview , Now issues solved but the apk size for coccoon and webview+ is 18MB.

Suggest me a solution with less apk size?, Have any option in Cocoon JS to reduces the apk size? any other solution to at-least work applying font change with less size of apk? Any option to install a less size apk and and run-time if user wishes to download and add chrome-view to the installed apk?

Abdul
  • 321
  • 4
  • 22
  • While importing Cocoon's resource files, did you take care of the redundant (i.e minified and non-minified versions of JS)? You should try to minify your Javascript files used in the project. The size of your JS will then be reduced by more than 40%. – Keval Apr 01 '15 at 07:16
  • If you add chromium to your APK the size will increase. There is no way around it. Either stick to the stock (and slow) webview in 4.0 - 4.3 or accept the plus in size. – Markus Müller Apr 01 '15 at 09:19
  • @Keval how can I use minify files for cocoon.js I saw a file with name libLudeiChromium.so which has a 27MB size. How can I minify it. – Abdul Apr 02 '15 at 04:42
  • Sorry, but now I agree with @MarkusMüller. You cannot do much about the size. I have a 100% working solution for your slow scroll. And having enough experience with Ionic, I can help you with other issues like font too. And to answer your question, there are various tools for minifying JS, some come as plugins for your code editor. Some provide CLI for minifying, so search on Google for js minify tools for your operating system. – Keval Apr 02 '15 at 06:32

1 Answers1

0

Even I had this issue of having a very slow scrolling. Adding overflow-scroll="true" to your ion-content removes some scroll effects, which is worthy cause the scroll lag is gone; so I added it and my scroll is now flawless.

So, your HTML will look something like:

<ion-content overflow-scroll="true" class="has-header">

And why are you unable to use fonts? Have you imported the correct files in the right manner? This is how I import font using CSS and all works good:

@font-face {
  font-family: "Roboto-Regular";
  src: url("../fonts/Roboto-Regular.ttf");
}

And I use it in this way:

.titlemenu {
  font-family: "Roboto-Regular" !important;
}
Keval
  • 3,389
  • 2
  • 24
  • 41
  • I need to apply arabic font to hybrid app developed with ionic used @font-face { font-family: 'me-quran'; src: url('../font/me_quran.eot'); src: url('../font/me_quran.eot?#iefix') format('embedded-opentype'), url('../font/me_quran.woff') format('woff'), url('../font/me_quran.ttf') format('truetype'), url('../font/me_quran.svg#me_quran') format('svg'); font-weight: normal; font-style: normal; } – Abdul Apr 07 '15 at 14:48
  • So, when you use `font-family: me-quran !important` styling for a text container/class, this still doesn't work? – Keval Apr 08 '15 at 14:57
  • Yes we tried like this, still it won't work for android 4.0-to 4.3 but working with 4.4 and above – Abdul Apr 09 '15 at 13:54
  • Oh... this is just a guess: it seems like it is device/OS dependent? If that would be the case then I think your application would require root access to install the font on user's Android system. So then your font would be readable by the OS. – Keval Apr 10 '15 at 06:20
  • Explained everything in my question itself. I need to deliver it to others so root access is not a solution , but cocoon is doing it , size is the issue , Looking a clever man to explain , How can I use cocoon with minimum size or solve font issue, Thanks for your comments. – Abdul Apr 13 '15 at 11:33