Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-2252 in a recent build.
  1. #1
    Touch Premium Member
    Join Date
    May 2009
    Posts
    29
    Vote Rating
    0
    rolfdaddy is on a distinguished road

      0  

    Default NavigationView demo breaks while loading inside native Facebook app on iOS

    NavigationView demo breaks while loading inside native Facebook app on iOS


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    We can take a look at it to see if there is anything we can do.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Touch Premium Member
    Join Date
    May 2009
    Posts
    29
    Vote Rating
    0
    rolfdaddy is on a distinguished road

      0  

    Default More details regarding other demos

    More details regarding other demos


    Here are some more details I found out while testing:
    1. 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.
    2. The KitchenSink and standalone NestedList demos break as well when opened inside Facebook, probably because they use NavigationView.
    3. 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.
    Last edited by rolfdaddy; 25 Feb 2012 at 10:19 AM. Reason: added iPad repro as well

  4. #4
    Touch Premium Member
    Join Date
    May 2009
    Posts
    29
    Vote Rating
    0
    rolfdaddy is on a distinguished road

      0  

    Default The User Agent was not reporting as Safari!

    The User Agent was not reporting as Safari!


    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.

  5. #5
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Damn. You, sir, are a legend.

    Looking into this now. It'll be fixed for 2.0.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  6. #6
    Sencha User
    Join Date
    Jun 2012
    Posts
    5
    Vote Rating
    1
    Jmtrimble is on a distinguished road

      0  

    Default The kitchensink demo still doesn't work from within Facebook Native app

    The kitchensink demo still doesn't work from within Facebook Native app


    Does anyone know if there's a workaround to get a Sencha web app url to pull up in Safari instead of within the Facebook Native app's frames?