Open Google Play using alert confirm button - ionic2

Can you explain me how to launch the Google Play app using the alert confirm button?
Here's the code:
let confirm = this.alertCtrl.create({
title: 'Nouvelle mise a jour disponible',
message: 'Version ameliorer de eLahiya disponible, voulez vous la telecharger?',
buttons: [
{
text: 'Plus tard',
handler: () => {
console.log('Disagree clicked');
}
},
{
text: 'Mise a jour',
handler: () => {
console.log('Agree clicked');
window.open("play.google.com/store/apps/details?id=<package_name>", '_system', 'location=yes')//
}
}
]
});
confirm.present();
I want my app to open my app's page on the playstore, how to do it?

this works perfectly for me:
window.open('market://details?id=your.package.name', '_system');
This is for Android though. For others:
IOS: itms-apps://itunes.apple.com/app/<appId>
Amazon: amzn://apps/android?p=<appPackageId>
Let me know if it works for you. Look into cordova-plugin-market as an alternative if that does not work.

Ionic native has a plugin to open an app's page in the market place. Here it is cordova-plugin-market
Use this command to install this plugin,
ionic plugin add cordova-plugin-market
npm install --save #ionic-native/market
Usage,
import { Market } from '#ionic-native/market';
constructor(private market: Market) { }
...
this.market.open('your.package.name');

Related

Ionic Deep linker view does not update on browser back button event

I have a PWA built with ionic deep linker. I have done a demo here https://stackblitz.com/edit/ionic-mee2ut?file=app%2Fcustomer%2Fcustomer.component.html where the browser back button doesn't work as expected.
Steps to reproduce
1.In Dashboard page click on edit button.It will navigate to customer
page(see URL.It is changed to /Customer/CustomerId).
2.In Customer page, you will see the customer info and other customers
list, there click edit from other customers list.This will open another
page.(see URL.It is changed to /Customer/CustomerId).
3.Click on browser back button u can see that the URL is changed but the
view is not updated.
If I repeat steps 1 & 2 then click on nav back button instead of browser button then it works correctly.Both the URL and the view gets updated.
Is there something I am doing wrong because the browser back button does not work as expected or this is issue of ionic framework.
This is how i navigate between views
EditCustomer(Customer: any) {
this.navCtrl.push('Customer', { Id: Customer.Id, Name: Customer.Name });
}
Can somebody please tell me a way how to resolve this issue?
I saw your code in the above url, you are passing id as param but not the name so, that is the reason url is changing but data is not reflected i modified your code in app.module.ts file please replace this code in your app.module.ts file
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: DashboardComponent, name: 'Dashboard', segment: 'Dashboard' },
{ component: CustomerComponent, name: 'Customer', segment: 'Customer/:Id/:Name' }
]
})
Please replace your app.module.ts with the following code
import { Component } from '#angular/core';
import { Platform, IonicApp, App } from 'ionic-angular';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = 'Dashboard';
constructor(private _app: App, platform: Platform, private _ionicApp: IonicApp,) {
platform.ready().then(() => {
this.setupBackButtonBehavior();
});
}
private setupBackButtonBehavior () {
// If on web version (browser)
if (window.location.protocol !== "file:") {
// Register browser back button action(s)
window.onpopstate = (evt) => {
//Navigate back
if (this._app.getRootNav().canGoBack())
this._app.getRootNav().pop();
};
}
}
}
I was able to use something like this:
let randomID = this.makeId(5); // random string id
this.navCtrl.push('path', {
eventID: eventID,
instituteID: instituteID,
randomID: randomID
}, {
id: `path/${eventID}/${instituteID}/${randomID}`
});
This "id" seems to fix it, but if you can go to the same page, then it requires a "random" value to separate each visit to that page.
#IonicPage({
name: 'path',
segment: 'path/:instituteID/:eventID/:randomID'
})
It looks like, by default, it uses the name of the page as an id for that view. If multiple views have same id => issue when using browser back/forward. That's where the random comes in, to separate multiple instances of the same page.

Push Notification in Ionic2

