I am implementing Smart Banner for ios >=6.
When the user is on my website and click on the smart banner to open my phonegap application, I want to redirect him to the correct PATH of my application
According to the ios documentation, i need to use app-argument:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
How to intercept myURL in my phonegap application ? I can only find example in Obj-C
You have the full url in handleOpenUrl js function, native side of cordova in ios sends the url to this function. So, basically in your index.html file, try this before referencing cordova.js:
<script type="text/javascript">
function handleOpenURL(url) {
console.log("received url: " + url);
}
</script>
You must also define the scheme (myapp in above example) in your ios app xcode settings.
Note that you have to configure your web site properly to call your app with the correct scheme (i.e myapp://...). You can read more about deep linking here: https://developers.google.com/app-indexing/webmasters/
Following plugin can help a lot, and supports both ios and android.
https://github.com/EddyVerbruggen/LaunchMyApp-PhoneGap-Plugin
Related
I have created a phone gap app by just passing the url of my developed website into my PhoneGap project but in the app addressbar is coming want to remove that
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.open('http://hitchmeright.com', '_self ', 'location=yes');
}
</script>
Your app is likely opening the url in the InAppBrowser. From the InAppBrowser docs:
_self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
So you need to whitelist your url.
Now that said, this is not a good design for a PhoneGap application, and will likely provide a terrible user experience. You're treating PhoneGap as a browser rather than a hybrid app. You should build your PhoneGap app properly (package your web assets and load them locally), and only load data from the server as needed. I'd recommend doing a bit more research and checking out some example apps.
Using Facebook App Links, How would i link a user from my website to my mobile app?
I've been trying to do it but i'm unable to do so.
I've tried adding meta-tags to my html test document, using pinterest as an example:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta property="al:android:url" content="Pinterest://">
<meta property="al:android:package" content="com.pinterest">
<meta property="al:android:app_name" content="pinterest">
<meta property="al:web:url"
content="http://applinks.org/documentation" />
</head>
<body>
Hello, world!
</body>
</html>
I'm not a HTML developer. However for iOS, if you are expecting a redirection to App, then the solution would be to use URL types.
You can define a URL type in your iOS app by following steps -
1. Select your project
2. Select Target
3. Select Info Tab
4. Expand URL types option
5. Under URL schemes, specify your app URL. It can be any string.
Also in your Apps AppDelegate, you should implement either one of the following delegate methods and return true
application(app: UIApplication, openURL url: NSURL, options: [String : AnyObject]) -> Bool
or
application(application: UIApplication, openURL url: NSURL, sourceApplication: String?, annotation: AnyObject) -> Bool
Inside your HTML page, specify your redirect URL.
For eg. - If you specified your URL types as appName in your info list, then the redirect URL will be appName://
You can find more info here
Facebook App Links only work if the source app is configured to support them. In an ideal world, the source app would scrape the destination URL when opening it and automatically launch the appropriate app. Unfortunately not many app are set up to do this — even the main Facebook app on iOS doesn't anymore, and Safari never did (and probably never will).
Setting up a custom URL scheme for your app and then linking directly to it does work, but in iOS 9+, the user will be shown a confirmation message first. And if the app isn't installed, there will be an ugly error message instead. Universal Links on iOS 9+ are designed to solve this, but they aren't supported everywhere yet and can be turned off.
The solution is to use a combination of URL schemes and Universal Links:
You want to enable your website for Universal Links so that when a user opens a link to your website, they go directly into the app instead on iOS 9+.
And then have a URL scheme redirect that fires for anyone not on iOS 9. You'll probably want to put this behind a button or a link so that users without the app won't be immediately shown an error when loading the page.
This is the approach we take at Branch.io, and is fairly close to our free deepviews feature. Check it out...might save a bunch of work!
I can define custom schemes like myapp so that third applications can redirect links like: myapp://mypage.com to my app(if user installed it). but I want that third applications open my app if user try to open links like http://mysite/mypage.com too.
Right now we can see that safari open yourtube when we type links like:
http://www.youtube.com/watch?v=WZH30T99MaM
Or map application opens if we type links like:
http://maps.google.com/maps.....
So how can I define a custom scheme that third applications open my apps if user type:
http://a.myapp.com
Short answer: You can't without server support. Apple does tricks that are not available to third party apps to redirect HTTP URLs like Maps and Youtube.
The only way you could do this would be to set up a web server at http://a.myapp.com that redirected to myapp://
Possible workaround, you register your custom URL Scheme and then in your HTML/JS code of the start page of your site you check if the the browser agent is Mobile Safari and forward it to the URL with custom scheme.
You can also check if app is not installed and redirect to AppStore, simply by opening AppStore link with the timeout, so if the redirection attempt to custom URL Scheme link fails you go to to App Store.
<script type="text/javascript">
var app = {
isSafariMobile: function () {
return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
},
launchApp: function() {
window.location.replace("myapp://");
this.timer = setTimeout(this.openAppStore, 1000);
},
openAppStore: function() {
window.location.replace("https://itunes.apple.com/app/Myapp");
}
};
if (app.isSafariMobile()){
app.launchApp();
}
</script>
UPDATE: The Safari detection method may be slightly adjusted, the ios chrome app could also be detected as Safari by this code as it has WebKit in its UserAgent string on iPhone.
Is there a way to check iOS to see if another app has been installed and then launched? If memory serves me this was not possible in early versions but has this been changed?
Doable, but tricky.
Launching installed apps, like the FB or Twitter apps, is done using the Custom URL Scheme. These can be used both in other apps as well as on web sites.
Here's an article about how to do this with your own app.
Seeing if the URL is there, though, can be tricky. A good example of an app that detects installed apps is Boxcar. The thing here is that Boxcar has advanced knowledge of the custom URL's. I'm fairly (99%) certain that there is a canOpenURL:, so knowing the custom scheme of the app you want to target ahead of time makes this simple to implement.
Here's a partial list of some of the more popular URL's you can check against.
There is a way to find out the custom app URL : https://www.amerhukic.com/finding-the-custom-url-scheme-of-an-ios-app
But if you want to scan for apps and deduce their URL's, it can't be done on a non-JB device.
Here's a blog post talking about how the folks at Bump handled the problem.
There is a script like the following.
<script type="text/javascript">
function startMyApp()
{
document.location = 'yourAppScheme://';
setTimeout( function()
{
if( confirm( 'You do not seem to have Your App installed, do you want to go download it now?'))
{
document.location = 'http://itunes.apple.com/us/app/yourAppId';
}
}, 300);
}
</script>
Calling this script from the web (Try to start MyApp), you can determine if your app with scheme "yourAppScheme" is installed on the device or not.
The App will launch if it is installed on the device and "yourAppScheme" is registered in it.
If the app is not installed you can suggest the user to install this app from iTunes.
To check if an app is installed (e.g. Clear):
BOOL installed = [[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:#"clearapp://"]];
To open that app:
BOOL success = [[UIApplication sharedApplication] openURL:[NSURL URLWithString:#"clearapp://"]];
Hides the error message if the app is not installed
At Branch we use a form of the code below--note that the iframe works on more browsers. Simply substitute in your app's URI and your App Store link.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
window.onload = function() {
// Deep link to your app goes here
document.getElementById("l").src = "my_app://";
setTimeout(function() {
// Link to the App Store should go here -- only fires if deep link fails
window.location = "https://itunes.apple.com/us/app/my.app/id123456789?ls=1&mt=8";
}, 500);
};
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>
</body>
</html>
There's a second possibility that relies on cookies first and the javascript redirect only as a fallback. Here's the logic:
When a user without the app first taps on a link to your app, he or she is redirected straight to the App Store. This is accomplished by a link to your app actually being a dynamically-generated page on your servers with the redirect. You create a cookie and log a "digital fingerprint" of IP address, OS, OS version, etc. on your backend.
When the user installs the app and opens it, you collect and send another "digital fingerprint" to your backend. Now your backend knows the link is installed On any subsequent visits to links associated with your app, your servers make sure that the dynamically-generated redirect page leads to the app, not the App Store, based on the cookie sent up with the request.
This avoids the ugly redirect but involves a ton more work.
To my understanding, because of privacy issues, you can't see if an app is installed on the device. The way around this is to try and launch the app and if it doesn't launch to have the user hit the fall back url. To prevent the mobile safari error from occurring I found that placing it in an iframe helps resolve the issue.
Here's a snippet of code that I used.
<form name="mobileForm" action="mobile_landing.php" method="post">
<input type="hidden" name="url" value="<?=$web_client_url?>">
<input type="hidden" name="mobile_app" value="<?=$mobile_app?>">
<input type="hidden" name="device_os" value="<?=$device_os?>">
</form>
<script type="text/javascript">
var device_os = '<? echo $device_os; ?>';
if (device_os == 'ios'){
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 100)
return;
document.forms[0].submit(); }, 5);
var redirect = function (location) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src', location);
iframe.setAttribute('width', '1px');
iframe.setAttribute('height', '1px');
iframe.setAttribute('position', 'absolute');
iframe.setAttribute('top', '0');
iframe.setAttribute('left', '0');
document.documentElement.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
iframe = null;
};
setTimeout(function(){
window.close()
}, 150 );
redirect("AppScheme");
I struggled with this recently, and here is the solution I came up with. Notice that there is still no surefire way to detect whether the app launched or not.
I serve a page from my server which redirects to an iPhone-specific variant upon detecting the User-Agent. Links to that page can only be shared via email / SMS or Facebook.
The page renders a minimal version of the referenced document, but then automatically tries to open the app as soon as it loads, using a hidden <iframe> (AJAX always fails in this situation -- you can't use jQuery or XMLHttpRequest for this).
If the URL scheme is registered, the app will open and the user will be able to do everything they need. Either way, the page displays a message like this at the bottom: "Did the app launch? If not, you probably haven't installed it yet .... " with a link to the store.
I know this is possible because today I browsed a mobile web page that said I have installed their native app, and prompted me to read their content in the app. (I haven't logged in, so they must have used some native checking mechanism.)
I know the web page can call out a native app by loading a custom url scheme like 'myapp://some/path', but how does it check if the url scheme exists before loading it? I want to do the same thing with my web app.
And I was seeing this on iOS, is this possible in Android, too?
The native checking mechanism is called Smart Banner. Apple added it to MobileSafari in iOS 6 and higher.
You add the following to your web page:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
The custom URL scheme is the way to go.
They probably delivered a transparent image by that custom URL, and checked if their image delivery mechanism was hit.
So in essence:
You download page
The page prompts your browser to hit their "checking service" (image with custom URL scheme?)
The page checks if the call to the checking service succeeded. If so, it prompts you to use the native app