Android Jetpack Compose中如何保存与恢复WebView状态？

在Jetpack Compose中，我们需要通过AndroidView嵌入原生WebView，并结合Compose的状态管理和生命周期监听来实现状态的保存与恢复，具体实现如下：

1. 核心实现逻辑 #

• 用AndroidView创建并持有WebView实例，避免重组时重复创建
• 利用rememberSaveable保存WebView的状态Bundle，支持进程终止后恢复
• 通过DisposableEffect监听Activity的状态保存事件，将WebView状态存入Bundle
• 在WebView初始化阶段，从保存的Bundle中恢复历史状态

2. 完整代码示例 #

@Composable
fun PersistentWebView(initialUrl: String) {
    // 保存WebView状态的Bundle，使用Bundle.Saver实现持久化
    val webViewState = rememberSaveable(saver = Bundle.Saver) { Bundle() }
    val webView = remember { mutableStateOf<WebView?>(null) }

    AndroidView(
        factory = { context ->
            WebView(context).apply {
                // 初始化WebView基础配置
                settings.javaScriptEnabled = true
                settings.domStorageEnabled = true // 开启DOM存储，保障前端状态不丢失

                // 恢复之前保存的状态
                if (!webViewState.isEmpty) {
                    restoreState(webViewState)
                } else {
                    // 首次加载或无状态时加载初始URL
                    loadUrl(initialUrl)
                }

                webView.value = this
            }
        },
        update = { view ->
            // 仅在无保存状态且URL变化时重新加载，避免覆盖已恢复的状态
            if (webViewState.isEmpty && view.url != initialUrl) {
                view.loadUrl(initialUrl)
            }
        }
    )

    // 监听Activity的状态保存事件，保存WebView状态
    val activity = LocalContext.current as AppCompatActivity
    DisposableEffect(activity, webView) {
        val callback = object : ComponentCallbacks2 {
            override fun onSaveInstanceState(outState: Bundle) {
                super.onSaveInstanceState(outState)
                webView.value?.let {
                    webViewState.clear()
                    it.saveState(webViewState)
                }
            }

            override fun onTrimMemory(level: Int) = Unit
            override fun onLowMemory() = Unit
        }

        activity.registerComponentCallbacks(callback)
        onDispose {
            activity.unregisterComponentCallbacks(callback)
        }
    }
}

3. 关键注意事项 #

• 状态恢复时机：必须在WebView加载任何URL之前调用restoreState，否则恢复操作不会生效
• DOM存储开启：若页面依赖前端存储（如localStorage），需开启settings.domStorageEnabled = true，否则页面状态可能无法完全恢复
• 避免重复加载：在update回调中增加判断逻辑，防止状态恢复后被重复加载的URL覆盖
• rememberSaveable作用：相比remember，rememberSaveable会将Bundle存入Activity的savedInstanceState，即使进程被系统杀死也能恢复状态

内容的提问来源于stack exchange，提问作者Ahmed Bakhet