I am new to Ionic development. I have been using Ionic2 for my application and trying to add push notification (FCM) for the last couple of hours. However, I am stuck in adding push configuration. Here are the details:
"phonegap-plugin-push": "^2.0.0" is configured in my package.json file. Also native push plugin is "#ionic-native/push": "^4.3.1"
In config.xml, I have added <resource-file src="google-services.json" target="google-services.json" />. Also added <plugin name="phonegap-plugin-push" spec="^2.0.0" />.
3.Here is the code I am using in my main component file:
const options: PushOptions = {
android: {
topics: ['topic1']
},
ios: {
alert: 'true',
badge: true,
sound: 'false'
},
windows: {},
browser: {
pushServiceURL: 'http://push.api.phonegap.com/v1/push'
}
};
const pushObject: PushObject = this.push.init(options);
pushObject.on('notification').subscribe((notification: any) => {
if (notification.additionalData.foreground) {
let pushAlert = this.alertCtrl.create({
title: 'BrainCal Notification',
message: notification.message.title
});
pushAlert.present();
}
});
pushObject.on('registration').subscribe((registration: any) => {
//do whatever you want with the registration ID
});
pushObject.on('error').subscribe(error => alert('Error with Push plugin' + error));
It is deployed successfully in my Android phone. However, it return following error while opening the app first time:
"Error with Push plugin no senderID value given".
As per my understanding latest phone gap plugin does not require senderID as it uses Google-services.json file. Please advise.
remove your plugin ionic cordova plugin remove phonegap-plugin-push then install it with parameters like below
ionic cordova plugin add phonegap-plugin-push --variable SENDER_ID=HERE_YOUR_SENDER_ID

ionic2: network connectivity check during splash screen

