[ST-2.1.0-RC2] iOS web apps get stuck on loading if require classes from "Ext.device"

[VladimirTechMan]

Important note: Actual iOS web apps are not likely to ever need requesting any classes from namespace Ext.device. But when developing Sencha Touch 2 apps to be packaged as iOS native apps, it is strongly required to be able to also run them as iOS web apps (in the full-screen mode and based on UIWebView) -- otherwise code changes in them will require to do native (re-)packaging and re-uploading to iOS devices (or simulator) much more often than it used to be, which seriously affects the developers productivity.

The above is regarding all those methods that have special implementations in Sencha Touch 2 to simulate their functionality (to some reasonable extent) in Mobile Safary or in web applications. For instance, those are:

• Ext.device.Camera.updateSamples()
  
• Ext.device.Camera.capture()
• Ext.device.Connection.getOnline()
• Ext.device.Contacts.getContacts()
• Ext.device.Device.openURL()
• Ext.device.Geolocation.getCurrentPosition()
• Ext.device.Geolocation.watchPosition()
• Ext.device.Geolocation.clearWatch()
• Ext.device.Notification.show()
• Ext.device.Notification.vibrate()

The documentation is also quite clear on declaring those simulation capabilities as officially available. For example, on Ext.device.Notification it says: "The Simulator implementation will use Ext.MessageBox for show and a simply animation when you call vibrate."

Description:

• iOS web apps get stuck on loading if they require classes from the Ext.device namespace
• No issue if running such apps inside Mobile Safari or as native (packaged) iOS apps
• The issue was introduced in Sencha Touch 2.1.0 RC2 (no such problem with RC1)

Ext version tested:

• Sencha Touch 2.1.0 RC2 (it has this issue)
• Sencha Touch 2.1.0 RC1 (no such issue)

Browser versions tested against:

• Mobile Safari and UIWebView (on iOS 6.0)

Steps to reproduce the problem:

• Create a new project "template" with 'sencha generate app'
• Open app.js in the project's directory and modify it to require, for example, 'Ext.device.Notification':

    requires: [
        'Ext.device.Notification',
        'Ext.MessageBox'
    ],

• Open the application in Mobile Safary (it will start just fine) and add it to the home screen as an iOS web app
• Start the web application from the iOS home screen

The result that was expected:

• The iOS web application starts (from the iOS home screen) just as good as it does inside Mobile Safary

The result that occurs instead:

• The iOS web application begins starting (loading), but its screen will never go beyond the "loading indicator" (flashing dots, by default)

Root cause and proposed fix:

• In Sencha Touch 2.1.0 RC2 the internal logic has been improved as follows:
  • The Ext.browser.is.WebView flag is now set not only when the app starts inside UIWebView and the app is packaged as a native iOS app, but also when it starts as an iOS web app (in which case it is still running inside UIWebView).
  • That is based on testing the User-Agent header value inside Ext.env.Browser.
• In RC2 the existing logic of the classes inside namespace Ext.device was not updated in sync with the aforementioned change. For example, the constructor of Ext.device.Device is implemented as follows:

    constructor: function() {
        var browserEnv = Ext.browser.is;

        if (browserEnv.WebView) {
            if (browserEnv.PhoneGap) {
                return Ext.create('Ext.device.device.PhoneGap');
            }
            else {
                return Ext.create('Ext.device.device.Sencha');
            }
        }
        else {
            return Ext.create('Ext.device.device.Simulator');
        }
    }

• In RC1 (and earlier versions) iOS web apps get some of the native-app capabilities "simulated" using the corresponding Simulator implementations (as in the sample code above). In RC2, as Ext.browser.is.WebView is set for a web app, the app will attempt loading the classes that use the underlying bridge to native iOS features. That bridge is only available for packaged native iOS apps. Thus web apps based on RC2 get stuck at the loading phase.

To fix the issue, the constructor logic in most of classes inside the Ext.device namespace needs to be reviewed and updated to additionally check the Ext.browser.is.Sencha flag for iOS native apps. Here is an example of such a fix for Ext.device.Device:

    constructor: function() {
        var browserEnv = Ext.browser.is;

        if (browserEnv.WebView) {
            if (browserEnv.PhoneGap) {
                return Ext.create('Ext.device.device.PhoneGap');
            }
            if (browserEnv.Sencha) {
                return Ext.create('Ext.device.device.Sencha');
            }
        }

        return Ext.create('Ext.device.device.Simulator');
    }

[mitchellsimoens]

Ext.device namespace is meant to be used within a packaged app. Have you tried in a packaged app?

[VladimirTechMan]

Hi Mitchell,

I think you might have missed the note in my original report above:

Important note: Actual iOS web apps are not likely to ever need requesting any classes from namespace Ext.device. But when developing Sencha Touch 2 apps to be packaged as iOS native apps, it is strongly required to be able to also run them as iOS web apps (in the full-screen mode and based on UIWebView) -- otherwise code changes in them will require to do native (re-)packaging and re-uploading to iOS devices (or simulator) much more often than it used to be, which seriously affects the developers productivity.

I hope that explains things. (Just in case, I have also moved this note at the top of my original report above, so that it's better visible.)

[VladimirTechMan]

Mitchell, I would truly appreciate if you or your colleagues could take another look at my original description (which I extended with some details so that it should be more clear now, I hope) and re-evaluate it.

[mitchellsimoens]

Thought I had seen a bug opened for this but couldn't find it so I have opened a bug in our bug tracker.

This is for the Device class to default on Simulator if WebView is true but not within Phonegap or Sencha packager (saved to homescreen)