hi guys , I am trying to learn how to use cordova-plugin-network-information, I have followed ionic 2 native docs for it:
let disconnectSubscription = Network.onDisconnect().subscribe(() => {
console.log('network was disconnected!');
});
let connectSubscription = Network.onConnect().subscribe(() => {
console.log('network connected!');
setTimeout(() => {
if (Network.type === 'wifi'){
console.log('we got a wifi connection.');
}
}, 3000);
});
}
but there is error Network.type property type does not exist of typeof Network
Also, on how to add event listener and how can I combine this with a service.ts when subscribing to a service whether the device is connected in order to retrieve data from the server!
in vanilla cordova its like this document.addEventListener("offline", onOffline, false);
how to do this in ionic ?
can someone provide a better example on how to learn this!
I have solved the problem…it was becuz ionic-native version… i upgraded to 2.2.16 which is the latest…it started working fine
this my code now :
constructor(...........................) {
local.getLocalData().then((res) => { ///// getting API info that was called from a service and stored in storage
this.watchforDisconnect(); ///// call method for watching disconnection
this.watchforConnection(); ///// call method for watching for connection
this.jobs = res;
});
let disconnect = this.watchforDisconnect();
disconnect.unsubscribe();
let connected = this.watchforConnection();
connected.unsubscribe();
}
method: watchfordisconnect()
watchforDisconnect(){
let disconnectSubscription = Network.onDisconnect().subscribe(() => {
let toast = this.toastCtrl.create({
message: 'no connection available!',
duration: 2500,
position: 'top'
});
toast.present();
});
return disconnectSubscription; ///// returning value to be used for unsubscribe
}
method: watchforConnection:
watchforConnection(){
let connectSubscription = Network.onConnect().subscribe(() => {
let toast = this.toastCtrl.create({
message: 'we\'re back online',
duration: 2500,
position: 'top'
});
toast.present();
setTimeout(() => { //////// i wrote this just for testing
if (Network.type === 'wifi'){
this.connectionType = "we've got wifi";
} else if (Network.type === '2g'){
this.connectionType = "we've got 2g connection";
} else if (Network.type === '3g'){
this.connectionType = "we've got 3g connection";
} else if (Network.type === '4g'){
this.connectionType = "we've got 4g connection";
} else if (Network.type === 'cellular'){
this.connectionType = "we've got cellular connection";
} else if (Network.type === 'unknown'){
this.connectionType = "unknown network";
} else if (Network.type === 'ethernet'){
this.connectionType = "we've got ethernet connection";
} else if (Network.type === 'none'){
this.connectionType = "none";
} else {
this.connectionType = "type is empty bro";
}
}, 3000);
});
return connectSubscription;
}
The reason I posted this perhaps you guys have some suggestions on a better way to do this or just leave it like this , its clear that I am trying to keep watch for Internet availability. and even though this code is written in one of the components. it seems to trigger the toasts even when I’m navigating through different pages/components in the app.
Hi there… I have come across a different problem was wondering if you guys can help
from the example that i have posted… as you can see the methods this.watchforDisconnect() and this.watchforConnection() are placed in the constructor of a component. And each method consists of a toast to be presented.
When I navigate to another component/Page in the menu and back… (when disconnecting or connecting to the internet) the toast appears quickly TWICE… or sometimes if I navigate more that twice , the toasts appear the same number of navigation… this I think because something is cached / the component itself is cached and executed more than once…I don’t know how to solve this problem
I tried placing the codes for watching the connection in the App level app.component.ts in its constructor… but every time i launch the app , the toast from the method watchforConnection executes , when its not supposed to.
a) when user launches the app and the device is already online, it shouldn’t notify that he is online or anything of that sort…and only notify when disconnection occurs , and then reconnection notification should occur when the device is back online.
b) the second problem is the placement of watch connection service… it should be of course in App level and what kind of lifecycle hook or conditions should it be put upon to work properly…without being cached or executed useless number of times
Hi you could help me try to do it, but I do not understand very well and connectionType is not well that is, could you help me with the complete ts from start to finish ?, I do not get error but it does not show me anything either.
I have read through the docs and I am struggling to get this to work. The docs says browser’s are supported, so testing, I should see something when I console this.network.type correct? All I see is null being returned. What am I missing?