Offline Oasis: Adding a Local HTML Fallback Switch to Your Lovable Android WebView App with WebViewGold

An Android WebView app can feel magical when the internet is fast and reliable. The moment the connection drops, a blank white screen can ruin that magic. Adding a local HTML fallback switch keeps your app feeling alive even without a network. This approach loads bundled HTML whenever the device loses connectivity.

Why a Local HTML Fallback Matters

Mobile users move through tunnels, basements, and dead zones. A fallback page turns a frustrating dead end into a calm offline oasis. Instead of an Android system error or empty screen, users see a friendly message, helpful links, or cached content. This small touch builds trust and keeps your app usable.

Preparing the Local Fallback File

Create a file named offline.html inside your app’s assets folder. Keep the markup simple with inline styles so it loads instantly from the file system.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body { font-family: sans-serif; background: #f7f3e9; color: #333; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; text-align: center; }
  .card { background: white; padding: 40px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
  button { background: #2a7de1; color: white; border: none; padding: 12px 24px; border-radius: 8px; font-size: 16px; }
</style>
</head>
<body>
  <div class="card">
    <h1>You are offline</h1>
    <p>Take a breath. Your app will reconnect when the signal returns.</p>
    <button onclick="retry()">Try again</button>
  </div>
<script>
  function retry() {
    if (window.AndroidBridge) {
      window.AndroidBridge.reloadRemote();
    }
  }
</script>
</body>
</html>

This page gives users a clear offline state and a retry button. The button calls into a JavaScript interface that you define in the Android app.

Detecting Connectivity in the WebView

Inside your WebView setup, add a WebViewClient that checks for connectivity errors. When a network error occurs, load the local fallback page.

webView.webViewClient = object : WebViewClient() {
    override fun onReceivedError(
        view: WebView,
        request: WebResourceRequest,
        error: WebResourceError
    ) {
        if (error.errorCode == WebViewClient.ERROR_HOST_LOOKUP ||
            error.errorCode == WebViewClient.ERROR_CONNECT ||
            error.errorCode == WebViewClient.ERROR_TIMEOUT) {
            view.loadUrl("file:///android_asset/offline.html")
        } else {
            super.onReceivedError(view, request, error)
        }
    }
}

This override catches most connection failures. You can also check the device network state before loading the remote URL to avoid unnecessary requests.

Adding a JavaScript Bridge for the Retry Button

Create a small JavaScript interface that reloads the remote URL when the user taps the retry button.

class AndroidBridge(private val webView: WebView) {
    @JavascriptInterface
    fun reloadRemote() {
        webView.post {
            webView.loadUrl("https://example.com")
        }
    }
}

Attach the bridge to the WebView with

—
More Information & Download App Template: WebViewGold