I've been trying hard to figure out how to check for network connectivity while the splashscreen is being displayed.I've searched for the code in many places but most of those articles are outdated.
I followed the tutorial that's mentioned here:https://www.thepolyglotdeveloper.com/2016/01/determine-network-availability-in-an-ionic-2-mobile-app/
But then I found out that Network.connection is deprecated and has been replaced by Network.type on the ionic2 website.
So I've replaced the word connection with Network.type everywhere.
So I checked out the ionic2 website and found this code which I included in the home.ts file.
import {Network} from 'ionic-native';
checkConnection() {
//console.log("entrou");
//console.log(Network);
let disconnectSubscription = Network.onDisconnect().subscribe(() => {
console.log('network was disconnected :-( ')
});
disconnectSubscription.unsubscribe();
console.log("watch network");
console.log("Conexao" + Network.type);
let connectSubscription = Network.onConnect().subscribe(() => {
console.log('network connected!');
setTimeout(() => {
console.log('network status');
console.log(Network.type);
if (Network.type === 'WIFI') {
console.log('we got a wifi connection, woohoo!');
}
}, 3000);
});
console.log("Sub" + connectSubscription);
connectSubscription.unsubscribe();
}
here is my home.html file
`<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-buttton (click)="checkConnection()">Check Network</button>
</ion-content>`
I tried implementing the same code but doesn't work.
I want to know what is the exact code that I can use ?
What is that I need to import to use this code if it is the right one?
Also I want to know how to run it during the splashscreen ?
On the console I found these errors
"Native: tried calling Network.type, but the Network plugin is not installed.
Network plugin: 'ionic plugin add cordova-plugin-network-information'
But i've already installed the required plugin following that above command.I also installed "npm install ionic-native".
I reinstalled them on seeing this error but this still persists.
In your config.xml add the following:
<preference name="AutoHideSplashScreen" value="false" />
This will make the SplashScreen stay visible until you manually hide it.
Then in your app.component.ts do the following:
constructor(private platform: Platform) {
platform.ready().then(() => {
// Check the network stuff here and do what you need to do
if (Network.type == 'WIFI') console.log('We are on WIFI!');
else console.log('We aren't on WIFI');
// then hide the splash screen manually
SplashScreen.hide();
});
}
hi, make sure you have ionic-native to the latest version:
https://github.com/driftyco/ionic-native/blob/master/CHANGELOG.md
please see this for implementation:
https://forum.ionicframework.com/t/using-ionic-2-rc-4-native-network/75715/4
there is another problem associated with this , where on disconnect fires twice rather than only once:
IONIC 2 native Network.onDisconnect() running code twice
I hope this helps.... besides there is no need to check during splashscreen.... make a provider for check network status, and then call your new provider/service in app.component.ts
Oh and dont pay attention to the message:Native: tried calling Network.type, but the Network plugin is not installed.
Just make sure you have added it correctly: ionic plugin add cordova-plugin-network-information --save
reference from this -
https://ionicframework.com/docs/native/network/
install :
$ ionic cordova plugin add cordova-plugin-network-information
$ npm install --save #ionic-native/network
and put this code in app.component.ts
import { Network } from '#ionic-native/network';
constructor(private network: Network) { }
// watch network for a disconnect
let disconnectSubscription =
this.network.onDisconnect().subscribe(() => {
console.log('network was disconnected :-(');
});
// stop disconnect watch
disconnectSubscription.unsubscribe();
// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() =>
{
console.log('network connected!');
// We just got a connection but we need to wait briefly
// before we determine the connection type. Might need to wait.
// prior to doing any api requests as well.
setTimeout(() => {
if (this.network.type === 'wifi') {
console.log('we got a wifi connection, woohoo!');
}
}, 3000);
});
// stop connect watch
connectSubscription.unsubscribe();
and add code in to app.module.ts
import { Network } from '#ionic-native/network';
...
#NgModule({
...
providers: [
...
Network
...
]
...
})
export class AppModule { }`
Hope this will helpful.

Deeplink in Ionic 2 is not working

I am trying deeplinks with ionic 2 according to the procedure explained here, https://ionicframework.com/docs/v2/native/ionic-deeplinks/
First I added the plugin using,
ionic plugin add ionic-plugin-deeplinks --variable URL_SCHEME=http --variable DEEPLINK_HOST=cityknots.com
Then in my app.component.ts
export class MyApp {
rootPage = Wrapper;
constructor(platform:Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Deeplinks.route({
'/test': UserHome
}).subscribe((match) => {
console.log('Successfully routed', match);
}, (nomatch) => {
console.warn('Unmatched Route', nomatch);
});
});
}
}
I try to hit the url (http://cityknots.com/test in the ios simulator's browser (safari) after i've built and run the app, but nothing is happening. I expect the app should be launched and navigate to UserHome component. There is nothing in the console too related to this.

Ionic2 view not updated after FileReader load file

The development environment
cju:~/Projects/ionic2/i2ts $ ionic info
WARN: ionic.config.js has been deprecated, you can remove it.
Your system information:
Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.5
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.2
Xcode version: Xcode 7.3 Build version 7D175
The issue
I tried both on browser platform and ios phone. To see it on browser platform, do the following
ionic platform add brower
ionic run browser
On the browser, it starts with the "Hello Ionic" page. Click the 'Write to local file using cordova-plugin-file' button, on the back, "This is new text" will be written to a local file using cordova-plugin-file. Click the 'Read from file using cordova-plugin-file' button, the console log shows the file is read back. However, the view is not updated. Click any button again, the view will be updated with the new text.
I googled and found a related issue https://github.com/angular/zone.js/issues/137. That says FileReader in cordova-plugin-file is not zoned. But I am using "ionic-angular": "2.0.0-beta.6" in my project. Should not it include the fix already. Still I see the same issue 137 in my ionic2 project.
The code is at https://github.com/CharlesJu1/FileReaderNotZoned
Here is the hello-ionic.ts file.
import {Page} from 'ionic-angular';
declare var window: any;
declare var LocalFileSystem: any;
#Page({
templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {
showText: string = 'Initial text string';
writeText() {
var newText = 'This is new text';
function overWriteFile(fileEntry, dataObj) {
// Create a FileWriter object for our FileEntry.
fileEntry.createWriter(function(fileWriter) {
fileWriter.onwriteend = function() {
fileWriter.seek(0);
fileWriter.write(dataObj);
}
//truncate() will call onwriteend.
fileWriter.truncate(0);
});
}
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
console.log('file system open: ' + fs.name);
fs.root.getFile("newPersistentFile.txt", { create: true, exclusive: false }, function(fileEntry) {
console.log("fileEntry is file?" + fileEntry.isFile.toString());
overWriteFile(fileEntry, newText);
}, function(error) { });
}, function(error) { });
}
test() {
var that = this;
var update = function() {
that.showText = 'This is test text not from local file';
}
setTimeout(update, 1000);
}
readText() {
var that = this;
var readFile = function(fileEntry, readFileCb) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function() {
//this in the following points to fileEntry.file
console.log("Successful file read: " + this.result);
readFileCb(this.result);
};
reader.readAsText(file);
}, () => { console.log('Error reading file ') });
}
var readFileCb = function(fileContent: string) {
that.showText = fileContent;
console.log('readFileCb: ' + that.showText);
}
//check https://github.com/apache/cordova-plugin-file for details
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
console.log('file system open: ' + fs.name);
fs.root.getFile("newPersistentFile.txt", { create: false }, function(fileEntry) {
console.log("fileEntry is file?" + fileEntry.isFile.toString());
// fileEntry.name == 'someFile.txt'
// fileEntry.fullPath == '/someFile.txt'
readFile(fileEntry, readFileCb);
}, function(error) { });
}, function(error) { });
}
}
Here is the hello-ionic.html file.
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>
<ion-content padding class="getting-started">
<p>
{{showText}}
</p>
<button (click)="writeText()">
Write to local file using cordova-plugin-file
</button>
<br>
<button (click)="readText()">
Read from file using cordova-plugin-file
</button>
<button (click)="test()">
Set the text with a timer
</button>
</ion-content>
There were some known issues in beta-5 and beta-6 around Zones. A new beta should be out soon that resolves them, but in the meantime can you do these steps:
Import NgZone
Inject instance of NgZone
Wrap call where you want data binding to work in the NgZone instance's run method.
See an example here:
https://github.com/danbucholtz/ionic2-weight-tracker/blob/master/app/pages/photo-list/PhotoList.ts#L78
Thanks,
Dan