{"id":2982,"date":"2026-07-05T05:29:17","date_gmt":"2026-07-04T21:29:17","guid":{"rendered":"http:\/\/www.1amalerei.com\/blog\/?p=2982"},"modified":"2026-07-05T05:29:17","modified_gmt":"2026-07-04T21:29:17","slug":"how-to-check-the-network-status-in-a-capacitor-app-4727-d477be","status":"publish","type":"post","link":"http:\/\/www.1amalerei.com\/blog\/2026\/07\/05\/how-to-check-the-network-status-in-a-capacitor-app-4727-d477be\/","title":{"rendered":"How to check the network status in a Capacitor app?"},"content":{"rendered":"

Hey there! As a Capacitor supplier, I often get asked about how to check the network status in a Capacitor app. It’s a crucial feature, especially when you’re building an app that relies on internet connectivity for things like data syncing, real – time updates, or accessing cloud – based services. In this blog, I’ll walk you through the steps and share some tips on making it happen smoothly. Capacitor<\/a><\/p>\n

<\/p>\n

Why Checking Network Status Matters<\/h3>\n

Before we dive into the how – to, let’s quickly talk about why it’s so important. When your app tries to perform an action that requires an internet connection, like sending a user’s data to a server, and there’s no network available, it can lead to a really bad user experience. The app might freeze, crash, or just give an unhelpful error message. By checking the network status beforehand, you can give users a heads – up, offer alternative actions, or gracefully handle the lack of connectivity.<\/p>\n

Prerequisites<\/h3>\n

First off, you need to have a basic Capacitor project up and running. If you’re new to Capacitor, it’s a cross – platform native runtime that makes it easy to build web apps and turn them into native iOS and Android apps. You’ll also need Node.js and npm installed on your machine. If not, head over to the official Node.js website and get them set up.<\/p>\n

Installing the Network Plugin<\/h3>\n

Capacitor has a great network plugin that makes it super easy to check the network status. To install it, open up your terminal and navigate to your project directory. Then run the following command:<\/p>\n

npm install @capacitor\/network\nnpx cap sync\n<\/code><\/pre>\n
The npm install<\/code> command adds the network plugin to your project’s dependencies, and npx cap sync<\/code> updates your native projects (iOS and Android) to include the newly installed plugin.<\/p>\n
Checking the Network Status in Code<\/h3>\n
JavaScript\/TypeScript<\/h4>\n
Once the plugin is installed, you can start using it in your code. Here’s a simple example of how to check the network status in JavaScript or TypeScript:<\/p>\n
import { Plugins } from '@capacitor\/core';\nconst { Network } = Plugins;\n\nasync function checkNetworkStatus() {\n    try {\n        const status = await Network.getStatus();\n        console.log('Network status:', status);\n\n        if (status.connected) {\n            console.log('You are connected to the network!');\n            \/\/ Here you can perform actions that require internet\n        } else {\n            console.log('You are not connected to the network.');\n            \/\/ You might want to show a message to the user or disable certain features\n        }\n\n    } catch (error) {\n        console.error('Error getting network status:', error);\n    }\n}\n\ncheckNetworkStatus();\n<\/code><\/pre>\n
In this code, we first import the Network<\/code> plugin from @capacitor\/core<\/code>. Then we define an asynchronous function checkNetworkStatus<\/code> that calls Network.getStatus()<\/code>. This function returns a promise that resolves with an object containing information about the network status, like whether the device is connected and the type of connection (WiFi, cellular, etc.).<\/p>\n
React Example<\/h4>\n
If you’re using React in your Capacitor app, here’s how you can integrate the network check into a functional component:<\/p>\n
import React, { useEffect } from 'react';\nimport { Plugins } from '@capacitor\/core';\n\nconst { Network } = Plugins;\n\nconst NetworkStatusComponent = () => {\n    useEffect(() => {\n        const checkStatus = async () => {\n            try {\n                const status = await Network.getStatus();\n                if (status.connected) {\n                    console.log('Connected to the network!');\n                } else {\n                    console.log('Not connected to the network.');\n                }\n            } catch (error) {\n                console.error('Error getting network status:', error);\n            }\n        };\n\n        checkStatus();\n\n    }, []);\n\n    return (\n        <div>\n            {\/* You can add UI elements here to show the network status *\/}\n        <\/div>\n    );\n};\n\nexport default NetworkStatusComponent;\n\n<\/code><\/pre>\n
In this React example, we use the useEffect<\/code> hook to call the network status check when the component mounts.<\/p>\n
Listening for Network Changes<\/h3>\n
It’s not just about checking the network status once. You might also want to listen for changes in the network status, like when the user switches from WiFi to cellular data or loses connection altogether. The Network<\/code> plugin makes this easy too.<\/p>\n
import { Plugins } from '@capacitor\/core';\nconst { Network } = Plugins;\n\nconst networkStatusListener = Network.addListener('networkStatusChange', (status) => {\n    console.log('Network status changed:', status);\n    if (status.connected) {\n        console.log('Reconnected to the network!');\n        \/\/ You can do things like resume data syncing\n    } else {\n        console.log('Disconnected from the network.');\n        \/\/ Pause actions that require internet\n    }\n});\n\n\/\/ Don't forget to remove the listener when you're done\n\/\/ For example, in a React component's cleanup\nconst removeListener = () => {\n    networkStatusListener.remove();\n};\n<\/code><\/pre>\n
In this code, we use Network.addListener<\/code> to listen for the networkStatusChange<\/code> event. Whenever the network status changes, the callback function is called with the new status object.<\/p>\n
Handling Different Platforms<\/h3>\n
One of the great things about Capacitor is that it abstracts away a lot of the platform – specific differences. However, there are still some things to keep in mind.<\/p>\n
iOS<\/h4>\n
On iOS, the network status check works out of the box once you’ve installed and synced the plugin. But you need to make sure your app has the necessary privacy permissions if you’re using the network for things like location – based services.<\/p>\n
Android<\/h4>\n
On Android, the plugin also works well, but you need to add the appropriate permissions to your AndroidManifest.xml<\/code> file. You’ll need the ACCESS_NETWORK_STATE<\/code> permission to check the network status. You can add it like this:<\/p>\n
<uses - permission android:name="android.permission.ACCESS_NETWORK_STATE" \/>\n<\/code><\/pre>\n
Tips and Best Practices<\/h3>\n