Here is my situation:
User request an email of forgot password.
User use their Android/iPhone to open email and tap on the link inside the email
When the link is tapped (clicked), it'll call the Ionic app.
I spend the whole morning to research and found this solution: using a plugin of Cordova named Custom-URL-scheme.
I also found out a tutorial from sysgears that I need to add this code into my app.js file:
.run(['$state', '$window',
function($state, $window) {
$window.addEventListener('LaunchUrl', function(event) {
// gets page name from url
var page =/.*:[/]{2}([^?]*)[?]?(.*)/.exec(event.detail.url)[1];
// redirects to page specified in url
$state.go('tab.'+ page, {});
});
}
]);
function handleOpenURL(url) {
setTimeout( function() {
var event = new CustomEvent('LaunchUrl', {detail: {'url': url}});
window.dispatchEvent(event);
}, 0);
}
I've done everything, however it does not work. I tried to type my URL_SCHEME (http://myapp://) into the Chrome browser in Android phone but Chrome just display an error message:
This webpage is not available. ERR_NAME_NOT_RESOLVED.
Please help me. Thanks.
Try to remove the "http://" from your sheme, href and browser
If still not working, can you precise your cordova version, and the plugin version you use. Did you install the plugin with the sheme in --variable URL_SCHEME=myapp
Also, note its "SHEME", not SHEMA
Related
I'd like for users to be able to share a link (e.g. app.com/SKFLA - this is primarily because deep links on their own aren't clickable) via Facebook etc. When clicked, this redirects to a deep link app://SKFLA. If the app is installed, this opens the app - this is all working fine so far. But if the app isn't installed, I'd like to open the app store on the relevant page. Is this achievable? Thanks!
You need UNIVERSAL LINKS
Please check
IOS https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearch/UniversalLinks.html
Android
https://developer.android.com/training/app-links/
It might also require some extra server-side setup.
Not sure about native behavior.
We used third-party service like https://branch.io/deepviews/.
There is a bunch of similar services.
If someone is still stuck in this issue and needs easiest solution, you will love node-deeplink
1.) If app is installed: Calling an app through deep linking will always call componentDidMount of root component. So you can attach a listener there. Like:
Linking.getInitialURL()
.then(url => {
if (url) {
this.handleOpenURL({ url });
}
})
.catch(console.error);
Linking.addEventListener('url', this.handleOpenURL);
handleOpenURL(event) {
if (event) {
console.log('event = ', event);
const url = event.url;
const route = url.replace(/.*?:\/\//g, '');
console.log('route = ', route);
if(route.match(/\/([^\/]+)\/?$/)) {
const id = route.match(/\/([^\/]+)\/?$/)[1];
const routeName = route.split('/')[0];
if (routeName === 'privatealbum') {
Actions.privateAlbum({ albumId: id });
}
}
}
}
2.) If app is not installed: Just set up a route in your server and node-deeplink package will handle the bridging between web browser to app store when a app is not installed in your mobile.
By this, both the cases will be handled without any struggle
I'm building a Cordova Ionic application which fetches JSON response on button click and display it. It's working fine in browser but it's not displaying anything in android.
angular.module('starter', ['ionic'])
.config(function($ionicConfigProvider) {
$ionicConfigProvider.navBar.alignTitle('center'); //align title in center
})
.controller('ControllerOne',[ '$scope', 'freshlyPressed', Ctrl])
.service('freshlyPressed', ['$http','$log', freshlyPressed]);
function Ctrl($scope, freshlyPressed){
$scope.refreshClicked = function(){
freshlyPressed.getBlogs($scope);
}
};
function freshlyPressed($http,$log){
this.getBlogs = function($scope){
$http.jsonp("https://public-api.wordpress.com/rest/v1.1/freshly-pressed?callback=JSON_CALLBACK")
.success(function(result, posts){
$scope.posts = result.posts;
});
};
};
How would I know if any exception occurred while testing the app in android?
[Edit] I'm new to Android & Cordova.
The only way you can find out if something goes wrong is if you add a .error function after the .success function, otherwise errors will not be caught.
Here is a code example for your current situation:
function freshlyPressed($http,$log){
this.getBlogs = function($scope){
$http.jsonp("https://public-api.wordpress.com/rest/v1.1/freshly-pressed?callback=JSON_CALLBACK")
.success(function(result, posts){
$scope.posts = result.posts;
})
.error(function(error){
console.log(error);
});
};
};
Although, I would highly recommend you switch to the .then() function, as .error and .success have been deprecated as described here.
You can debug your android apps with Chrome using DevTool.
To enable Remote Debugging follow these Remote Debugging Devices Documetation
.
To use it follow Chrome Inspector (Ionic Docs).
Hope this may help you.
I have three buttons on my website, that link to Facebook, Twitter & vk.com pages. I want to open native app, if it is installed on user device. Otherwise, I want URL fallback to be opened.
First of all, I tried to use native app schemes directly with deep-link.js plugin. But, when I tried to open native app URL scheme, when native app was not installed, Safari has shown an error, but opened URL fallback page finally. Default Android browser said that he does not know how to handle such URL scheme:
<a class="btn btn-primary" href="https://www.facebook.com/warpcompany" data-app-ios="fb://profile/838619192839881" data-app-android="fb://page/838619192839881">Facebook</a>
Then I tried to use App Links "standard", that that has so much promotion from Facebook. I even tried to use their hosted app links, to make sure I've generated everything right way. It does not work, it always redirect to website fallback. You can easily test it by yourself from https://fb.me/746134728830806
Is it possible to provide deep link on website, that will open native app without errors at least in default os browsers, or fallback silently to URL?
It is still possible, but on newer versions of the Android default browser you have to use intents instead of just trying to open the deep link. For example replace your fb://page/838619192839881 with
intent://page/838619192839881#Intent;scheme=fb;package=com.facebook.katana;end
This will fallback to Google play by default, but you can override the fallback adding a S.browser_fallback_url:
intent://page/838619192839881#Intent;scheme=fb;package=com.facebook.katana;S.browser_fallback_url=http%3A%2F%2Fwww.facebook.com%2F;end
The fallback should be url encoded.
Of course you'll have issues if the user is not on an Android phone or with an old version of the default browser (or strange browser). You can setup a bunch of conditions and replace your HTML with the correct code for each case.
The accepted answer will only work on Chrome v28 and default browsers for Android 5.0. If you want this to work on other browser like Facebook/Twitter webviews, Firefox, UC and older default browsers than 5.0, you'll need to use some code that's a little more complicated.
Add this function to your JS snippet:
var openSesame = function() {
var method = 'iframe';
var fallbackFunction = function() {
if (method == 'iframe') {
window.location = "market://details?id=com.facebook.katana";
}
};
var addIFrame = function() {
var iframe = document.createElement("iframe");
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.src = "fb://page/838619192839881";
document.body.appendChild(iframe);
};
var loadChromeIntent = function() {
method = 'intent';
document.location = "intent://page/838619192839881#Intent;scheme=fb;package=com.facebook.katana;end";
};
if (navigator.userAgent.match(/Chrome/) && !navigator.userAgent.match("Version/")) {
loadChromeIntent();
}
else if (navigator.userAgent.match(/Firefox/)) {
window.location = "fb://page/838619192839881";
}
else {
addIFrame();
}
setTimeout(fallbackFunction, 750);
};
Then your button will look like this:
Open the App
Or you can use a service like branch.io which does exactly what you're looking for automatically.
Yes it is! Have a look to this training:
https://developer.android.com/training/app-indexing/deep-linking.html
Is this the information you needed? lmk
Good day! I am developing a simple mobile app using jQuery Mobile with InAppBrowser plugin on IntelXDK. The purpose of the InAppBrowser is to let users view external web pages within the app. On IntelXDK emulator, the browser closes when I click on "Return to App" button and then it returns to the app. However, I encountered a problem on an Android build when I clicked on the "Done" button I received the message:
Webpage not available
The webpage at file:///android_asset/www/[object%20Event] might be temporarily down...
I have used the following so users can click and view external web pages:
Opening links in external device browser with Cordova/jQuery-mobile
I have modified the above to be used on my app:
$(document).on('click', '.link', function (e) {
var elem = $(this);
var url = elem.attr('href');
if (url.indexOf('http://') !== -1) {
e.preventDefault();
document.addEventListener("deviceready", onDeviceReady, false);
onDeviceReady(url);
//return false;
}
});
function onDeviceReady(url) {
var ref = window.open(url, '_blank', 'location=yes');
}
Thank you for your time and help. I really appreciate it.
The reason why it was displaying an error message because the test file was calling another onDeviceReady function. Problem solved!
I am working on Cordova hybrid mobile app currently am doing in android app it runs fine now when i make same app for window phone it is not perform any functionality.
for make WP8 I follow this link after that i copy my all file of www folder to new generated www in Visual Studio project.
But when i ran app it just shows its first page only and not performing any functionality.
So what steps did i miss ?
On the click of button I call following function
$('#contactBackupBtn').on('click',function(){
$('#p2').append("Going to be backup");
sm_sync.backupAllTheContacts(function(){
$('#p4').append("After Contact Backup Function Finished ");
});
});
From above function it calls the following one
backupAllTheContacts:function(callback) {
$('#p3').append("IN backupAllTheContacts");
navigator.contacts.find(["*"], function(contacts) {
$('#p3').append("IN Contact Success");
callback();
}, sm_sync.onError, {"multiple": true});
}
onError:function(error) {
$('#p1').empty();
$('#p1').append(error.code);
$('#p1').append(error.message);
}
When i execute it, it shows this message IN backupAllTheContacts and ths Going to be backup but not showing any success or error messages. what should i do to make it run.
(This is a small part of my app it is runnng perfact in Android Emulator but not n windows
I need help i am stuck here)
use console.log is not support in windows phone so use this and use localStorage like this. try to run on deviceready
document.addEventListener("deviceready", function () {
/* This is for Console.log support in WP */
if (typeof window.console == "undefined") {
window.console = {
log: function (str) {
window.external.Notify(str);
}
};
}
var key0;
/* manage localstorage this way */
if (typeof (window.localStorage) !== "undefined") {
localStorage.setItem('lastname', "Smith");
localStorage.firstname = "One";
if (localStorage.getItem('objectKey1') != null || localStorage.getItem('objectKey1') != undefined) {
key0 = window.localStorage.getItem('objectKey1');
}
}
},false);
When i build my WP8 app i ran into somewhat an issue same as this. it's because of the jQuery i used. Then i updated my jQuery to the latest and its all started working fine.
Please check the jQuery documentation and the version you are using. Or you just put up your code in here so that we can have a closer look.
"But when i ran app it just shows its first page only and not performing any functionality.
So what steps did i miss ?"
Without the code how can we say what steps did you missed ???