NavigationView demo breaks while loading inside native Facebook app on iOS

**rolfdaddy** · 25 Feb 2012 8:00 AM

REQUIRED INFORMATION

Ext version tested:

Sencha Touch RC1

Browser versions tested against:

iOS 5, Facebook Native application (latest version)

DOCTYPE tested against:

n/a

Description:

The NavigationView demo breaks due to an "Undefined is not an object" error, when rendered inside the Facebook native application in iOS, although it works fine in ordinary Mobile Safari, Chrome, and all other browsers I have tried. While I assume the Facebook native app uses a Safari instance under the covers, it does appear to behave differently. This could impact any Sencha Touch app that gets clicked on from inside the Facebook app.

Steps to reproduce the problem:

Log into Facebook and post a link to the NavigationView demo (http://docs.sencha.com/touch/2-0/tou...iew/index.html) somewhere on Facebook, such as sharing it in status update or posting it to a page.
Launch the Facebook native app on iOS, such as an iPhone
Click the link you posted

The result that was expected:

NavigationView demo behaves as expected; you click a person's name and can see the map of their location

The result that occurs instead:

Upon clicking a name, nothing happens. A JS error "Undefined is not an object" is being thrown silently.

Test Case:

NavigationView demo repros this as-is, but I added a bit of debugging info below:

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>Address Book</title>

        <!-- Google Maps API -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

        <!-- Sencha Touch -->
        <script type="text/javascript" src="../../builds/sencha-touch-all.js"></script>

        <!-- Application -->
        <link rel="stylesheet" href="resources/css/example.css" type="text/css" />
        
        
        <script type="text/javascript">
        
            // This is the index.html from the RC1 NavigationView demo.  
            
            // I added this handler so you can see an error is being thrown
            function genericOnError(handler) {
                // Chrome, Firefox and IE implement onerror,
                // and it will one day be standardized...
                window.onerror = function (message, url, line) {
                    handler("Error std: " + message + " " + url + ":" + line);
                    // Note, don't return a value since Chrome/Firefox don't agree
                    // on true/false meaning. A no-return triggers the correct
                    // behavior in both (print error to console).
                }

                // Safari 5 and Opera 11 doesn't implement onerror,
                // so intercept the undocumented Error function
                if (RegExp("Safari|Opera").test(navigator.userAgent)
                  && !RegExp("Chrome").test(navigator.userAgent)) {
                    var originalError = window.Error;
                    window.Error = function () {
                        if (arguments.length > 0) handler("Error: " + arguments[0]);
                        return originalError.apply(this, arguments);
                    }
                }
            }
            genericOnError(function (m) { alert(m); });    
            
            // This was just added to prevent the Facebook browser from caching app.js, made debugging easier
            document.writeln('<sc' + 'ript type="text/javascript" src="app.js?' + Math.random(10000) + '"></scr' + 'ipt>');
        </script>
    </head>

    <body></body>
</html>

HELPFUL INFORMATION

Screenshot or Video:

n/a

See this URL for live test case: This link has the onerror code shown above: http://www.tillertowardstrouble.com/...iew/index.html

I posted it to the Wall of a test Fan Page so you can see it: http://www.facebook.com/#!/pages/Donkey-Jack/154011037948075

Debugging already done:

I think the problem is in the NavigationView.push() method. In my own application I have intermittently seen the "Undefined is not an object" error get thrown in mobile Safari if I have the debugging output turned on for my iPhone. I haven't tested other RC1 demos; perhaps this is more general and related to the Ext.Loader() instead.

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

iOS 5, native Facebook app, latest version

**mitchellsimoens** · 25 Feb 2012 8:56 AM

We can take a look at it to see if there is anything we can do.

**rolfdaddy** · 25 Feb 2012 10:13 AM

Here are some more details I found out while testing:

The Ext.Loader doesn't look like the culprit. If I disable Ext.Loader() and concatenate all the NavigationView JS into a single file and load that, I get the same error.
The KitchenSink and standalone NestedList demos break as well when opened inside Facebook, probably because they use NavigationView.
Interestingly, the List demo breaks, but in a different way, if you link to it: http://docs.sencha.com/touch/2-0/tou...ist/index.html. After you click the Disclosure button, the dialog comes up, but when you OK out of it, the screen remains masked (it does not remain masked in ordinary mobile Safari). This points to a larger issue (perhaps related to eventing?) than just the NavigationView.push(). If you'd like I can open a separate bug for this.

Also, all the above info applies to the iPad Facebook app as well as iPhone.

**rolfdaddy** · 25 Feb 2012 5:39 PM

The problem, after much painful debugging, is that the user agent for the browser inside the Facebook native app doesn't match the string expected for mobile Safari.

In particular on my iPad, the user agent comes back as:

"Mozilla/5.0 (iPad; U; CPU iPhone OS 4_3_3 like Mac OS X; en_US) AppleWebKit (KHTML, like Gecko) Mobile [FBAN/FBForIPhone;FBAV/4.1;FBBV/4100.0;FBDV/iPad2,1;FBMD/iPad;FBSN/iPhone OS;FBSV/4.3.3;FBSS/1; FBCR/;FBID/tablet;FBLC/en_US;FBSF/1.0]"

While mobile Safari is:

"Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"

My iPhone had a similar [FB...] string to the iPad, but was not exactly the same (version numbers were different as may be expected).

I was able to temporarily hack in this user agent in the constructor for Ext.env.Browser as:

Code:

...

        if (userAgent.match(/FB/))
        {
            userAgent = "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5";
        }
        
        var statics = this.statics(),
            browserMatch = userAgent.match(new RegExp('((?:' + Ext.Object.getValues(statics.browserPrefixes).join(')|(?:') + '))([\\w\\._]+)')),
            engineMatch = userAgent.match(new RegExp('((?:' + Ext.Object.getValues(statics.enginePrefixes).join(')|(?:') + '))([\\w\\._]+)')),
            browserNames = statics.browserNames,
            browserName = browserNames.other,
            engineNames = statics.engineNames,
            engineName = engineNames.other,
            browserVersion = '',
            engineVersion = '',
            isWebView = false,
            is, i, name;
            
            ...

Please try to get a fix for this in for the final 2.0 release.

**rdougan** · 27 Feb 2012 2:13 PM

Damn. You, sir, are a legend.

Looking into this now. It'll be fixed for 2.0.

NavigationView demo breaks while loading inside native Facebook app on iOS

Thread Tools

Search Thread

Display

NavigationView demo breaks while loading inside native Facebook app on iOS

NavigationView demo breaks while loading inside native Facebook app on iOS

More details regarding other demos

More details regarding other demos

The User Agent was not reporting as Safari!

The User Agent was not reporting as Safari!

Tags for this Thread