I'm trying to launch the app uber eats from another application. My application uses Cordova and angular.
I'm using the following code:
var url = 'https://www.ubereats.com/';
if (isPhoneGap()) {
if (isAndroid()) {
url = 'com.ubercab.eats:';
} else if (isIOS()) {
url = 'uber-eats-food-delivery://www.ubereats.com/?';
}
}
window.open(url,'_system');
But this does not open the uber eat app. How can I make my app start the uber eats app?
Your android link doesn't contain two forward slashes. If you do not include them, the browser is going to assume it's a relative link and fail to properly navigate to your URL. It should be com.ubercab.eats://.
I'm assuming your deep links are actually correct. As far as I know, Uber Eats does not make this information public, nor do they seem to provide any developer documentation or API. If these aren't correct, you'll likely have to derive the proper links with reverse engineering.
Related
This questions concernes a web app build in React that will be accessed with smartphones through their browsers. I use iPhone with both Safari and Chrome for testing.
One step involves opening a native authentication app.
According to the docs of the native app, it can be open from the browser by doing this:
const openAuthApp = () =>
(window.location = "https://app.bankid.com/?autostarttoken=&redirect=");
This works fine if I call the function when clicking a button, like this:
<button onClick={openAuthApp}>Open</button>
The above code triggers the opening of the authentication app immediately when clicking the button.
But when I trigger the function immediately after page has loaded, without using a button, like this
useEffect(() => {
openAuthApp();
}, []);
I get an error in the browser saying that the app was not found on this device.
Idk much about how browsers work but my first guess was that it takes some time for the browser to acquire information about all installed apps, so I added a timeout before executing the method:
useEffect(() => {
setTimeout(openAuthApp, 5000);
}, []);
It still failed. It works if I press the button less than 5 seconds after page load, so the time of initiation after page load shouldn't be the factor here.
I don't know how to proceed with this, and would appreciate ideas on how to move forward.
I suspect that your problem is a missing user gesture, which is common when using Claimed HTTPS Schemes - eg see this Chrome browser requirement.
There is a similar problem when using OAuth flows and the AppAuth pattern with HTTPS redirect URIs, which occurs for both iOS and Android. See the sections titled Problems Receiving Redirect Responses in my iOS and Android blog posts.
The solution for my mobile samples was to add an interstitial web page and if you do a view source you will see that it has an onclick handler that invokes a deep link after the user gesture:
document.getElementById('continueButton').onclick = () => {
const redirectUri = 'https://mobile.authsamples.com/basicmobileapp/oauth/callback';
window.location.href = redirectUri;
};
You won't need to go to these lengths of course, but I think you will need a user gesture to invoke the BankID app and do an external login reliably. In some ways this is a reasonable UX also, since you are keeping the user informed before you switch apps, rather than doing so abruptly. I would put a positive spin on it like this:
You will now be redirected to the BankID app to perform strong authentication and to provide consent. Please click Next to proceed.
Option 1:
Use window.location.href instead of window.location
const openAuthApp = () =>
(window.location.href = "https://app.bankid.com/?autostarttoken=&redirect=");
If your web app have the same domain as bankid.com use window.location.assign instead.
const openAuthApp = () =>
(window.location.assign= "https://app.bankid.com/?autostarttoken=&redirect=");
Option 2:
this will take 5 minutes, use branch.io for links (you do not need to install the SDK)
signup create new app, write the name of the app
got to "Configuration" from left menu select "I have an Android App"
add the link for your app and select it then fill other options if you like
it will give you a link "https://[YOUR_APP_ID ].app.link"
use this link instead of the default link
This should work without problem
I am implementing deep linking to my android app and it works only when clicking on a link with the desired url such as https://mydomain.co.il only outside browsers like in whatsapp etc.
I know that for making app links work from browser, the website needs to have assetlinks.json file located at https://mydomain.co.il/.well-known/assetlinks.json in order to verify that I am the owner of both the domain and the app.
So I do have the assetlinks.json file ready but does anyone know how can I put the file in that specific location (https://mydomain.co.il/.well-known/assetlinks.json) on my website when using Wix as the platform ?
Thanks in advance
I struggled to find a straightforward way to host the Android Digital Asset Links file on Wix. Found bits and pieces of help on the net. Tested my code and it seems to work.
Here it goes:
Android needs a Digital Asset Links file hosted on the website of an app to verify ownership. The link required is: https://www.yoursite.com/.well-known/assetlinks.json
Since hosting this file at that location was not a plausible solution on Wix (at least to me at the time of this post), we'll need to add a JS file which can spit out the same JSON data and then redirect the URL Google expects to our new link.
Go to Dev Mode -> Enable Developer Mode and switch on the developer mode
In the new left pane, go to {} (Public & Backend)
Next to Backend, click on +, and create a new Javascript file with the name http-functions.js
Add this code:
// Import the Wix http functions API
import {ok, notFound, serverError} from 'wix-http-functions';
// Set the assetlinks variable (between the single backticks) with the content of your assetlinks.json file
let assetlinks = `[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target" : { "namespace": "android_app", "package_name": "<Your app package>",
"sha256_cert_fingerprints": ["<Your app's SHA256>"] }
}]`
// Define http get function for your trust.txt file
export function get_assetlinks(request) {
let options = {
"headers": {
"Content-Type": "text/plain"
},
"body": assetlinks
};
return ok(options);
}
Publish your site
Test if the JSON is displayed by calling: www.yoursite.com/_functions/assetlinks
Hoping that things are great so far, we'll proceed to the last and final step - URL redirection
Go to site Settings > Marketing & SEO > SEO Tools > URL Redirect Manager
Click on New Redirect and enter for:
Old URL: /.well-known/assetlinks.json
New URL: /_functions/assetlinks
Test out the link www.yoursite.com/.well-known/assetlinks.json
Hope this helps someone! Better late than never.
The Xrm.Page.context.client.getClient() function does not seem to be working correctly. When called from the desktop Outlook App, it returns "Web", instead of "Outlook" as described by the documentation (https://msdn.microsoft.com/en-us/library/gg334511.aspx#BKMK_getclient). Here is the code I am using (bound to form onLoad event):
function alertClient() {
var client = Xrm.Page.context.client.getClient();
Xrm.Utility.alertDialog(client);
}
Any ideas on why this is happening?
Can you mention which app you use? There is two: The "Dynamics 365 for Outlook" or the "Dynamics 365 app for Outlook".
I'm not sure if nowaday this function still returns "Outlook". Now, everything runs in an iframe in Outlook. Before the add-on had a different architecture.
As a solution, maybe if you parse the url from Outlook you could find a specific parameter that would tell you the source. That's probably how Dynamics would do it anyway.
After using the below code. App is launching the native android map showing the app with passed lat and long value.but my problem is after clicking on the nav option the 'from' is blank but 'to' should be coming as my passed value. But it is coming as blank value.
window.location = 'geo:40.765819,-73.975866'
If you are willing to use Cordova plugins, then I would suggest taking a look at the Launch Navigator plugin.
It allows you to do exactly what you want, but also allows you to launch other supported apps and even allows you to prompt the user with a list of applications to choose from.
There is an example in the documentation, showing how you can open a specific application, like Google Maps. For your convenience, I have also posted it below.
launchnavigator.isAppAvailable(launchnavigator.APP.GOOGLE_MAPS, function(isAvailable) {
var app;
if(isAvailable) {
app = launchnavigator.APP.GOOGLE_MAPS;
} else {
console.log("Google Maps not available - falling back to user selection");
app = launchnavigator.APP.USER_SELECT;
}
launchnavigator.navigate([40.765819, -73.975866], {
app: app
});
});
In this piece of code, the user will still be given a choice to pick another app, if Google Maps is not available.
There is also an AngularJS wrapper available for this called ngCordova, installation instructions are here and documentation about the wrapper for the Launch Navigator plugin can be found here.
I'm developing website with a lot of HTML5 and CSS3 features. I'm also using iframe to embed several content on my website. It works fine if I open it using Chrome/Firefox/Safari mobile browser. However, if I share on facebook (post/page) and I opened it up with Facebook application with Facebook Internal Browser, my website is messed up.
Is there any tools or way to debug on Facebook Browser? Thanks.
This is how you can do the debugging yourself. It's painful, but the only way I've come across so far.
tl;dr Get the Facebook App loading a page on your local server so you can iterate quickly. Then print debug statements directly to the page until you figure out what is going on.
Get a link to a page on your local server that you can access on your mobile device (test in mobile safari that it works). See this to find out your local IP address How do you access a website running on localhost from iPhone browser. It will look something like this
http://192.xxx.1.127:3000/facebook-test
Post that link on your Facebook page (you can make it private so your friends aren't all like WTF?)
Click the posted link in the Facebook mobile App and it will open up in Facebook's mobile browser
Since you don't have a console, you basically need to print debug statements directly to the page so it is visible. Put debug statements all over your code. If your problems are primarily related to CSS, then you can iteratively comment out stuff until you've found the issue(s) or print the relevant CSS attributes using JavaScript. Eg something like (using JQuery)
function debug(str){$('body').append("<br>"+str);}
Quite possibly the most painful part. The Facebook browser caches very aggressively. If you are making changes and nothing has happened, it's because the content is cached. You can sometimes resolve this by updating the URLs, eg /facebook-test-1, /facebook-test-2, or adding dummy parameters eg /facebook-test?dummy=1. But if the changes are in external css or js sheets it sometimes will still cache. To 100% clear the cache, delete the Facebook App from your mobile device and reinstall.
The internal browser the Facebook app uses is essentially a uiWebView. Paul Irish has made a simple iOS app that lets you load any URL into a uiWebView which you then can debug using Safari's Developer Tools.
https://github.com/paulirish/iOS-WebView-App
I found a way how to debug it easier. You will need to install the Ghostlab app (You have a 7-day free trial there, however it's totally worth paying for).
In Ghostlab, add the website address (or a localhost address) you want to debug and start the session.
Ghostlab will generate a link for access.
Copy that link and post it on Facebook (as a private post)
Open the link on mobile and that's it! Ghostlab will identify you once you open that link, and will allow you to debug the page.
For debugging, you will have all the same tools as in the Chrome devtools (how cool is that!). For example, you can tweak CSS and see the changes applied live.
If you want to debug a possible error, you can try to catch it and display it.
Put this at the very top of your code:
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
}
(Source: MDN)
This will catch and alert your errors.
Share a link on Facebook (privately), or send yourself a message on Facebook Messenger (easier). To break the cache, create a new URL every time, e.g. by appending a random string to the URL.
Follow the link and see if you can find any errors.
With help of ngrok create temporary http & https adress instead of your ordinary localhost:3000(or other port) and you could run your app on any devices. It is super easy to use.
and as it was written above all other useful information you should write somewhere inside div element (in case of React I recommend to put onClick on that div with force update or other function for getting info, sometimes it helps because JS in FB could be executed erlier than your information appears). Keep in mind that alerts are not reliable, sometimes they are blocked
bonus from ngrok that in console you will see which files was
requested and response code (it will replace lack of network tab)
and about iFrame.If you use it on other domain and you rely on cookies - you should know that facebook in-app browser blocks 3rd party cookies
test on Android and iOS separately because technicaly they use different browsers