Sencha Touch example app doesn't work in full screen on Android?

Question

RE: the Sencha Kitchen Sink example, available here: http://cdn.sencha.io/touch/sencha-touch-2.2.0/examples/kitchensink/index.html

On my iPhone, if I open the kitchen sink example in Safari, Add To Home Screen, then press the new 'Kitchen Sink' home screen icon, a Sencha logo appears before the web app appears, filling the full screen. No address bar and no browser controls at the bottom.

I cannot seem to replicate this on Android.

The Android tablet I have is running 4.1.1, tested with both the default browser and Chrome 28. The process I have tried is to add a bookmark, then go to bookmarks, press and hold on the bookmark and choose add shortcut to home. When I press the the home screen icon, the actual icon itself appears correctly (a picture of a blue sink) but pressing it just opens the normal web site in the browser tab.

Q1: Why is there this variation between Android devices, that seemingly have the same browser and OS version... is it that this is an Apple feature that just works by accident on some Android devices, or is it an issue with Sencha?

Q2: Does the kitchen sink app work in full screen on Android for anyone else, and if so how could I get it working on my device?

NOTE: The real question is, naturally, I have my own Sencha Touch based web app that is fullscreen on iOS but not on Android, but as Sencha's own kitchen sink app doesn't work I feel it is better to look at that first. As such, if there are any code hacks I could make that wouldn't break Sencha, but would enable fullscreen to work, they would be desirable too.

Previous research:

There is a similar question here, but this doesn't make any sense to me: can not full screen panel on android device use sencha touch 2.0 RC

This question and answer seems to suggest that Sencha apps fullscreen on Android are definitely possible: how to fullscreen a Sencha Touch 2 page on a WebKit browser?

There is a thread here, but it seems to come to an end without any clear resolution?? http://www.sencha.com/forum/showthread.php?179678-None-of-the-example-apps-are-full-screen-anymore

This seems to suggest it was previously broken but is now fixed: http://www.sencha.com/forum/showthread.php?176479-PR4-fullscreen-isn-t-full-screen-on-Android

This seems to suggest I might need to hack my own code, but I have tested the O'Reilly example on Android and it behaves the same as the kitchen sink example, it still doesn't show in fullscreen: http://www.sencha.com/forum/showthread.php?192525-SOme-issues-Android-address-bar-Offline-mode

UPDATE: A colleague tested it out on a Galaxy S and it works full screen on that device. It was running an older version of Android than the tablet.

UPDATE 2: After further testing, it only works on 1/5 devices so far.

There is a discussion here but it is not clear whether Sencha recognises it as a bug, it would be good to know what the official line is: http://www.sencha.com/forum/showthread.php?117851-Hiding-address-bar-on-Android

There are some Javascript workarounds, which I can investigate, but again, shouldn't this work out of the box with Sencha? http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/

UPDATE 3: Tested some JavaScript hackery. The solution here: https://stackoverflow.com/a/4203871/1061602 doesn't work, even if the page is fully of content (so is scrollable) - I think this is because the entire viewport isn't scrollable, just the panel within it.

The solution here: https://stackoverflow.com/a/9100406/1061602 also doesn't work with Sencha Touch, it seems to hide the bottom navbar. There may be a way around this but I haven't investigated yet

UPDATE 4: Followed the article: http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ and tried implementing this gist: https://gist.github.com/yckart/5609969 - still no joy

Answer 1

Unfortunately I haven't had any responses, on the Sencha Forum as well, that fully answer this question.

autoMaximize is set to false by default: http://docs.sencha.com/touch/2.0.2/#!/api/Ext.viewport.Default-cfg-autoMaximize

autoMaximize : Boolean Whether or not to always automatically maximize the viewport on first load and all subsequent orientation changes.

This is set to false by default for a number of reasons:

Orientation change performance is drastically reduced when this is enabled, on all devices. On some devices (mostly Android) this can sometimes cause issues when the default browser zoom setting is changed. When wrapping your phone in a native shell, you may get a blank screen. When bookmarked to the homescreen (iOS), you may get a blank screen. Defaults to: false

Available since: 2.0.0

It looks like (from the comments here: https://stackoverflow.com/a/10318762/1061602) and elsewhere on the Sencha Forum, that the autoMaximize feature is not fully supported anyway due to these related issues.

I've gone down a different route, as a workaround, one which is not brilliant for the user, but which is at least predictable.

For iOS devices, the Sencha autoMaximise setting works fine, it adds the required <meta> tags to make the web site work as a web app.

For Android devices, the workaround is to install the Dolphin browser: https://play.google.com/store/apps/details?id=mobi.mgeek.TunnyBrowser&hl=en which has a full screen add on. From here I can add a bookmark on the home screen and it will launch in full screen. NOTE: if you enable the full screen add on while on the Sencha site itself, it doesn't work properly for me, the nav bar is rendered part way up the screen. If you enable the full screen add on on another site then navigate to the Sencha site, it works.

Before this, I tried Firefox (which has a full screen add on, but Sencha Touch just doesn't work on Firefox) and a another full screen browser (https://play.google.com/store/apps/details?id=com.browser.sogood.ui&hl=en, this is just a little bit scruffy, and no way of making a home screen shortcut). Chrome Beta and Chrome 28 have full screen on scrolling but currently no support for extensions or a full screen setting. I understand that the default Android browser also has a full screen option under tabs in 4.3 upwards but I am stuck on 4.1.1 at the moment, the default Android browser may be the best choice when purchasing hardware in the future.

UPDATE

Brief update as this has had a lot of views, I can confirm that Chrome Beta on Android can now satisfy the full screen requirement, so Dolphin wouldn't be required.