Onsen UI make screen appear as a blank white screen in Android 4.4.2

[dvlwjoffice]

Hello, recently i got call from my work partner for the app that i make with onsen ui in cordova appear as a blank white screen. I already trying the app before, and never found bug like that. After trying to many gadget and platform, i just found that somehow Onsen UI make the screen appear as a blank white screen just in Android 4.4.2 and below.

Do anyone know how to fix this ?
And what makes Onsen UI appear as a blank white screen in Android 4.4.2 ?

Don’t force us to use Crosswalk, since it make the APK size became large and heavy, and its already not supported by Intel (CMIIW AFAIK) :(

[Fran Diox]

@dvlwjoffice We support and test only +4.4.4 as explained in the docs. For 4 - 4.4.3 you can either add the necessary polyfills (check “older browsers” in the previous link) or debug to see what’s the issue. About Crosswalk, it is a “finished” product and works well even though it won’t get more updates. The only drawback is the bundle size but you can have 2 apps, a light one for Android +5 and another one with Crosswalk for older versions.

[dvlwjoffice]

@Fran-Diox said:

@dvlwjoffice We support and test only +4.4.4 as explained in the docs. For 4 - 4.4.3 you can either add the necessary polyfills (check “older browsers” in the previous link) or debug to see what’s the issue. About Crosswalk, it is a “finished” product and works well even though it won’t get more updates. The only drawback is the bundle size but you can have 2 apps, a light one for Android +5 and another one with Crosswalk for older versions.

sorry, what do you mean by :

add necessary polyfills

? i can’t get it… even though i already read this https://onsen.io/v2/guide/faq.html#old-browsers , can you explain it a little bit for me? and little example what is polyfills and how to add them ?

Btw, i already debug it via visual studio, but when the apk start nothing appear in the console log, so i doesn’t know what is wrong there. Annyway, for crosswalk i already try it, but when compile it to APK its always failed and have tons of errors. Its why i am thinking that the crosswalk is bugged since its not supported by intel anymore.

Btw, Maybe this is OOT, but do u have idea why my simple APK with onsen ui can became 10 mbs ?

[Fran Diox]

@dvlwjoffice This is a polyfill. You add them by including their JS file in your app, either via <script src="..."> or import ... from ... syntax. The polyfills mentioned in that guide are some common features that Onsen UI uses and are available in current browsers. Android 4.4.2 has an old browser that doesn’t implement some of these basic features, thus you need polyfills. Crosswalk is basically providing a more recent webview in the apps that implement modern features and is more performant. I don’t know why you get those errors but it’s probably related to a misconfiguration with the Crosswalk plugin. They have a specific section for Visual Studio in their guide.

For the app size, are you minifying/compressing your code and assets? That usually reduces the size quite a lot. Onsen UI provides .min.js and .min.css versions.

[dvlwjoffice]

@Fran-Diox TIL that was called polyfill. So, whats polyfills that onsen ui have that i can add manually ? Sorry, if i am get it correctly i need to try to add a polyfill that missing so my application can run in Android 4.4.2 and below right ? But i already find it in onsen ui documentation and i doesn’t found anything.

Well, me already trying minifying/compressing the code and assets (except for webfont) and the size was around 4mb (source code before compiled it as an APK), its became 10mbs as APK.

[kobo2000]

@dvlwjoffice use polyfill.io service. However if your are offline you’ll see this blank white screen so grab a copy of this polyfill service into your assets. it works fine 90% of time -at least for me .

[dvlwjoffice]

@kobo2000
Thanks for reply, but wait a minutes, so i just need to download their assets, include it in my file (with <script src blablabla> ) and its work automatically ?

edit : seems i can’t found the way to grab a copy of the polyfill’s service and include it in my file. Can you teach me how to ? Thanks

[kobo2000]

@dvlwjoffice Yes, this is how it worked for me .

Polyfill.io reads the User-Agent header of each request and returns polyfills that are suitable for the requesting browser. Tailor the response based on the features you’re using in your app.

I managed to extract a copy of the src using emulator for android 4.4.2 webview using onsenui lib and Then included it as usual and tested it on real device and it worked offline . No more white screen online or offline. However , I couldn’t find a mobile with older android version around to test it further. here is a copy of the polyfill src for android 4.4.2 webview https://upload.run/ligjjg
Try it and let me know if there is any issues as I’m still testing this method . The current issue I found till now is content gets blurry sometimes .

[dvlwjoffice]

@kobo2000 said:

@dvlwjoffice Yes, this is how it worked for me .

Polyfill.io reads the User-Agent header of each request and returns polyfills that are suitable for the requesting browser. Tailor the response based on the features you’re using in your app.

I managed to extract a copy of the src using emulator for android 4.4.2 webview using onsenui lib and Then included it as usual and tested it on real device and it worked offline . No more white screen online or offline. However , I couldn’t find a mobile with older android version around to test it further. here is a copy of the polyfill src for android 4.4.2 webview https://upload.run/ligjjg
Try it and let me know if there is any issues as I’m still testing this method . The current issue I found till now is content gets blurry sometimes .

Well, tried it, the white blank screen is disappear, but the program wasn’t run and some function inside my js isn’t run too.

[kobo2000]

@dvlwjoffice For me . I just used basic onsenui code ,but as I add my own logic to the app , performance and rendering problems show up. I think all all roads lead to using crosswalk . Even on android 5.1 , I see some minor performance issues . However , In showcase section in this forum and on monaca website , There are some apps less than 10MB in size and claim to work on older versions of android -even less than 4.0- . They don’t use crosswalk as it adds 20MB to the apk away from apk assets. I wonder How could they achieve this? I tested some of these apps on various android mobiles and versions and they worked well. Since crosswalk latest release is still recent , everything is ok . But in the future , there may be issues come up as it’s not maintained anymore.

[dvlwjoffice]

@kobo2000 yeah i wondering about the same thing too. Well, i think i will redesign or make a new version of my apps for android kitkat . Btw, give me a shot if you got some new info about that “small size apk but work almost in all platform”. :D