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
Related
I have an application made with Ionic 2, The work flow is like this
Case A . When user is using app for the first time
User Logs in (loading is shown)
When successfully logged in loading window is hidden and user is forwarded to Dashboard page.
In dashboard page items are loaded via ajax request.
Case B. When user is already logged in before
The first screen is Dashboard and items are loaded via ajax request.
Problem
In case A, when user logs in and forwarded to DashboardPage, the loading screen doesn't gets dismissed. Sometimes it gets dismissed but most of the time it doesnot? Is this an ionic bug or am I doing something wrong??
Here is my DashboardPage
//imports here
export class DashboardPage {
public loadingmsg: any;
public ajaxRequest: any;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private webservice: WebService,
private loadingCtrl: LoadingController
)
{
this.loadDashboardContents();
}
loadDashboardContents(){
//other codes
this.loadingmsg = this.loadingCtrl.create({
content:"Loading contents, please wait..."
});
this.loadingmsg.present();
this.ajaxRequest = this.webservice.getDashboardContents(params).subscribe(data => {
this.loadingmsg.dismiss().then(()=>{
//other codes to save retrieved data to localstorage.
});
});
}
}
UPDATE
The login method from login page
loginUser(){
this.loading=this.loadingctrl.create({
content:"Logging in, please wait..."
});
this.loading.present();
this.ajaxRequest = this.webservice.loginUser(params).subscribe(data => {
this.loading.dismiss();
if(data.status =="ok"){
this.navctrl.push(DashboardPage).then(()=>{
const index = this.viewCtrl.index;
this.navctrl.remove(index);
});
}else{
//show error alert
}
}, err =>{
this.loading.dismiss();
});
}
My Ionic and cordova version information
Ionic Framework: 3.5.0
Ionic App Scripts: 1.3.9
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.10.3
OS Platform: Windows 10
Cordova Version: 6.5.0
I am currently using loading in my project and it works well in all case. To ensure loading will always dismiss you need to add some code:
1. duration, dismissOnPageChange
let loading = this.loadingCtrl.create({
content: "",
duration: 5000, //ms
dismissOnPageChange: true
})
2. dissmis when ajax call success or error:
.subscribe(success=>{
//some code
loading.dismiss();
},error=>{
//some code
loading.dismiss();
})
It may be due to the this reference inside your subscribe method. I would try declaring loadingmsg locally and removing this.
loadDashboardContents(){
//other codes
let loadingmsg = this.loadingCtrl.create({
content:"Loading contents, please wait..."
});
loadingmsg.present();
this.ajaxRequest = this.webservice.getDashboardContents(params).subscribe(data => {
loadingmsg.dismiss().then(()=>{
//other codes to save retrieved data to localstorage.
});
});
}
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');
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.
I'm already created cordova plugin and already used in Ionic 1, its worked. Then I tried to use it in Ionic 2 but I don't really know how to call that plugin. I follow the step from here to create my own plugin. And this is what i did:
plugin.xml
<name>myPlugin</name>
<js-module src="www/myPlugin.js" name="myPlugin">
<clobbers target="myPlugin" />
</js-module>
myPlugin.js
module.exports = {
myFunction: function (success, failure) {
cordova.exec(success, failure, "myPlugin", "myFunction", []);
}
};
hello-ionic.ts
import { Component } from '#angular/core';
declare var cordova: any;
#Component({
selector: 'page-hello-ionic',
templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
constructor() {
}
click() {
if (typeof cordova !== 'undefined') {
cordova.plugins.myPlugin.myFunction();
}
}
}
But unfortunately it return me an error "Undefined myFunction" in hello-ionic.ts.
Here is what I did.
hello-ionic.ts
import { Component } from '#angular/core';
declare var myPlugin: any;
#Component({
selector: 'page-hello-ionic',
templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
constructor() {
}
click() {
myPlugin.myFuntion(
(data) => {
console.log(data);
},
(err) => {
console.log(err);
});
}
}
declare var myPlugin: any; , myPlugin name I get from <clobbers target="myPlugin" />.
Note: Need to run the project in device only.
Following tutorial is a good resource to learn how to create custom cordova plugin :
https://taco.visualstudio.com/en-us/docs/createplugintutorial/
I have followed this tutorial to create multiple custom plugins and those are working fine in Ionic2.
One more thing to point out that the tutorial has not mentioned that:
You have to add your custom plugin in your ionic 2 project using following command:
ionic plugin add "folder path of your custom plugin"
Updated:
In your plugin.xml file, you have set "myPlugin" as target in clobbers tag.
So you should call your function as followed
window.myPlugin.myFunction();
Tip: Whenever you use custom plugin created by you(or someone else), inspect the application using Chrome Developer tools. In console tab of developer tools, you can inspect the window and other available objects and can find out correct way to call plugin's methods.
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.