Hello there,
Trying to use Capacitor network plugin in a website to detect connection type.
So first tried it with a test project, index.html with a JS file.
import {Network} from ‘@capacitor/network’;
const log = document.querySelector(‘#log’);
Network.addListener(‘networkStatusChange’, status => {
console.log(‘Network status changed’, status);log.innerHTML += `Network status changed:<br />Connected: ${status.connected === true ? 'connected' : 'offline'} <br />Type: ${status.connectionType}<br /><hr />`;
});
const logCurrentNetworkStatus = async () => {
const status = await Network.getStatus();console.log('init of network status', status); log.innerHTML += `Network status onload:<br />Connected: ${status.connected === true ? 'connected' : 'offline'} <br />Type: ${status.connectionType}<br /><hr />`;
};
window.document.addEventListener(“DOMContentLoaded”, async function (event) {
log.innerHTML =DOMContentLoaded<br />
;logCurrentNetworkStatus();
});
When going with my phone to the page, it shows the connection type correct (wifi or cellular). Changing to another connection (wifi > cellular or cellular > wifi) and the innerHTML does not get updated. In Chrome using the throttle in dev tools, it’s also not working.
But when you do (in Chrome) Wifi > Offline > 3g or 3g > offline > Wifi then it works.
I would like to detect also the wifi to 3g (cellular) or 3g to wifi change