Building Android applications that deliver a seamless experience, even without reliable internet connectivity, demands an offline-first approach. Jetpack Compose simplifies creating these robust, responsive apps. This article explores how to build effective offline-first architectures using Jetpack Compose, complete with detailed explanations and practical examples.

Understanding Offline-First Architecture

An offline-first approach ensures your app provides consistent performance and user experience regardless of network availability, prioritizing local data storage, background synchronization, and seamless state management.

Core Components of Offline-First Architecture

• Local Database (Room)
• Data Synchronization Layer
• Repository Pattern
• ViewModel and UI State Handling
• WorkManager for Background Tasks

1. Implementing a Local Database with Room

Room simplifies offline data management by abstracting SQLite.

Setup:

implementation "androidx.room:room-runtime:2.6.1"
kapt "androidx.room:room-compiler:2.6.1"

Defining an Entity:

@Entity(tableName = "notes")
data class Note(
    @PrimaryKey(autoGenerate = true) val id: Int = 0,
    val title: String,
    val content: String,
    val timestamp: Long
)

This represents the data structure stored locally.

Creating a DAO:

@Dao
interface NoteDao {
    @Query("SELECT * FROM notes ORDER BY timestamp DESC")
    fun getAllNotes(): Flow<List<Note>>

    @Insert(onConflict = OnConflictStrategy.REPLACE)
    suspend fun insertNote(note: Note)
}

DAO methods provide efficient, asynchronous interactions with the local database.

Defining the Database:

@Database(entities = [Note::class], version = 1)
abstract class AppDatabase : RoomDatabase() {
    abstract fun noteDao(): NoteDao
}

2. Data Synchronization Layer

Data synchronization maintains consistency between local and remote data sources. This is usually handled through the Repository pattern.

Repository Pattern (Detailed Explanation)

A repository abstracts your data logic, managing interactions with both local and remote data sources. It ensures immediate access to local data, with asynchronous synchronization to the server.

class NoteRepository(private val dao: NoteDao, private val apiService: ApiService) {

// Immediate local data access
    val notes: Flow<List<Note>> = dao.getAllNotes()
    // Background synchronization
    suspend fun refreshNotes() {
        try {
            val remoteNotes = apiService.getNotes()
            remoteNotes.forEach { dao.insertNote(it) }
        } catch (e: Exception) {
            // Handle network or parsing errors appropriately
        }
    }
}

3. ViewModel and UI State Management

ViewModel bridges your Repository and UI components, providing lifecycle-aware data streams.

class NotesViewModel(private val repository: NoteRepository) : ViewModel() {

// Expose Flow data as StateFlow for Compose UI
    val notes = repository.notes.stateIn(
        viewModelScope,
        SharingStarted.WhileSubscribed(5000),
        emptyList()
    )
    init {
        viewModelScope.launch {
            repository.refreshNotes() // Initial data fetch
        }
    }
}

Here, stateIn efficiently converts the data stream into Compose-friendly state.

4. Building the UI with Jetpack Compose

Compose automatically reacts to state updates, ensuring real-time UI synchronization.

@Composable
fun NotesScreen(viewModel: NotesViewModel) {
    val notes by viewModel.notes.collectAsState()

    LazyColumn {
        items(notes) { note ->
            NoteItem(note)
        }
    }
}

@Composable
fun NoteItem(note: Note) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = note.title, style = MaterialTheme.typography.titleMedium)
        Text(text = note.content, style = MaterialTheme.typography.bodyMedium)
    }
}

Compose’s declarative nature updates UI components efficiently whenever underlying data changes.

5. Scheduling Background Sync with WorkManager

WorkManager handles periodic synchronization tasks reliably in the background.

Worker Definition (Explained):

class SyncWorker(context: Context, params: WorkerParameters) : CoroutineWorker(context, params) {
    override suspend fun doWork(): Result {
        return try {
            val repository = ... // Obtain via DI (e.g., Hilt)
            repository.refreshNotes()
            Result.success()
        } catch (e: Exception) {
            Result.retry()
        }
    }
}

CoroutineWorker simplifies handling asynchronous network tasks.

Scheduling the Worker:

val syncRequest = PeriodicWorkRequestBuilder<SyncWorker>(1, TimeUnit.HOURS).build()
WorkManager.getInstance(context).enqueueUniquePeriodicWork(
    "sync_notes",
    ExistingPeriodicWorkPolicy.KEEP,
    syncRequest
)

Unique periodic work prevents redundant sync operations.

Handling Network Status Gracefully

Provide clear UI feedback regarding network availability:

@Composable
fun ConnectivityStatus() {
    val connectivityManager = LocalContext.current.getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager
    val networkInfo = connectivityManager.activeNetworkInfo
    val isConnected = networkInfo?.isConnectedOrConnecting == true

    if (!isConnected) {
        Text("Offline mode", color = Color.Red)
    }
}

This article was previously published on proandroiddev.com.