I'm running into a pretty specific problem (2 problems, actually, but I believe they're related) and am hoping someone out there can shed some light on what's going on.
I have a Meteor application running inside an HTML overlay inside of an Adobe Digital Publishing Suite (DPS) article. I've tested this with as simple of a configuration as possible, and am able to reproduce the issue consistently.
1- Meteor works fine in Mobile Safari, and Mobile Chrome on an iPad (3rd gen, ios 6.1.7) but the rendering inside of an Adobe DPS article is generating an error:
TypeError: 'undefined' is not a function
While this error doesn't affect rendering, I believe it's related to my 2nd problem:
2- Upon redirect from facebook authentication (alt. / non-JSSDK flow) the page will not render at all, but there is no additional error message other than #1 above.
I'm Using an HTML overlay in an article, set up inside of InDesign and published to DPS using Folio Producer. The overlay is pointing to a test url (e.g. http://dmx.dod.fbchat.meteor.com), and is refreshed each time the specific page on the article is brought into view. The details of the browser are as follows:
appVersion: 5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329
userAgent: Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329
I do know that there are some restrictions on this browser (for example, alert = null;), and it's considered "headless" because it's not a legitimate version of chrome or safari, with no address bars, etc.
meteor create DPSFBRender)dmx.dod.fbchat.meteor.com)domain:
dmx.dod.fbchat.meteor.comredirect uri: http://dmx.dod.fbchat.meteor.com/
add the following two lines to the click event for the button inside your default meteor project js file:
var randID = Meteor.uuid();
window.location.href = 'https://www.facebook.com/dialog/oauth?client_id=[FB APP ID]&redirect_uri=[URL WHERE YOU'LL HOST TEST]&state='+randID+'&response_type=token&scope=[LIST OF PERMISSIONS];
So, for example, if my testing URL were dmx.dod.fbchat.meteor.com, my FB App ID were 514080555337856 and my list of permissions were lengthy (see below), my 2nd line would look like this:
var randID = Meteor.uuid();
window.location.href = 'https://www.facebook.com/dialog/oauth?client_id=514080555337856&redirect_uri=http://dmx.dod.fbchat.meteor.com/&state='+randID+'&response_type=token&scope=create_note,email,friends_about_me,friends_actions.books,friends_actions.music,friends_actions.news,friends_actions.video,friends_activities,friends_birthday,friends_education_history,friends_events,friends_games_activity,friends_groups,friends_hometown,friends_interests,friends_likes,friends_location,friends_notes,friends_photo_video_tags,friends_photos,friends_questions,friends_relationship_details,friends_relationships,friends_religion_politics,friends_status,friends_subscriptions,friends_videos,friends_website,friends_work_history,photo_upload,publish_actions,publish_stream,read_friendlists,read_mailbox,share_item,status_update,user_about_me,user_friends,user_groups,user_interests,user_photos,user_relationship_details,user_status,video_upload,xmpp_login';
deploy your meteor app to the test uri (e.g. meteor deploy dms.dod.fbchat.meteor.com)
point your html overlay inside your DPS article to your URL
deploy / publish your article, open it up inside DPS viewer on the iPad, and click on the button, to activate the redirect.
You'll be prompted to allow the FB app permissions, accept.
You'll be navigated back to your meteor url, but the page will not appear.
If you change article pages, go out of the article and back in, or just bring up your app bar, and then go back to the article, the page will refresh, and render.
As long as you have your permissions set (as long as you aren't prompted to accept), the page will render fine. It is only after the FB prompts from the custom login and the subsequent redirect that the page won't render.
If you want to test it again, log into your fb account in a regular browser, and delete the app.
I started debugging this, using debuggify, and that's when I was able to see the TypeError: 'undefined' is not a function error. It doesn't stop anything from rendering at first glance, but I believe on the redirect that it is the culprit (see thoughts section below).
This error will appear on ANY meteor page that is rendered inside a DPS overlay. It doesn't have to be a redirect, or have anything on it. You can simply create a new meteor project, deploy it, point an HTML overlay in DPS to it, and the error will appear (only noticeable with a remote debugging tool like debuggify).
Likewise, this error will not occur inside of the IOS safari mobile browser, or the chrome browser. The above-mentioned rendering problem after redirect from FB will also work as expected in both browsers (the page will render after the "accept permissions" screens).
The 'undefined'... error has no stack trace:
Stack: TypeError: 'undefined' is not a function at ? (http://dmx.dod.fbchat.meteor.com/:1:0)
..although we do know that it happens after the load event:
Happened: After onload
I'm thinking this may be a combination of the dynamic JS loading inherent in Meteor, combined with the redirect. Simply, the redirect isn't waiting long enough for the JS to load (especially handlebars) and it therefore isn't rendering.
I don't believe the entire page is shut down, because in my app (not the tests) I am harvesting the App Key inside the URL Hash, and successfully storing it. So, I know that Javascript isn't completely shut down on the page. It's just the rendering portion for some reason that is not working.
I believe the 'undefined' is not a function error is related - could be Jquery, Handlebars, DDP.... something isn't loaded when expected. On a normal page load (e.g. a refresh) the browser is overcoming this. On the redirect from FB, it isn't.
It may have to do with the JS/Browser restrictions for the embedded DPS browser. Adobe limits some functionality (for security and for performance reasons), and maybe they're turning something off that meteor needs to run.
Workarounds I've tried:
So, at this point, I'm open to anything, even if it's not solving this specific problem.
Workarounds, similar problems you've experienced, thoughts, speculation on why this may be happening on the redirect, but not normally, etc.
I know there may be several ways to skin this cat, but I'm stuck right now, and would love to hear some suggestions. I just need to get FB login to work, inside of DPS. I don't care how, even if all the code is client side (this is just a test, not a production system)
I've even considered trying to edit the accounts-facebook and accounts-base packages in meteor to recognize a headless browser, but don't even know where to start on that...
Also, the 'undefined'... error happens on every single meteor page inside a DPS article, no matter what. That's annoying, and may be useful for some mobile headless browser compatibility improvements, if someone has any idea why it's occurring.
Follow ups are welcome as well. I'll be monitoring this thread.
It turns out that Tom Coleman helped me find this specific problem.
When JS is minified, if there's a missing semicolon, it can wreak havoc, and cause the above-mentioned 'undefined' error.
So, after further testing, I've discovered that this is most likely inside of the Adobe-specific DPS Javascript that is loaded with every overlay.
I've filed a bug with Adobe and will see if/when it's fixed, if it fixes the rendering problem as well.