Compose WebView Part 12 | No internet screen

No Internet & Error Screen: When the app doesn’t get any internet connection, you can show error message on app screen “no internet connection” or any type of error message related to the problem.

This example demonstrates how do I load No internet Screen from asset directory into WebView in android.

Ref this link 

How to load assets files :

 https://www.boltuix.com/2022/07/compose-webview-part-4-offline.html

No internet UI screens : 

* Full screen dialog

https://www.boltuix.com/2022/07/no-internet-connection-ui-design.html

* Bottom dialog

https://www.boltuix.com/2022/07/no-internet-connection-ui-design_10.html

In our main activity, we are going to use web client object's onReceivedError override method to handle web errors & check the internet connection in our web view application

package com.blogspot.boltuix

import android.annotation.SuppressLint
import android.content.Context
import android.net.ConnectivityManager
import android.net.NetworkCapabilities
import android.os.Build
import android.os.Bundle
import android.view.ViewGroup
import android.webkit.*
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.runtime.*
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.viewinterop.AndroidView

var loadURL = "https://www.boltuix.com/"

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WebViewPage(loadURL)
        }
    }
}

@OptIn(ExperimentalComposeUiApi::class)
@SuppressLint("SetJavaScriptEnabled")
@Composable
fun WebViewPage(url: String){

    val mutableStateTrigger = remember { mutableStateOf(false) }

    AndroidView(
        factory = {
            WebView(it).apply {
                layoutParams = ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT
                )
                webViewClient = WebViewClient()

                // to play video on a web view
                settings.javaScriptEnabled = true

                webViewClient = object : WebViewClient() {

                    override fun onReceivedError(view: WebView?, request: WebResourceRequest?, error: WebResourceError?) {
                        super.onReceivedError(view, request, error)
                        loadURL = if(isOnline(context)){
                            "file:///android_asset/404.html" // general error message
                        } else{
                            "file:///android_asset/error.html" // no internet connection
                        }
                        mutableStateTrigger.value = true
                    }
                }

                loadUrl(url)
            }
        }, update = {
            it.loadUrl(url)
        })


    if (mutableStateTrigger.value) {
        WebViewPage(loadURL)
    }
}


fun isOnline(context: Context): Boolean {
    val connectivityManager = context.getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager

    // For 29 api or above
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
        val capabilities = connectivityManager.getNetworkCapabilities(connectivityManager.activeNetwork) ?: return false
        return when {
            capabilities.hasTransport(NetworkCapabilities.TRANSPORT_WIFI) ->    true
            capabilities.hasTransport(NetworkCapabilities.TRANSPORT_ETHERNET) ->   true
            capabilities.hasTransport(NetworkCapabilities.TRANSPORT_CELLULAR) ->   true
            else ->     false
        }
    }
    // For below 29 api
    else {
        @Suppress("DEPRECATION")
        if (connectivityManager.activeNetworkInfo != null && connectivityManager.activeNetworkInfo!!.isConnectedOrConnecting) {
            return true
        }
    }
    return false
}

..

GET source code on Github:

..