Embedded Timelines in a PhoneGap application

[weisjohn]

I’m working on a PhoneGap application and want to embed a timeline, however, the URL whitelist scheme doesn’t support a file:// protocol scheme.

I’ve whitelisted jsbin.com and johnweis.com for this widget:

It works here on jsbin.com: http://jsbin.com/irazoc/2 . It works here on johnweis.com http://johnweis.com/static/foo.html and it also works here on johnweis.com using an iframe to jsbin.com http://johnweis.com/static/foo2.html

However, I can’t ever seem to make it work in PhoneGap.

The iframe loads, but the widget code never executes.

Any ideas?

[episod]

Embedded Timelines are only meant to be placed on more traditional websites at this time. You probably won’t be able to get them to work for alternate web-based environments like this.

[atrgdomain]

I know this is old, but I can’t find any other info.

There are a lot of PhoneGap applications out there. There has to be a solution to the whitelist issue as far as PhoneGap. What is the actual domain that is being compared against the whitelist? What if I hosted the widget javascript that gets created for me in a file on a webserver and whitelisted that server’s domain? If that doesn’t work (probably not), could I host an HTML file on the whitelisted webserver that includes the widget and then load that html into my PhoneGap/Cordova HTML page?

[benward]

Hi Randy, and John.

We’ve made some changes to the domain stuff, and you should be able to render a timeline in any browser-like context now. For the sake of the configuration form, just enter your homepage domain for now.

Ben

[weisjohn]

Ben, thanks for the notice about this! I’ll be using an embedded timeline next time instead of recreating it on my own Thanks!

[atrgdomain]

Ben,

Thanks for the response!

Can you give some more details? There isn’t a “homepage domain” within PhoneGap. We’re basically just opening a local HTML file on the mobile device, but I don’t think localhost will work on a phone. Are you suggesting that the whitelist doesn’t really matter in this context and it will render anyway, or something else? I’m handing this app off to the client, so I need to know what will work going forward.

[benward]

As of about 5 minutes ago, the domain list user interface is no-longer part of the widget set-up. You should now be able to create your widget without having to make up a dummy domain

[atrgdomain]

Nevermind… it wasn’t working because I was using the protocol-less load of the widgets.js file that the Widgets Configurator gave me. That was translating to a file: protocol since this is a local file in PhoneGap. I changed it to https and the widget loaded perfectly.

So I noticed the domain configuration has been completely removed from the configuration form, but the documentation (https://dev.twitter.com/docs/embedded-timelines) still mentions it. How has the whitelist been implemented now? Anything I should know?

Thanks!

P.S.- Sorry for hijacking your discussion a bit, John, but hopefully this will help you and others.

[weisjohn]

@BenWard thanks for this. Very happy to see Twitter being proactive!

@atrgdomain no worries, not hijacked at all…

[xtianpaiva]

widget still not working within cordova/phonegap 2.5, any suggestion?

[mvarti]

widget works for me with cordova/phonegap 2.5 on android, but not on windows phone. I have the http:// protocol specified in twitter js script and it’s not an issue with phonegap whitelisting because I have everything allowed.

So far haven’t got a clue what’s the issue.

[OhHowSuper]

I’m having the same issue,

Works fine on Android, but IOS is a no go…

I wonder why?

[mvarti]

After further experiments twitter widget works on WP8 but not on WP7 phonegap. I can only assume it’s something about Phonegap and/or browser component which it’s using.

[benward]

Hi Mikko,

Out of interest are you working with Windows Phone 7, or 7.5? There’s a fairly significant Internet Explorer update between the two (IE6-ish, to IE9.) I don’t have a test device handy, but IE9 should work.

Ben

[mvarti]

Good point. This is actually WP7.5, I always forget the difference.

Problem occurs when Windows Phone browser engine in Phonegap is running in IE9 “mode”. I say mode because if I install phonegap application built for WP7.5 on WP8 phone, IE runs in IE9 mode, even if there is also IE10 engine in WP8. Phonegap built for WP8 uses IE10 engine.

Everything works when I use normal IE9 browser on WP7.5. It works somehow differently in Phonegap.

[mvarti]

Here is the only debug information I can dig out with jsconsole

http://platform.twitter.com/widgets.js?=1365597411963:34
Unable to get property ‘doc’ of undefined or null reference
http://platform.twitter.com/widgets.js?=1365597411963:27
Unspecified error.
http://platform.twitter.com/widgets.js?_=1365597411963:27
Unspecified error.

[benward]

Thanks Mikko. The doc variable is related to the iframe wrapper that we put around the timeline content. Could be that it’s initializing slowly in the mobile environment.

I’ll try and have a look into this—although there’s a big list of things to do this week, so I can’t promise if or how soon I’ll be able to figure out a solution for you here.

Pending that, worth checking if there are any security settings on the IE webview that might concern nested frames—I don’t know what options you get there, sorry—and also you could maybe try initializing the timeline twice? It’s a bit of a long shot but maybe once the browser has initialized one iframe it would initialize a second frame faster…

Will see if I can figure out something more concrete! Thanks for the debug references.

[mvarti]

I noticed that trying to access document.domain in any way causes “Unspecified error.” Could this be related to the problem?

document.domain seems to be inaccessible only when we are in local phonegap page /app/www/index.html. Protocol is x-wmapp0: or x-wmapp1: (not file: as one would assume)

Also how would I try to initialize the timeline twice?

[benward]

Don’t worry about the initialize twice thing. The problem is definitely related to document.domain. That stuff is pretty intricate as it is—ensuring the frame can talk back to and bind events to the host—but we’ll see if we can figure out and guard where it’s causing errors in the PhoneGap environment.

[mvarti]

in pure WP8/Phonegap environment document.domain causes the same error. But when initializing twitter widget there are no errors reported… Strange stuff…