I am working on Ionic 4 app and I am using deeplink to open app when clicked on a external link.
I am using plugin:
cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=deeplinktest --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=example.com --variable ANDROID_PATH_PREFIX=/
npm install #ionic-native/deeplinks
and code for opening app is:
openAppFromLink() {
this.deeplinks.routeWithNavController(this.navCtrl, {
'/pageName/:id': {}
}).subscribe(match => {
if (localStorage.getItem('loggedInUser')) {
let navigationExtras: NavigationExtras = {
state: {
id: match.$args.id,
isDeeplink: true
}
};
console.log('Successfully matched route' + JSON.stringify(match));
this.router.navigateByUrl(this.router.routerState.snapshot.url + '/pageName', navigationExtras);
} else {
console.log('opening in system browser');
window.open('https://example.com', '_system');
}
}, nomatch => {
console.error('Got a deeplink that didn\'t match' + JSON.stringify(nomatch));
});
}
I want to open a website or a playstore if user don't have app install on his device.
<h1><a href='deeplinktest://example.com/page/?id=3491'>Open App <a></h1>
on click of above link I am able to open app but when I don't have app installed nothing happens on android device. Can this managed with the same link I mentioned?
in this block you have to handle the error:
nomatch => {
console.error('Got a deeplink that didn\'t match' + JSON.stringify(nomatch));
});
there is a plugin named In App Browser that opens links in in-app-browser.
install it and put your code in nomatch block:
nomatch => {
// open the link here using In App Browser
});
Related
I am trying to redirect the user to my android app to google playstore via ionic market plugin with cordova and it seems that it is not working.
package.json:
"#ionic-native/core": "^5.29.0",
"#ionic-native/market": "^5.36.0",
"cordova-plugin-market": "^1.2.0",
method:
async openAppstoreEntry() {
if (this.plt.is('android')) {
try {
let pkgn = 'com.biopix.pebble.ivd'
let res = await this.market.open(pkgn);
console.log(res) // ---> prints 'OK'
} catch (e) {
console.warn(e)
}
}
}
When I click the button that calls the openAppstoreEntry on my android app the Google playstore throws:
To view this content, install and set up a web browsing app.
Here is the app in Playstore:
https://play.google.com/store/apps/details?id=com.biopix.pebble.ivd&hl=en&gl=US
I'm making application using ionic with capacitor.
I want to open YouTube app from my app.
If I get it right I should be able to do it using App Plugin that comes with capacitor: https://capacitorjs.com/docs/apis/app
Here is my code:
App.canOpenUrl({url: 'http://www.youtube.com/watch?v=' + this.dane.id})
.then(resp => {
console.log('Can open url: ', resp);
App.openUrl({url: 'http://www.youtube.com/watch?v=' + this.dane.id});
})
.catch(err => {
console.log('Err', err);
});
It says that I can open that url but YouTube app is not opening (as well as browser).
In capacitor 3 you can to do this, try this example it's works for me
First install
npm install #capacitor/app-launcher
npx cap sync
Then
import {AppLauncher} from '#capacitor/app-launcher';
const {value} = await AppLauncher.canOpenUrl({url: 'com.google.android.youtube'});
if (value) {
await AppLauncher.openUrl({url: 'https://www.youtube.com/watch?v=videoId'});
}
I have a problem with Ionic storage in my Ionic App for Windows (UWP app). I already tested and deployed my app for Android without any trouble.
Now I would like to generate an UWP app.
The app I’m developing is a workshop’s dashboard. The indicators change every day and I need to save them from one day to another. To do this I usethe storage module of Ionic.
When launching the command
$ionic serve
the app responds exactly as it should in the web browser (Firefox). From one launch to another my data are still there.
When I use
$ionic cordova run windows
the installation and launch steps of my app work fine. Every function of my app runs fine, but the call to storage (get and set) doesn’t work : when I close, and then reopen it as an autonomous application, I loose all data every time. It is the same when I run the app from Visual Studio.
Moreover, I write some console.log in the result of the promise and none of them is written in the Javascript console. It is like Windows does not recognize the command.
I tried with Visual Studio 2015 Update 3 and Visual Studio 2017, the result is identical. I followed the recommendation of Ionic Doc and add the target platform windows10 in the config.xml.
Does anyone have an idea of what I’m doing wrong ? Is there an incompatibility between Windows and Ionic ?
Thanks for any help.
Config :
Windows 10 64-bits
Ionic CLI: 3.19.1
Cordova CLI : 8.0.0
Node : v6.11.2
Visual Studio Community 2017 (15.5.27130.2036)
Extract of my code maPage.ts :
import { Storage } from '#ionic/storage';
export class maPage {
constructor(public storage: Storage) {
this.downloadData();
}
ionViewWillLeave()
{
this.saveData();
}
TabData = {
id: 0,
label: '',
Tab1: [],
Tab2: [],
attri1 : 0,
attri2: false
}
Param = {
Objet1: {NbObj1: 7},
Objet2: {NbObj2: 5}
}
saveData()
{
var Data: object;
Data =
{
TData: this.TabData,
TParam: this.Param
}
this.storage.set('Data', Data).then(_=> {
console.log('Backup done!');
}, error => {
console.log('erreur : ', JSON.stringify(error))
});
}
downloadData()
{
this.storage.ready().then(()=>{
console.log('storage ready');
this.storage.get('Data').then((val) => {
this.TabData = val.TData;
this.Param = val.TParam;
console.log('Récupération terminée !');
}).catch(erreur => {
console.log('La variable Data est vide ou n\'existe pas!');
console.log('erreur : ', JSON.stringify(erreur));
}).catch(err => {
console.log('storage not ready');
console.log('err : ', JSON.stringify(err));
});
}
}
On Windows platform, console.log is not supported. To do that, you should install cordova-plugin-console, or need to use alert function.
Regarding storage, I am suggesting you could use localstorage or cordova-sqlite-storage.
installed cordova device plugin by :
sudo cordova plugin add org.apache.cordova.device
then downloaded ngCordova and included ng-cordova.min.js in to js folder and also included in index.html
next what i did is injected ngCordova as follows
angular.module('starter', ['ionic', 'starter.controllers','ngCordova'])
then included in controller as follows
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $ionicPlatform,$cordovaDevice)
but still getting the following errors
ReferenceError: device is not defined
at Object.getUUID (http://localhost:8100/js/ng-cordova.min.js:1:14929)
at new <anonymous> (http://localhost:8100/js/controllers.js:27:26)
at invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11591:17)
at Object.instantiate (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11602:23)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:14906:28
at updateView (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42986:30)
at eventHook (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42933:17)
at Scope.$broadcast (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20605:28)
at $state.transition.resolved.then.$state.transition (http://localhost:8100/lib/ionic/js/ionic.bundle.js:34122:22)
at wrappedCallback (http://localhost:8100/lib/ionic/js/ionic.bundle.js:19197:81)
Can you now tell me what went wrong?
If is there another way to read the Device UUID show me the direction to it.
Yes, there is another way. You just don't need the ngCordova for this.
When you add the plugin cordova plugin add org.apache.cordova.device it's loaded to your application and therefore the info you want is at window.device.
If you want to get device uuid at anywhere in the code you just need to call window.device.uuid.
If you want as soon as the app starts, then use:
ionic.Platform.ready(function(){
console.log( window.device.uuid );
});
If you are using '> ionic serve', device will be "not defined." Try in an emulator or physical device.
Use ngCordova and cordova Device plugin:
cordova plugin add org.apache.cordova.device
module.controller('MyCtrl', function($scope, $cordovaDevice) {
var uuid = $cordovaDevice.getUUID();
});
Within v2 it works like this:
import { Device } from 'ionic-native';
console.log('Device UUID is: ' + Device.uuid);
Reference: http://ionicframework.com/docs/v2/native/device/
Install:
#ionic-native/core
#ionic-native/device
enter link description here
ionic cordova plugin add cordova-plugin-device
npm install --save #ionic-native/device
Add this plugin to your app's module
// app.module.ts
import { Device } from '#ionic-native/device';
...
#NgModule({
...
providers: [
...
Device
...
]
...
})
export class AppModule { }
Usage
import { Device } from '#ionic-native/device';
constructor(private device: Device) { }
...
console.log('Device Model is: ' + this.device.model+
'\n Device UUID is: ' + this.device.uuid+
'\n Device serial is: ' + this.device.serial+
'\n Device platform is: ' + this.device.platform+
'\n Device version is: ' + this.device.version+
'\n Device manufacturer is: ' + this.device.manufacturer);
If won't run change "import { Device } from '#ionic-native/device';" for "import { Device } from '#ionic-native/device/ngx';"
And "this.device.uuid" for "Investigate"
Use these commands for run in browser
ionic build
ionic cordova platform add browser
cordova run browser
And works ! in these versions
in Browser
in Real Device
You could just use ionic.Platform.device() in your platform.ready function.
$ionicPlatform.ready(function {
console.log(ionic.Platform.device());// returns an object containing device uuid,version, platform, manufacturer ...
});
hope this helps someone :).
Regards.
http://forum.ionicframework.com/t/ionic-cordova-device-uuid/13652
You may only access cordova plugins within the ionic.Platform.ready() callback function:
angular.module('starter.controllers', [])
.controller('DashCtrl', function ($scope, $state, $cordovaDevice) {
var init = function () {
console.log("initializing device");
try {
$scope.uuid = $cordovaDevice.getUUID();
}
catch (err) {
console.log("Error " + err.message);
alert("error " + err.$$failure.message);
}
};
ionic.Platform.ready(function(){
init();
});
})
This is because Cordova plugins take some more time to load then the web application. The ionic.Platform.ready() callback is triggered as soon Cordova has fully loaded or immediately if it is already loaded.
wow found out what wrong i was doing... through this question. http://forum.ionicframework.com/t/problem-to-use-ngcordova-device-is-not-defined/11979
when we test on other device which has other platform than cordova supports this happens.
this was a useful discovery for me.
Have been struggling with this for hours today, install the cordova device plugin with:
cordova plugin add cordova-plugin-device
make sure you also reference the plugin in your config.xml:
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
I'm running example code (found below) through phonegap build to produce an android apk.
https://github.com/phonegap-build/FacebookConnect/blob/master/example/Simple/index.html
When I try to log into facebook through the app on an android device (with the facebook app installed), I get this error:
Invalid android_key parameter J4INwYsuTyQ_LJc1d3WZ2HReg7M does not match any allowed android key. Configure your app key hashes at http://developers.facebook.com/apps/'app id'
I have copy-pasted this key into the key hashes section of my app's android settings but it still throws the same error when I try to log in using the app.
How can I get this app to log into facebook successfully?
OR: What is another way to enable an android app to log into facebook using phonegap?
Here are some things I have done:
In my facebook app's settings:
Set 'Package name' to the 'widget id' found in my phonegap config.xml.
Set 'Class name' to the Package name with '.ProjectActivity' appended to it.
Enabled 'Single Sign on' and disabled 'Deep linking'.
Made the app open to the public (through the 'Status & Review' section.
In my phonegap config.xml (found in the /www directory in phonegap project):
Entered APP_ID as the ID found in my facebook app dashboard
Entered APP_NAME as the 'Namespace' found in my facebook app settings
In my phonegap build app settings:
Made a keystore (using this answer: https://stackoverflow.com/a/19315975/1696114) and used it to generate a release apk.
I think you should use facebook phonegap plugin as your authentication.
Download and install into your cordova project.
https://github.com/phonegap/phonegap-facebook-plugin
Use this command to install it.
cordova plugin add https://github.com/phonegap/phonegap-facebook-plugin.git --variable APP_ID="xxxxxxxxxxxxx" --variable APP_NAME=“xxxxxxxx”
Then setup your facebook app here:
http://developers.facebook.com/apps/
Then make sure you have this script in your project.
cdv-plugin-fb-connect.js
facebook-js-sdk.js
After that, paste this code into your main script
if ((typeof cordova == 'undefined') && (typeof Cordova == 'undefined')) alert('Cordova variable does not exist. Check that you have included cordova.js correctly');
if (typeof CDV == 'undefined') alert('CDV variable does not exist. Check that you have included cdv-plugin-fb-connect.js correctly');
if (typeof FB == 'undefined') alert('FB variable does not exist. Check that you have included the Facebook JS SDK file.');
FB.Event.subscribe('auth.login', function(response) {
//alert('auth.login event');
});
FB.Event.subscribe('auth.logout', function(response) {
//alert('auth.logout event');
});
FB.Event.subscribe('auth.sessionChange', function(response) {
//alert('auth.sessionChange event');
});
FB.Event.subscribe('auth.statusChange', function(response) {
//alert('auth.statusChange event');
});
function getSession() {
alert("session: " + JSON.stringify(FB.getSession()));
}
function getLoginStatus() {
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
alert('logged in');
} else {
alert('not logged in');
}
});
}
var friendIDs = [];
var fdata;
function logout() {
FB.logout(function(response) {
alert('logged out');
window.location.replace("#login");
});
}
function login() {
FB.login(
function(response) {
if (response.authResponse) {
alert('logged in');
FB.api('/me', function(me) {
if (me.id) {
localStorage.id = me.id;
localStorage.email = me.email;
localStorage.name = me.name;
window.location.replace("#home");
}
else {
alert('No Internet Connection. Click OK to exit app');
navigator.app.exitApp();
}
});
} else {
alert('not logged in');
}
}, {
scope: "email"
});
}
document.addEventListener('deviceready', function() {
try {
//alert('Device is ready! Make sure you set your app_id below this alert.');
FB.init({
appId: "appid",
nativeInterface: CDV.FB,
useCachedDialogs: false
});
document.getElementById('data').innerHTML = "";
} catch (e) {
alert(e);
}
}, false);
use login() to login . Enjoy!!
I successfully made an app which can log into facebook by using the phonegap-facebook-plugin and by building my cordova/phonegap project locally.
I made a new cordova project and added the android platform for this project, following the instructions here: http://docs.phonegap.com/en/3.4.0/guide_overview_index.md.html#Overview
In doing this I discovered I had made my previous project using an older cordova version (3.1) un-intentionally and that I hadn't installed the cordova command line interface. There may have been other issues with the way I made my first project.
I then added the phonegap-facebook-plugin found here: https://github.com/phonegap/phonegap-facebook-plugin using this command (from my project location):
cordova plugin add https://github.com/phonegap/phonegap-facebook-plugin.git --variable APP_ID="xxxxxxxxxxxxx" --variable APP_NAME=“xxxxxxxx”
(replacing APP_ID value with my facebook app id and APP_NAME value with my app's namespace).
I then replaced my index.html with the example index file found at the phonegap-facebook-plugin github page + /blob/master/example/Simple/index.html (replacing the app_id value with my app id).
I then ran the app straight to my android device using:
cordova run android
In this app, I'm able to use the interface provided by the example to login, post to my own or friends' walls etc. Using this new project (with updated cordova version) I may be able to use phonegap build but I haven't tried yet.
Thanks to Dato' Mohammad Nurdin for the suggestion to use this plugin.