feat: use capacitor plugin for network status

Author: martinkaintas

android/app/capacitor.build.gradle

@@ -15,6 +15,7 @@ dependencies {
     implementation project(':capacitor-clipboard')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-network')
     implementation project(':capacitor-share')
     implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')

android/capacitor.settings.gradle

@@ -20,6 +20,9 @@ project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-keyboard'
 project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android')
 
+include ':capacitor-network'
+project(':capacitor-network').projectDir = new File('../node_modules/@capacitor/network/android')
+
 include ':capacitor-share'
 project(':capacitor-share').projectDir = new File('../node_modules/@capacitor/share/android')
 

package-lock.json

@@ -45,6 +45,7 @@
     "@capacitor/haptics": "5.0.2",
     "@capacitor/ios": "5.0.4",
     "@capacitor/keyboard": "5.0.2",
+    "@capacitor/network": "^5.0.6",
     "@capacitor/share": "^5.0.5",
     "@capacitor/splash-screen": "^5.0.6",
     "@capacitor/status-bar": "5.0.2",

package.json

@@ -1,14 +1,29 @@
 import { computed, ref } from 'vue';
+import { Network } from '@capacitor/network';
+import { IS_MOBILE_APP } from '@/constants';
 
 let isConnectionStatusWatched = false;
 const isOnline = ref(window.navigator.onLine);
 
 export function useConnection() {
+  if (IS_MOBILE_APP && !isConnectionStatusWatched) {
+    Network.getStatus().then((status) => {
+      isOnline.value = status.connected;
+    });
+  }
+
   function watchConnectionStatus() {
     if (!isConnectionStatusWatched) {
       isConnectionStatusWatched = true;
-      window.addEventListener('online', () => { isOnline.value = true; });
-      window.addEventListener('offline', () => { isOnline.value = false; });
+
+      if (IS_MOBILE_APP) {
+        Network.addListener('networkStatusChange', (status) => {
+          isOnline.value = status.connected;
+        });
+      } else {
+        window.addEventListener('online', () => { isOnline.value = true; });
+        window.addEventListener('offline', () => { isOnline.value = false; });
+      }
     }
   }