I'm very new to Cordova, so it may be that I don't fully understand its purpose. Let me start with what I'm trying to achieve overall.
We have an asp.net website that has mobile support, that I'm basically just trying to wrap with an iPhone app. The site of course runs on an IIS server, so I just want a thin wrapper to launch the site, and remove the address bar, navigation, etc. It's my understanding that you can achieve that with the Cordova hybrid approach.
I followed the tutorial, and got the site to launch within an xCode iPhone Simulator, and it came up just like I wanted to.
The problem I'm having is that hyperlinks within the site launch the target page in a Safari browser. And from all of my googling, it seems like this is the opposite problem most people have. It seems like most people struggle with external sites opening within the app, which basically locks them out of their app. I'm just trying to go from Page1 to Page2 on my own site within the app.
I was able to reproduce this problem with the simplest of sites, so I'll post the relevant bits. In this example, clicking on "Page 2" will open up in Safari.
Asp.net site:
Page1.html
<html>
Page 2
</html>
Page2.html
<html>
Page 2
</html>
Cordova:
Index.html
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
</head>
<body>
Cordova site
</body>
<script>
window.location = "http://192.168.1.157:8081/Page1.html";
</script>
</html>
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="vsisolutions.testsite" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Test Site</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="http://192.168.1.157:8081/*" />
<allow-navigation href="*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="ios" spec="~4.1.1" />
<plugin name="com.msopentech.authdialog" spec="~0.1.6" />
</widget>
Thanks for the help!
This was a bug
It was fixed on latest released version of cordova-ios 4.2.0
So you don't have to do any hack to make it work anymore, just have to use the allow-navigation tag to set the urls you want to allow to navigate inside the app, and the rest of them will open in safari as you have allow-intent set for all http and https urls.
I found that in Cordova the WKWebView plugin (it could be occurring in the UIWebView as well) asks around for any other plugins to see if they can use URL on the link. This was being picked up by the CDVIntentAndNavigationFilter and running through the logic as in:
- (BOOL)shouldOverrideLoadWithRequest:(NSURLRequest*)request navigationType: (UIWebViewNavigationType)navigationType
{
NSURL* url = [request URL];
switch (navigationType) {
case UIWebViewNavigationTypeLinkClicked:
// Note that the rejection strings will *only* print if
// it's a link click (and url is not whitelisted by <allow-*>)
if ([self.allowIntentsWhitelist URLIsAllowed:url]) {
// the url *is* in a <allow-intent> tag, push to the system
[[UIApplication sharedApplication] openURL:url];
return NO;
}
// fall through, to check whether you can load this in the webview
default:
// check whether we can internally navigate to this url
return ([self.allowNavigationsWhitelist URLIsAllowed:url]);
}
}
Because the navigationType == UIWebViewNavigationTypeLinkClicked it was passing it off to the browser via [[UIApplication sharedApplication] openURL:url];
Currently I have only found a hack around this and that is to override this logic by treating links in the same way i.e. like so:
switch (navigationType) {
case UIWebViewNavigationTypeLinkClicked:
// Note that the rejection strings will *only* print if
// it's a link click (and url is not whitelisted by <allow-*>)
if ([self.allowIntentsWhitelist URLIsAllowed:url]) {
// the url *is* in a <allow-intent> tag, push to the system
// [[UIApplication sharedApplication] openURL:url];
return YES;
}
// fall through, to check whether you can load this in the webview
default:
// check whether we can internally navigate to this url
return ([self.allowNavigationsWhitelist URLIsAllowed:url]);
}
}
This is obviously not ideal and I'll ask around on the Cordova forum for a better solution which I'll post here once I find it.
Page 2
This should work.
Just changing allow-navigation to append with * worked:
<allow-navigation href="http://yourwebsite/*" />
Related
We are developing Facebook AppLinks for Android.
We followed all the directives from Facebook Developer page:
https://developers.facebook.com/docs/applinks/add-to-content
https://developers.facebook.com/docs/applinks/android
In our Web page (the target url) we define the metas:
<meta property="al:android:url" content="mySchema://?id=3643020" />
<meta property="al:android:app_name" content="myAppName" />
<meta property="al:android:package" content="com.my.package" />
<meta property="al:android:class" content="com.my.package.screens.BrowseableActivity"/>
inside the tag.
For the Schema, we also tried with this one:
<meta property="al:android:url" content="mySchema://id=3643020" />
(without the ? character)
In our Android App, in the Manifest for the BrowseableActivity we define:
<activity android:name=".screens.BrowseableActivity"
android:theme="#style/Theme.myAppName.myTheme" >
<intent-filter>
<action android:name="com.my.package.screens.BrowseableActivity" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="mySchema"/>
</intent-filter>
</activity>
When we test:
We share from our App a link to Facebook, where the "link" property is the 'target url' that has the metas.
That is ok.
Inside the Facebook Android App (version 18.0.0.24.14) we see the post shared in the previous step.
We click on the post, and our App is open!
Everything is ok until here.
OUR PROBLEM:
According to Facebook documentation in the Intent that opens our "BrowseableActivity", the 'data' field
should have the following information:
data: "mySchema://id=3643020?target_url=http%3A%2F%2Fwww.ourtargeturl.com%2Fdirectory"
this is: the Schema (Uri or Android Url) and the Target_url
But for us, we only got this:
data: "http%3A%2F%2Fwww.ourtargeturl.com%2Fdirectory"
We only got the target_url.
In this page of Facebook ( https://developers.facebook.com/docs/applinks/android ) they said that
if you don't receive 'the Schema' if because you don't define the meta "al:android:url" in the
target_url. But, we define it.
Also, in the others fields of the Intent, (the extras x example) we don't see 'the Schema' information.
And that info is what we need, and we don't know what else to try.
Thanks,
Don't specify the class name. If you specify the class name, it will use the package name/class name combination to create an intent with a componentName that directly addresses your app/activity. What goes in the "data" field is actually undefined at that point.
If you skip specifying the al:android:class property, then it will use your custom url.
I want to embed my flash video player on facebook so that when people share my videos on facebook, it will let them play the video on Facebook.
I saw some posts here on stackoverflow about this topic and that a whitelisting wouldn't be required anymore, but i can't find any informations about it beyond December 2013.
Is it still possible? If yes, does it require a whitelisting?
You want your SWF file in a Facebook post like this: Example?
note: Facebook will only display SWF files that are hosted from an HTTPS server. If you can do that part then read on..
1) You need to have an HTML page on your site that is then posted as a link on your Facebook status. It's from the meta tags contained in that linked page that Facebook will read and load the SWF data.
2) Put the meta tags somewhere within the < head > .... < / head > section of your page's HTML.
(note: To make the above example work I had used old style embedding back then but you can try the newer OG tags. Good Reference). Below is an example for your own html (SWF goes in "video_src")
< head >
<meta name="title" content="My Video SWF inside FBook" />
<meta name="description" content="Just a test for embedding SWF in a status" />
<meta name="medium" content="video" />
<link rel="image_src" href="https://website.com/files/test_Thumbnail.jpg"/>
<link rel="video_src" href="https://website.com/files/test_VideoPlayer.swf"/>
<meta name="video_width" content="504" />
<meta name="video_height" content="283" />
<meta name="video_type" content="application/x-shockwave-flash"/>
< /head >
3) Currently the maximum Width is 504 and Height is 283. Check this page for updates whenever Facebook changes its mind about those settings.
You can check how Facebook will "parse" your html link using their Debugger Tool. Just paste your html page link as you would in a wall post and it will show a live preview.
UPDATE: For HTML5 Video (note: I havent tried this part myself but just my understanding..)
Assuming you've gone with OG: tags then you can just put multiple OG:Video links (first one should be Flash followed by fallback to HTML5 which should be the direct link to video file).
I cant confirm this now but.. Don't be surprised if the HTML5 video file is played by a system player (in a pop-up window?) and not with your own custom-design JS/CSS interface.
<meta property="og:video" content="https://website.com/files/test_VideoPlayer.swf" />
<meta property="og:video:secure_url" content="https://server.com/files/test_VideoPlayer.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
followed by... (for non-Flash)
<meta property="og:video" content="http://website.com/files/Video.mp4" />
<meta property="og:video:secure_url" content="https://server.com/files/Video.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="500" />
<meta property="og:video:height" content="280" />
I have a problem whenever I try to click my share button for the first time...
It's not seeing my og:image, but it's seeing my site logo instead.
See: http://d.pr/i/NIQZ
But for the second share and/or second attempt of clicking the share icon again, it begins to load the correct og:image or rather the thumbnail.
Proof: http://d.pr/i/vWAg
Here are my meta tags:
<meta property="og:image" content="http://stmaws.s3.amazonaws.com/thumbs/53184e19fd3401484600109b.jpg?AWSAccessKeyId=AKIAJQPNZH4P5E5ZY4LQ&Expires=1394388088&Signature=QTgflfyCzyIXVB%2BrMn2hBRw6srM%3D" />
<meta property="og:image:secure_url" content="https://stmaws.s3.amazonaws.com/thumbs/http://stmaws.s3.amazonaws.com/thumbs/53184e19fd3401484600109b.jpg?AWSAccessKeyId=AKIAJQPNZH4P5E5ZY4LQ&Expires=1394388088&Signature=QTgflfyCzyIXVB%2BrMn2hBRw6srM%3D.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:title" content="Check out what I made on Muserk.com" />
<meta property="og:site_name" content="Check out what I made on Muserk.com" />
<meta property="og:description" content="Muserk.com gives you the ability to legally add music to your videos and share them with the world!" />
<meta property="og:url" content="http://www.muserk.com/video/index/531a092efd3401725c00067f" />
The url that I want to share is: http://www.muserk.com/video/index/531a092efd3401725c00067f
Facebook Debugger tool is showing response code 200 so I can't replicate this issue.
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.muserk.com%2Fvideo%2Findex%2F531a092efd3401725c00067f
Sharer link: https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.muserk.com%2Fvideo%2Findex%2F531a092efd3401725c00067f
PS: I cleared my browser cache like 5 times already and got no luck.
EDITS:
In my app that uses the sharer.php? way of catering share buttons, how can I implement the scrape=true paramater. Any ideas?
Tried to add the parameter to my sharer link but didn't work
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.muserk.com%2Fvideo%2Findex%2F531a092efd3401725c00067f&scrape=true
I've been trying for the past couple days to get a small swf game working via a feed post to my wall (per the instructions at the Facebook Developers site). So far, I've had no success, despite having everything appear correctly in the OG Debugger. The metadata I'm using to generate the feed post is the following:
<head prefix="og: http://ogp.me/ns fb: http://ogp.me/ns/fb">
<meta property="fb:app_id" content="157726317622339" />
<meta property="og:type" content="game" />
<meta property="og:url" content="http://devapplatform.com:3557/site/feed_game/" />
<meta property="og:title" content="It Or Miss Mini Game" />
<meta property="og:description" content="Sebastian submitted to It or Miss, Come vote for them here!" />
<meta property="og:image" content="http://devapplatform.com:3558/images/catSurprise.jpg" />
<meta property="og:video" content="http://devapplatform.com:3558/images/catTest.swf" />
<meta property="og:video:width" content="398" />
<meta property="og:video:height" content="299" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
</head>
This code is stored on the following web page:
http://devapplatform.com:3557/site/feed_game/
If you want to test this code to see exactly what it's posting, you can simply launch my test app (make sure HTTPS is turned off for your account - I can't have HTTPS enabled on this app due to technical limitations of my environment. Rest assured HTTPS IS enabled on the production version of this app). The feed dialog should appear immediately after launch, during the loading process:
http://apps.facebook.com/itgirlsb/
DISCLAIMER: These links aren't guaranteed to always be available, due to them being hosted on a local test environment which gets powered off in the evenings PSD.
I can't see page or the image / SWF to test, but try these:
Your images should be at least 90x90px, otherwise we won't show the image, so there's nothing to click. Ideally make them 200x200px or more.
If you want the embed to work for anyone who is using secure browsing (https://www.facebook.com) then you need to host your SWF on a secure host. If it's on an http host, we can only embed it for users who have secure browsing disabled; otherwise the browser would throw mixed content warnings.
I'm sorry to come back to this topic again, but i'm really frustrated!! I've read every resource i've found, googling around the web, but i couldn't come up with a definitive answer to my problem.
Problem description
I'm creating an iphone app with phonegap 1.0. In this app, one tab is dedicated to a rss feed from my youtube channel and i want my users to be able to play these videos, after clicking on a specific entry.
Question: is it possible? best solution would be to play the video inside the app, but displaying a thumbnail image and redirecting the user to native youtube app is also acceptable (even though in this case i want the control back to the original app when youtube finishes to play the video).
Tried solutions
Searching on the web I found several solutions and people say that these solutions work for them, but none of them work for me!
use an "object" tag, i end up with a white screen
<object id="video" width="296" height="100%" data="http://www.youtube.com/v/gDjb9RVMF4c" type="application/x-shockwave-flash">
<param name="allowfullscreen" value="true" />
<param name="src" value="http://www.youtube.com/v/gDjb9RVMF4c" />
</object>
using an "embed" tag, i end up with a white screen
<embed src="http://www.youtube.com/v/gDjb9RVMF4c" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="280" height="100%"></embed>
i also tried a "video" tag, but as far as i understood, this is still not possible.
I'm really sorry if i missed a solution already written somewhere, but trust me ... i did my homework before askying :-)
Thx!!
Here is a nice tutorial Which Saved my Day
http://eisabainyo.net/weblog/2012/01/24/embed-a-youtube-video-iframe-in-phonegap-app/
Also i m posting some codes For a quick Access.
<html>
<head>
<title>YouTube video</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="phonegap-1.2.0.js"></script>
</head>
<body>
<iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Then make the following changes in Phonegap.plist
MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
*.youtube.com
*.ytimg.com
Video will play on your Simulator Also.
Apart from using <iframe> ... </iframe> you also need to set the property OpenAllWhitelistURLsInWebView to YES in your PhoneGap.plist. This would show and play the video inside the PhoneGap application itself. It is tried and tested.
You could try embedding the YouTube video as an iframe, I believe that is the recommended way to do it now:
http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
<iframe src="http://www.youtube.com/embed/VIDEO_ID" class="youtube-player" type="text/html" width="640" height="385" frameborder="0">
</iframe>
Here is a component I've end up using in my app. Done with a help of YouTube iFrame API.