I need to implement a feature where I can open either a web page or the app from an email account.
For Example:
I have an app in which whenever I view any user's profile, the user receives an email. The mail contains a button "See Profile", the functionality for that button is whenever the button is tapped, it should open a mobile friendly site.
Now, my client requires that if the app is already installed, then tapping the button should open the associated app and it should navigate to the profile.
Also, if the user opens his email on a desktop, then a web site should be opened on tapping the button.
On mobile side, I think this could be done by URL scheme, but how to associate the same button for 2 different functionalities.
Instagram is already doing it.
Please help!
I came up with a simple solution but it needs your server help,
- Add a following html file in your server (update with your app urlscheme,itunes link & website url.)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Social Media Share</title>
<script>
function openProfile() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
{
window.location.href = "appurlscheme://;
setTimeout(function () {
window.location = "https://itunes.apple.com/us/app/yourApp/id593274564?ls=1&mt=8";}, 25);
}
else
{
window.location = "https://www.google.co.in/?gfe_rd=cr&ei=sLSuWM4B7MjwB-6LtagE"
}
}
</script>
</head>
<body onload="openProfile()"></body>
</html>
Let us assume http://dev46.com/testfile/ this is your html file url.Email you are sending will be a html page right, So while clicking See Profile hit the above url.
Above html code is straight forward,It checks whether user comes from iPhone,iPad or iPod if it so it tries to open you apps urlscheme if available otherwise it will open Appstore.
If it is not an iphone it will open your web site.
I had tested above method it's working fine,give it a try.
Related
Trying to login using yam.connect.loginButton, works fine on firefox and chrome but not on IE (I am using IE11). The response has an auth but no user object. Or sometimes the popup window doesn't close and the callback is never called. Code I used is below:
<html>
<head>
<script id="yammer-js-include" data-app-id="APP-CLIENT-ID-GOES-HERE" src="https://assets.yammer.com/assets/platform_js_sdk.js"></script>
</head>
<body>
<span id="yammer-login"></span>
<script>
yam.connect.loginButton('#yammer-login',
function (response) {
console.dir(response);
document.getElementById('yammer-login').innerHTML = 'user ' + (typeof response.user !== 'undefined' ? 'exists in response' : 'is missing!');
}
);
</script>
</body>
</html>
You mention that was the code you used, but did you replace the data-app-id with the one provided from your app on https://yammer.com/client_applications ?
Assuming yes, a lot of people run in to problems with IE and not having Yammer urls added to Trusted Sites in IE. If you can add more logs from your console output that it would help.
You can read more about what to include in your Trusted Sites here:
http://developer.yammer.com/connect/#IETrustedSites
When I add the host of where my app was running also in the Trusted Sites, it worked.
http://kendomen.wordpress.com/2014/11/06/yammer-authentication-with-javascript-and-yammer-sdk/
I need to know if a link will open.
See Maximilian Hoffmann's answer for a more robust solution.
An approach like this is common - hijack the timeout to redirect to a different URL. Would this approach work for you?
<a id="applink" href="comgooglemaps://?q=Red+Lobster+Billings">Show map</a>
<script type="text/javascript">
var backup = "http://maps.google.com/?q=Red+Lobster+Billings";
function applink(fail){
return function() {
var clickedAt = +new Date;
setTimeout(function(){
if (+new Date - clickedAt < 2000){
window.location = fail;
}
}, 500);
};
}
document.getElementById("applink").onclick = applink(backup);
</script>
The solution is adding an iframe with the URL scheme to your page. It silently fails if the app is not installed, so you need to check via a timer if opening the app worked or not.
// detect iOS
if (['iPhone', 'iPad'].indexOf(navigator.platform) > -1) {
// create iframe with an Apple URL scheme
var iframe = document.createElement('iframe');
iframe.src = 'twitter://';
// hide iframe visually
iframe.width = 0;
iframe.height = 0;
iframe.frameBorder = 0;
// get timestamp before trying to open the app
var beforeSwitch = Date.now();
// schedule check if app was opened
setTimeout(function() {
// if this is called after less than 30ms
if (Date.now() - beforeSwitch < 30) {
// do something as a fallback
}
});
// add iframe to trigger opening the app
document.body.appendChild(iframe);
// directly remove it again
iframe.parentNode.removeChild(iframe);
}
I wrote a post with a more detailed example that uses this approach to open the twitter app on iOS if installed.
There isn't a way for you to know if a link will work but there is for Safari with something called Smart App Banners
<!DOCTYPE html>
<html>
<head>
<meta name="Google Maps" content="app-id=585027354"/>
</head>
<body>
The content of the document......
</body>
</html>
What it basically does is checking if an app is installed. If it's not installed the user will be directed to the app store. If it's installed the user will be able to open the app from the website with the relevant data you'd be normally passing using the url scheme.
You could use if for Google Maps.
The down side of this is that it will only work on Safari but it's still better than nothing.
I'm using a "Bounce" web page that is linked from a text message to open my app. The "Bounce" web page essentiall does this:
<script type="text/javascript">
window.location.href = "appname://location";
</script>
and works great if the appname:// protocol scheme is registered. But if it is not, an error message is displayed to the user:
Cannot Open Page
Safari cannot open the page because the address is invalid
Any ideas on how to attempt to do this redirect, but not show an error if its not working?
There's only a hacky javascript method to make it 'work', the invalid popup will still appear but will shortly disappear if the app is not installed, and take them to a different url
document.location = "appname://location";
setTimeout(function(){
document.location = "http://google.com";
}, 50);
The new way to do this is apparently Universal Links
I think I've looked over 50 different examples online, but can't find the same problem.
I've got a jquery mobile site and a full site (it's a WordPress site). I've put the following code in the header.php file of the full site:
<script type="text/javascript">
function urlParam(name){
var results = new RegExp('[\\?&]' + name + '=([^amp;#]*)').exec(window.location.href);
if(results)
return results[1] || 0;
else
return '';
}
if(urlParam('view') == 'full'){
}
if(urlParam('view') == ''){
// <![CDATA[
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
document.location = "http://mysite.com/mobile/index.html";
}
// ]]>
}
</script>
This works fine and when I load the full site on my iphone it redirects to the mobile version.
However, I have a link to the full site on my mobile site like so:
<li>Full Site</li>
When I click this link it DOES take me to the full site, but if I click on any links on the full site, I get redirected back to the mobile site.
FYI, I've tried (and failed) setting cookies. All the scripts I've used haven't worked (I'm sure it's my fault) and I end up stuck in a continuous redirect.
First off, you only need the statement: if(urlParam('view') != 'full'){ check if mobile and redirect.. }
I suggest you use document.write(urlParam('view')); to check what urlParam('view') actually returns. This should make it easier for you to debug. Though the best way to debug is to use chrome or firefox tools.
I am running into a pickle. When I view my web app within mobile safari via iOS 6, I am able to successfully open up my basic target links <a href="link.html" target="mainframe"into my retrospective iframe <iframe src="http://www.linkexample.org/" name="mainframe"></iframe>
Though when the app is opened via standalone all the links exit out of the app and into Mobile Safari. You can see a working example at http://lacitilop.com/m2
Anyone have any suggestions on how to fix this?
You'll need to write some javascript to change the src of the iframe.
For a start, get your app working so that links will not open Safari by using something like the following (it's using jquery by the way):
if (window.navigator.standalone) {
$(document).on(
"click",
"a",
function (event) {
event.preventDefault();
var aurl = $(event.target).attr("href");
if (aurl) {
location.href = $(event.target).attr("href");
}
else {
location.href = this;
}
}
);
}
then you'll need to modify it to work with iframes too.
For more iphone app stuff you'll want to look at this:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html