onsen ui Not for every Mobile

[memo]

I spent long days to create an application using onsen ui with with webview in android studio and I try my project on Mobile Samsung galaxy s4 (lolipop), but I am surprised by her experience on the Mobile galaxy mini s4 (jelly ben) and the whole thing is not in place and does not appear anything was very bad application. And Despaired me of the design of the application using hybrid apps framework :pensive:

[munsterlander]

@memo What was the resolution on the mini?

[memo]

@munsterlander i run my project on samsung galaxy min s4 and galaxy s2 And I found that it is not compatible with all browser setups

[munsterlander]

@memo Do you know what the screen resolution is on those devices? If something is not working layout wise, then a media query will need to be done.

[memo]

@munsterlander It is better to learn (C# with xamirin) if we were on the idea of creating a single code for multiple platforms instead of the loss of time in the hybrid languages because the hybrid languages is not compatible with all equipment and very weak

[munsterlander]

@memo Well, I would completely disagree regarding Xamarin. As a former Xamarin developer, I found their forms to be completely buggy and unreliable across platforms. Hybrid applications, while not for every situation, solve a good 95% of use cases in my experience. This is pretty evident when you just look at how every device you target has a web browser. So if it can be displayed there, then it will work there with the Onsen UI Framework.

For your specific situation, it would appear (from what I can tell), that you are targeting smaller device screens. I have asked several times now what resolution you are trying to target, i.e. 640x480, etc. Once you know that, we can help you with writing a media query that solves any layout issues you may be experiencing.

As far as functionality goes, as long as JavaScript runs on the target device, you are good.

[memo]

@munsterlander
This is the image device (galaxy s4 mini) when tested project. And the dimensions of 540 × 960 pixels and saw everything upside down and view funny …
But when i used on(galaxy s5) a 1080 × 1920 everything properly
I was ashamed in front of my friends when they tried to Their Mobile.
On Apple devices too many buttons did not work
Note: I used my project on webview in android studio and save it with apk file and dont using phonhap

[iriekun]

Hello, i’m having the same problem. It seems like onsen look well with iOS only. The view, style , and position on android look somehow terrible comparing to ios. Any suggestion?

[munsterlander]

@iriekun This is what confuses me as I develop for Android only and do not have these issues. What is not laying out correctly?

[noorazam]

@memo I have the same situation. My application is work on my Samsung J2 but not in S4 Mini.

Also S4 Mini showing this text -event there is a platform limit to iOS :
…
<ons-if platform=“ios other”>
<ons-toolbar-button component=“button/new-task”>New</ons-toolbar-button>
</ons-if>
…

[wetfeet]

OK. Here’s for the benefit of everyone why things may not work with Onsen UI, when it is OK on development desktop web browser and some newer Android devices, but not older Android devices.

The problem you may be facing may be due to your WebView. I faced a similar issue and started a thread too. For my Android 4.4.2 (KitKat) phone, the bundled WebView is based on Chrome 30 dating back to September/October 2013 when Android 4.4.2 was released. In comparison, the latest stable Chrome is already 58 or 59.

If you’re testing it on an old phone with Android version earlier than 4.4.4 (KitKat), you may run into trouble. Onsen UI may not initialize properly due to some scripting errors for these WebViews that do not support some newer features. I am not sure what that feature is, but could be due to Web Components, polyfill and what’s not.

Samsung Galaxy J2 (2015) is a newer phone that comes with Android 5.1.1 (Lollipop). Its WebView and Chrome can also be updated to the latest version. For this newer phone, it should run flawlessly without any trouble.

Samsung Galaxy S4 Mini (2013) is an older phone that ships with Android 4.2 (Jelly Bean) with a possible later firmware upgrade to Android 4.4.2 (KitKat). However, even with the latest upgrade to 4.4.2, it is still below the Android 4.4.4 (KitKat) required by Onsen UI to work properly. It is not possible to update the Chrome and WebView for these older Android devices.

What you may observe is during development on your desktop web browser (recent Chrome versions) using monaca preview, your app looks normal. You monaca debug on a newer Android device like Android 5.0, 6.0 or 7.0 it will look OK too.

However, the moment you monaca debug on an older 4.1-4.3 Jelly Bean or 4.4.2 KitKat device which still exists aplenty in the developing world like India, China and South America, what you may see for your app will be a white page with black text. All the formatting, styling, coloring and alignment will be off. So a beautifully styled app becomes an unformatted web page with jumbled text all over.

Finally, the conclusion is that Onsen UI does not support any older device below Android 4.4.4 and has no intention to do so in future. Your solution would be to bundle in a newer WebView from Crosswalk (also deprecated by Intel already), which would bloat your app into 20 MB package, not even counting in other Cordova plugins you may use which adds another few megabytes. To use the Crosswalk WebView:

cordova plugin add cordova-plugin-crosswalk-webview

Your Cordova project will in future output 2 apks: android-armv7-debug.apk and android-x86-debug.apk for different platform.

[wetfeet]

@memo said:

@munsterlander i run my project on samsung galaxy min s4 and galaxy s2 And I found that it is not compatible with all browser setups

Samsung Galaxy S4 Mini
Android 4.2.2 (Jelly Bean), upgradable to 4.4.2 (KitKat) - Not going to work :disappointed:

Samsung Galaxy S II
Android 2.3.4 (Gingerbread), 4.0.4 (Ice Cream Sandwich), upgradable to 4.1 (Jelly Bean) - Not going to work :disappointed:

[wetfeet]

@noorazam said:

@memo I have the same situation. My application is work on my Samsung J2 but not in S4 Mini.

Samsung Galaxy J2
Android 5.1.1 (Lollipop) - This is why it works :satisfied:

Samsung Galaxy S4 Mini
Android 4.2.2 (Jelly Bean), upgradable to 4.4.2 (KitKat) - Not going to work. :disappointed:

Also S4 Mini showing this text -event there is a platform limit to iOS :
…
<ons-if platform=“ios other”>
<ons-toolbar-button component=“button/new-task”>New</ons-toolbar-button>
</ons-if>
…

[wetfeet]

OK. After further research on Android KitKat and Chrome version history, together with my personal experience seeing the script errors, I have narrowed down the problem why it works with Android 4.4.4 but not 4.4.2 which is just a minor version jump.

For Android 4.4.2, it uses Chrome 30.
For Android 4.4.4, I see a variety of Chrome versions from 34 to 48 in use.

What does this mean, you may ask? This means that there is something new added after Chrome 30 and before or in Chrome 34 that is necessary for Onsen UI to work properly.

With this idea in mind, I dug further. True enough, Chrome 33.0.1750 added Custom Elements.

I also witnessed first hand JavaScript error in custom elements with web components/polyfill when doing remote debugging with Chrome with my Android 4.4.2 KitKat phone.

Hope this explains the problem why Onsen UI 2 does not work with Android earlier than 4.4.4 due to the bundled Chrome WebView version.

This custom elements support requirement may not apply for Onsen UI 1 though, but you will be stuck with only iOS style UI (no Material Design styling) should you choose to downgrade back to Onsen UI 1, which is also not a wise move if you are doing Android apps.

[Fran Diox]

@wetfeet Thanks for all the research. Indeed, all of it is related to Chrome version and Custom Elements, both v0 and v1. There is some more information about Chrome and CE versions in this PR. Perhaps @asial-matagawa has more input on this.

[wetfeet]

So I have a little time today, and I did a little experiment. My objective is to try if there’s a hack or workaround to get Onsen 2 to work on an old Android WebView (based off Chrome 30) on KitKat 4.4.2 by using polyfills.

For the impatient ones, I am only halfway successful. So you can stop reading now.

Using the navigator template (with AngularJS) as a test project, I grabbed the following polyfills from WebCOmponents and Babel:

<script src="lib/babel-polyfill/dist/polyfill.js"></script>
<script src="lib/webcomponents/webcomponents-lite.js"></script>
<script src="lib/webcomponents/custom-elements.min.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
console.log("WebComponentsReady");
    
    var head = document.getElementsByTagName('head')[0];
    
    var e = document.createElement('script');
    e.src = 'components/loader.js';
    head.appendChild(e);
    
    e = document.createElement('script');
    e.src = 'lib/angular/angular.min.js';
    head.appendChild(e);
    
    e = document.createElement('script');
    e.src = 'lib/onsenui/js/onsenui.min.js';
    head.appendChild(e);
    
    e = document.createElement('script');
    e.src = 'lib/onsenui/js/angular-onsenui.min.js';
    head.appendChild(e);

    // *** Still having problem trying to run ons.bootstrap(). ***
    // *** WebView complains 'ons' and 'angular' are undefined. ***
    ons.bootstrap()
      .controller('AppController', function() {
        this.pushes = 0;
        this.pops = 0;
      });
    ons.ready(function() {
        console.log("Onsen UI is ready!");
    });
});
</script>

ons and angular are reported as null. Wonder if there’s a way to wait/listen for some sort of event before trying to call ons.bootstrap().

As you can see, it manages to render the navbar and button nicely with material design. But angularjs data binding isn’t working and the bootstrap doesn’t work yet.

Will try again if I have any newer ideas.

[Fran Diox]

@wetfeet Thanks for testing it! There are some polyfills listed here that might be necessary instead of babel-polyfill (which I guess it’s quite big). Make sure you include all the polyfills before including onsenui.js and angular-onsenui.js in your index.html. Also, Onsen UI is including CustomElements v1 already so I believe you don’t need Web Components/ Custom Elements polyfills? I might be wrong, though.