[SOLVED] Check Internet Connection

Questions
1

Hello everybody,
I know this is not a Framework7 related question really but I couldn’t resolve this and I was wondering if someone had to do the same thing as me.
I need to check if user has internet connection before making a request and let him know.

I have a F7/Cordova project.
I have had installed the cordova plugin: cordova-plugin-network-information.

The code that I have below it works but only in app.js.

document.addEventListener("offline", onOffline, false);

function onOffline() {
  var networkState = navigator.connection.type;
  console.log("networkState:"+networkState);
}

function internetConnection() {
  var networkState = navigator.connection.type;
   console.log("networkState:"+networkState);
   isConnected = networkState !== Connection.NONE;

  return isConnected;
}

I need to make it work on my pages, where I have the requests.

For example the login.f7.html page.
I tried to add those functions inside login.f7.html but I get error:

Connection is not defined

I also tried to make the functions global with window but didn’t work.

Anything will be helpful.

2

This being cordova specific, it won’t work in a browser unless you have installed the browser platform.
A quick solution here would be to:
wrap all your native code (read cordova code) in one block like below:

if(window.cordova){
//cordova specific code here
}

If the app runs in a browser, all your calls to the server won’t be successful because 'cordova' doesn’t exist on the 'window' object.
However, if you test this in an emulator or real phone, then it will work.

var networkState = navigator.connection.type; - This is, for example, Cordova specific code from the network plugin, it needs an appropriate environment to actually work.

3

Right, I’m testing this on Android mobile. I just need it to work on Android not Browser.

The thing is that I have code in each html pages. For example 'login.f7.html', 'home.f7.html', etc. and I don’t know how to use it inside this methods.
Like this:

<script>
export default {
  methods: {
    login: function() {
      var urlLogin = url;

      app.request.get(urlLogin, function(data) {
        //...
      });
    }
  },
  on: {
    pageInit() {
    // ...
    }
  }
}
</script>
4

Another answer in this forum. Just in case.

5

Yes, already readed that. I already have installed the plugin.
Thanks anyway!

6

Hello @luis_snk !! I received that error a few months ago, the plugin cordova-plugin-network-information only provides functionality to control the state of the network when the device connects to any network or when it disconnects from that, however, if it is necessary to know If the device is connected and has Internet communication, for example, you must make a request to some site like www.google.com, and if this is not successful, then your device is not connected to the Internet. Maybe this is not the best way, but at this moment it works for me!
Blessings !!

7

Doesn’t sound bad!
Thanks for your reply. I’ll have that in mind for the future.
For now I could solve the problem.

I discovered that it’s important to call the document.addEventListener("online", onOnline, false) and the document.addEventListener("offline", onOffline, false) inside deviceready.
Like this:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  document.addEventListener("online", onOnline, false);
  document.addEventListener("offline", onOffline, false);
}

Then I declared the onOnline and onOffline functions with the window prefix like this:

window.onOnline = function() {
  alert("onOnline");
};

And could access them on my 'page.f7.html' pages.

8

It doesn’t require any cordova plugin, there is a native JS api that allows to detect whether you online or not https://developer.mozilla.org/ru/docs/Web/API/NavigatorOnLine/onLine

1 Like
9

Maybe too late but
don’t use networkState==Connection.NONE
use instead: networkState==“Connection.NONE”

Connection.NONE is string so if you dont handle as string F7 return variable error.