【Android】WebViewをJetpack Composeで使った場合の、バックキーで前ページに戻る方法

WebViewでは、バックキー（戻るボタン）を押した場合に前のページに戻る（ブラウザバック）のが一般的な動作かと思います。
本記事では、WebViewをJetpack Composeで使った場合の、バックキーで前ページに戻る方法をメモとして投稿します。

コード

@Composable
fun MyWebView() {
    // 1
    val backPressed = remember { mutableStateOf(false) }

    // 2
    AndroidView(
        factory = { context ->
            WebView(context).apply {
                webViewClient = object : WebViewClient() {}
            }.also {
                it.loadUrl("https://qiita.com")
            }
        },
        // 4
        update = { webView ->
            if (backPressed.value) {
                backPressed.value = false
                if (webView.canGoBack()) {
                    webView.goBack()
                } else {
                    // 前のページがない場合の処理（画面を閉じるなど）
                }
            }
        },
    )

    // 3
    BackHandler(
        enabled = true,
        onBack = {
            backPressed.value = true
        },
    )
}

コードのポイント

ポイントとなる箇所1〜4を説明します。

1. バックキーを押したかどうかの状態 backPressed を定義します。

2. AndroidView を使って WebView を表示させます。

3. 一番のポイントです。BackHandler を使って、バックキーのハンドリングを行います。バックキーが押されたタイミングで onBack のラムダが呼ばれるので、バックキーの押下状態を変更します。

4. 状態を変化させると再コンポーズされ、 AndroidView の update が呼ばれるので、そこで backPressed をチェックし、押された状態であれば WebView の goBack() を呼び出し前のページに戻ります。