Offline Data Caching in SwiftUI: API Integration with Local Database (Realm)


In today’s mobile-first world, users expect your app to work even without an internet connection. Whether your app shows product listings, news feeds, or profile data, caching API responses locally is a must-have. In this blog post, we’ll explore how to:

✅ Fetch data from an API
✅ Save it to a local database (using Realm)
✅ Detect internet connectivity
✅ Display data from cache when offline

All using SwiftUI 🚀

🧱 Prerequisites

  • Basic knowledge of SwiftUI
  • Xcode installed (15+ recommended)
  • Add RealmSwift using Swift Package Manager

🧩 Project Architecture

+------------------------+
|  Network Layer (API)   |
+------------------------+
           |
           v
+------------------------+
| Local DB (RealmSwift)  |
+------------------------+
           |
           v
+------------------------+
|   SwiftUI UI Layer     |
+------------------------+

🌐 Step 1: Setup Realm Models

We’ll model the API data and create a Realm version of it.

API Model

struct Product: Codable {
    let id: Int
    let name: String
    let price: Double
}

Realm Object

import RealmSwift

class ProductObject: Object, ObjectKeyIdentifiable {
    @Persisted(primaryKey: true) var id: Int
    @Persisted var name: String
    @Persisted var price: Double
}

🔌 Step 2: Network Manager

Use URLSession to fetch data and store it.

class NetworkManager {
    static let shared = NetworkManager()

func fetchProducts(completion: @escaping ([Product]) -> Void) {
        guard let url = URL(string: "https://api.example.com/products") else { return }
        URLSession.shared.dataTask(with: url) { data, _, _ in
            guard let data = data else { return }
            do {
                let products = try JSONDecoder().decode([Product].self, from: data)
                completion(products)
            } catch {
                print("Decoding failed: \(error)")
            }
        }.resume()
    }
}

🗂 Step 3: Save and Load from Realm

class ProductDBManager {
    let realm = try! Realm()

func save(products: [Product]) {
        try! realm.write {
            for p in products {
                let obj = ProductObject()
                obj.id = p.id
                obj.name = p.name
                obj.price = p.price
                realm.add(obj, update: .modified)
            }
        }
    }
    func getAll() -> [ProductObject] {
        return Array(realm.objects(ProductObject.self))
    }
}

📡 Step 4: Monitor Internet Connection

Use Apple’s Network framework:

import Network

class NetworkMonitor: ObservableObject {
    private var monitor = NWPathMonitor()
    private let queue = DispatchQueue(label: "InternetMonitor")
    @Published var isConnected = true
    init() {
        monitor.pathUpdateHandler = { path in
            DispatchQueue.main.async {
                self.isConnected = (path.status == .satisfied)
            }
        }
        monitor.start(queue: queue)
    }
}

🧠 Step 5: ViewModel Logic

class ProductViewModel: ObservableObject {
    @Published var products: [ProductObject] = []

let network = NetworkManager.shared
    let db = ProductDBManager()
    func loadData(isConnected: Bool) {
        if isConnected {
            network.fetchProducts { [weak self] result in
                DispatchQueue.main.async {
                    self?.db.save(products: result)
                    self?.products = self?.db.getAll() ?? []
                }
            }
        } else {
            products = db.getAll()
        }
    }
}

🖼️ Step 6: SwiftUI View

struct ProductListView: View {
    @StateObject private var viewModel = ProductViewModel()
    @StateObject private var monitor = NetworkMonitor()

var body: some View {
        NavigationView {
            List(viewModel.products) { product in
                VStack(alignment: .leading) {
                    Text(product.name).font(.headline)
                    Text("₹\(product.price, specifier: "%.2f")")
                        .foregroundColor(.secondary)
                }
            }
            .navigationTitle("Products")
            .onAppear {
                viewModel.loadData(isConnected: monitor.isConnected)
            }
        }
    }
}

🎯 Final Output

With this setup:

  • When the user opens the app:
  • If online, fetch from API → save to Realm → show in UI
  • If offline, load directly from Realm and show cached data

📌 Conclusion

Offline support improves reliability and user trust. By combining SwiftUI + URLSession + Realm + Network framework, we ensure a seamless experience with or without internet.

Comments

Post a Comment

Popular posts from this blog

Using Core ML with SwiftUI: Build an AI-Powered App

Image
  Artificial Intelligence (AI) is revolutionizing mobile app experiences, and with  Core ML , Apple makes it easy to integrate machine learning into iOS applications. When combined with  SwiftUI , you can create powerful, AI-driven applications with a modern and interactive UI. In this guide, we’ll explore how to integrate  Core ML  into a SwiftUI app, process images, and display real-time AI-powered results. What is Core ML? Core ML is Apple’s machine learning framework that allows developers to integrate trained models into iOS apps for tasks like  image recognition, text analysis, and object detection . Key Benefits of Core ML: ✅ Optimized for Apple hardware (fast and efficient on-device processing) ✅ Supports popular ML models like Vision, Natural Language Processing (NLP), and Sound Analysis ✅ Works  offline  without needing an internet connection ✅ Ensures privacy by running models on-device Step 1: Get a Pre-Trained Core ML Model You can do...
Read more

Dependency Injection in iOS with SwiftUI

Image
  A Beginner-Friendly Guide to Building Modular, Testable Apps Dependency Injection (DI) is a powerful design pattern that helps you write  more modular, testable, and maintainable code . In SwiftUI, while the framework encourages composition and simplicity, adopting DI can elevate your architecture — especially as your app grows. In this post, you’ll learn: What Dependency Injection is Why it’s useful in SwiftUI apps Different DI techniques in Swift Real-world SwiftUI examples with DI Best practices and when to use DI 🧠 What is Dependency Injection? Dependency Injection  means providing an object with its dependencies from the outside instead of creating them internally. Think of it this way: instead of a class  making  its own tools, it is  handed  the tools it needs. Without DI: class UserViewModel { private var userService = UserService () } With DI: class UserViewModel { private var userService: UserService init ( userService : U...
Read more

Infinite Scrolling in SwiftUI with Real-Time Pagination

Image
Pagination is essential when dealing with large datasets — like a list of users, articles, or images fetched from a server. Instead of loading everything at once, we load content in chunks, improving performance and user experience. In this blog post, you’ll  master how to implement infinite scrolling in SwiftUI  using a real-time pagination example. By the end, you’ll have a reusable, modern, and reactive solution that’s perfect for production apps. 🧠 What We’ll Build We’re going to build a paginated list of posts fetched from a dummy API. As the user scrolls down, more content will load automatically. Tools: ✅ SwiftUI ✅ Async/Await ✅  @StateObject  and  @Published  for state ✅ Dummy API: jsonplaceholder.typicode.com 🧱 Step 1: Define the Model struct Post : Identifiable , Codable { let id: Int let title: String let body: String } 🔌 Step 2: Pagination Service We’ll create a service that fetches data page by page. class PostService { ...
Read more