We have an app, lets call it: xyz_app for which I have a custom URL scheme in form of xyz_app://.
We are sending an email to the user.
when he clicks on the link, he is suppose to go to the app and in case the app is not installed, our mobile website.
so from the Link in the email, how do I make sure that if the app is not installed, that link should send the user to the mobile website instead ?
The URL scheme works directly only if the app is installed on the iDevice. If not installed then it will throw an error.
1) To implement this functionality you will have to redirect the user to a webpage that will detect if app is installed, from your email link. Something like this www.yourwebsite/detectapp
2) Your detectapp page will have a javascript-
var appstoreFail = "www.your_redirect_website.com";
//Check is device is iOS
var iOS = /(iPad|iPhone|iPod)/.test(navigator.userAgent);
var appUrlScheme = "xyz_app://";
if (iOS) {
// If the app is not installed the script will wait for 2sec and redirect to web.
var loadedAt = +new Date;
setTimeout(function() {
if (+new Date - loadedAt < 2000)
window.location = appstoreFail;
} ,25);
// Try launching the app using URL schemes
window.open(appUrlScheme, "_self");
} else {
// Launch the website
window.location = appstoreFail;
}
Related
I want to check if a native app exists from browser/javascript, if it does then launch the native app or else redirect to Webapp.
I have tried below code (on Mac) it launches native app if it exists but when native app does not exist I get an error and does not redirect to Webapp
Failed to launch 'abcnativeapp://' because the scheme does not have a registered handler.
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 500) return;
window.location = "https://abcnativeapp.com";
}, 400);
window.location = "abcnativeapp://";
Ref: https://www.codegrepper.com/code-examples/shell/detect+if+app+is+installed+javascript
Is it possible to query using javascript to check if there are native app handlers for a URI scheme?
I would like to create a web-page, a page that will redirect to App Store if App is not installed in iPhone, and will redirect to The App if App is installed in iPhone.
I wrote Javascript like below.
function launchApp(){
let URI_SCHEME = 'myapp://';
let APP_STORE_URL = 'https://itunes.apple.com/jp/app/myapp/id111111111';
let userAgent = navigator.userAgent.toLowerCase();
if(userAgent.search(/iphone|ipad|ipod/) > -1){
location.href = URI_SCHEME;
setTimeout(function (){
let aTag = document.createElement('a');
aTag.href = APP_STORE_URL;
aTag.Click();
}, 1200)
}
}
I tried this code, and in iOS Safari, it works as I expected.
However, in iOS Chrome app, it does not work.
To be more specific, when I tap the link button to the page that I am creating, the new tab opens but closes immediately.
Does anyone know why it does not work in iOS Chrome app?
Moreover, does anyone know better solution?
Thank you for your cooperation.
I am building an app, using polymer starter kit & cordova to wrap the project. Now, since I use firebase as a database for storing data, I ended up using two native firebase javascript function to find user data:
getAuth()
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
var authData = ref.getAuth();
if (authData) {
console.log("Authenticated user with uid:", authData.uid);
}
onAuth()
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.onAuth(function(authData) {
if (authData) {
console.log("Authenticated with uid:", authData.uid);
} else {
console.log("Client unauthenticated.")
}
});
Those two functions require a reload to bring back data from firebase, but :
window.location.reload();
doesn't work
Alos looked for a Cordova plugin: webview-reloader, installed it but redirect and reload still not working.
When i use the reload() function the screen of my android phone is going white and the application stop working. Need to close the app and open it again.
Since Cordova is a wrapper around a browser window:
window.location.reload(true);
It works for the browser windows as well as a Cordova app.
This works for iOS and Android (at least with 2016 platform versions).
// keep startup url (in case your app is an SPA with html5 url routing)
var initialHref = window.location.href;
function restartApplication() {
// Show splash screen (useful if your app takes time to load)
navigator.splashscreen.show();
// Reload original app url (ie your index.html file)
window.location = initialHref;
}
if (this.cordovaService) { // is cordova
this.window.location.href = `${this.window.location.protocol}//${this.window.location.host}`;
} else {
this.window.location.reload();
}
I try to redirect the user to app if they have installed in their device else redirects them to app download page (iTunes).
I want to capture exact url where the client goes at last(app Url or web Url).
Is there any background process to capture which url the client presents?
if (IOSSafari)
{
window.location.href = appUrl;
var startTime = new Date();
setTimeout(function()
{
if (new Date() - startTime < 600)
{
if (window.location.href != webUrl)
window.location.href = webUrl;
}
}, 500);
}
My Attempt(I tried as below):-
if (IOSSafari)
{
callback(appUrl); // first callback to my server to identify the user presence
window.location.href = appUrl;
var startTime = new Date();
setTimeout(function()
{
if (new Date() - startTime < 600)
{
if (window.location.href != webUrl)
{
// second callback to my server to identify the user presence
callback(appUrl);
window.location.href = webUrl;
}
}
}, 500);
}
Case 1 App is installed:-
User A enters
My first callback works, user gets redirected to app
Now table have single entry with appUrl for User A. This works as expected since the user presents in app(appUrl).
Case 2 App is not installed:-
User A enters
My first callback works, user gets redirected to app
Since app is not presents in device it says safari cannot open this page
Second callback works and user redirect to app download page
Now table have 2 entries(entry with appUrl and entry with webUrl) for User A instead of single entry(entry with webUrl since user presents in download page)
One simplest way to capture that value is use a client side cookie.
document.cookie="lasturl="+xyz+";path=/";
//xyz is webUrl or appUrl , so write the above line before calling window.location.href=...
document.cookie="lasturl="+deeplinkUrl+";path=/";
window.location.href=deeplinkUrl;
//or
document.cookie="lasturl="+webUrl+";path=/";
window.location.href=webUrl;
Later you can check the cookie value for "lasturl"
In the below code us a new parameter called "token" with a random value.
if (IOSSafari) {
callback(appUrl); // first callback to my server to identify the user presence
var tokenID=parseInt(Math.random()*100000);
window.location.href = appUrl+"?token="+tokenID;
var startTime = new Date();
setTimeout(function() {
if (new Date() - startTime < 600) {
if (window.location.href != webUrl) {
callback(appUrl); // second callback to my server to identify the user presence
window.location.href = webUrl+"?token="+tokenID;
}
}
}, 500);
}
Design your "webUrl" in such a way that it does 2 tasks:
delete the existing entry in table with tokenid=XXXXX [Note that the token value XXXXX is passed same both the times]
redirect to the app download url.
This way you would have only one entry in the table, as the "webUrl" takes care of deleting the unnecessary previous entry identified by the tokenid.
For the AppStore link have a tracking url that just redirects to iTunes after logging the event
For the App being installed, could you possibly make the app ping a tracking url when it notices it has been opened by your website? (this is technically possible but it will require and app update on iTunes to include code to do this)
When the app gets:
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
I would like to determine an installed app using custom URL scheme on iPhone Safari.
You may believe it is impossible to do this, but JavaScript helped me to figure this out.
<script>(function(){
var fallbackLink = '<?=$info['failed_url']?>'+window.location.search+window.location.hash;
var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone'),
isAndroid = navigator.userAgent.match('Android');
if (isiOS || isAndroid) {
document.getElementById('loader').src = '<?=$info['scheme']?>://'+window.location.search+window.location.hash;
fallbackLink = isAndroid ? '<?=$info['failed_url']?>' :
'<?=$info['failed_url']?>' ;
}
window.setTimeout(function (){ window.location.replace(fallbackLink); }, 1000);
})();</script>
here is my script.
I already know custom URL scheme of the iPhone application. It successfully launches the application if it exists on the iPhone. However, if the iPhone doesn't have the application, it redirects to a different page.
I put certain code on the failed web page to notice that user doesn't have the application. My plan was perfect until I found this.
The JavaScript redirection works even though the application is launched on iPhone after timeout.
Is there a way to stop JavaScript if iPhone launched application?
Thank you.
You can always cancel the timeout when the window loses focus.
var countdown = window.setTimeout(function (){
window.location.replace(fallbackLink);
}, 1000);
window.addEventListener("blur", function (){
window.clearTimeout(countdown);
}, false);