How to check internet connection with SwiftUI

Checking for internet connection is a vital part in many apps, today I’ll show how to do it using the class NWPathMonitor from the Apple Network framework. Let’s start my idea is create a very simple app that shows the internet connection status in realtime. First step is create a Observable class, I called this NetworkMonitor:

import Foundation
import Network

@Observable
final class NetworkMonitor {
    private let networkMonitor = NWPathMonitor()
    private let workerQueue = DispatchQueue(label: "Monitor")
    var isConnected = false
    
    init() {
        networkMonitor.pathUpdateHandler = { path in
            self.isConnected = path.status == .satisfied
        }
        networkMonitor.start(queue: workerQueue)
    }
}

The code is simple, we have an instance of the NWPathMonitor class that is used to track network path changes. DispachQueue is used to handle network monitoring operations. The label parameter specifies the name of the dispatch queue, so you can use whatever name you want. isConnected is a public property that will be used to check the internet connection in our view.

Than we have the constructor that is used to set network monitoring functionality. networkMonitor.pathUpdateHandler = { path in ... }: This line sets a closure as the pathUpdateHandler property of the networkMonitor. This closure is called whenever there is an update to the network path. It takes a parameter path, which represents the current network path.

self.isConnected = path.status == .satisfied: Inside the closure, the isConnected property is updated based on the status property of the path. If the status is .satisfied, it means that the device is connected to the network, so isConnected is set to true. Otherwise, it is set to false.

networkMonitor.start(queue: workerQueue): Finally, the start(queue:) method of networkMonitor is called to begin monitoring the network path.

Second step is decide how you will use the NetworkMonitor, I chose use it as an Environment object if you don’t know what it is, take a look at this other article that I wrote. Here how I set it up:

import SwiftUI

@main
struct HowToCheckInternetConnectionSwiftUIApp: App {
    @State private var networkMonitor = NetworkMonitor()
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environment(networkMonitor)
        }
    }
}

The last part is the view that is very simple there’s just a VStack with 2 Text and 1 image that changes according the internet connection status:

import SwiftUI

struct ContentView: View {
    @Environment(NetworkMonitor.self) private var newtworkMonitor
    
    var body: some View {
        VStack(spacing: 20) {
            Text("Internet status:")
                .font(.title)
            
            Image(systemName: newtworkMonitor.isConnected ? "wifi" : "wifi.slash")
                    .font(.title)
                    .foregroundStyle(newtworkMonitor.isConnected ? .green : .red)
                
            Text(newtworkMonitor.isConnected ? "Connected" : "Disconnected")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundStyle(newtworkMonitor.isConnected ? .green : .red)
            }
        }
    
}

#Preview {
    ContentView()
        .environment(NetworkMonitor())
}

You can test it using the canvas or simulator disabling your computer network, but it isn’t very reliable according my tests, so is better test it with a real device.

That’s it for today, the project I created for the article can be found here. I hope it were useful for you, give me a clap if you like and follow me to not miss the next articles. Happy coding!