Compose で WebView をラップする

Jetpack Compose で WebView を使用するには、AndroidView でラップする必要があります。 このガイドでは、一般的なユースケースと、Compose でそれらをサポートする方法について説明します。

警告: WebView の複雑なユースケースがある場合は、Compose の WebView の同等の機能が利用可能になるまで、そのレイアウトを移行して Compose を使用しないことをおすすめします。詳細については、この問題を参照し、 新しい API のサポートの進捗状況を追跡してください。

WebView を AndroidView でラップする

Compose で WebView を使用するには、AndroidView でラップします。

@Composable
fun SimpleWebView(
    initialUrl: String,
    modifier: Modifier = Modifier
) {
    AndroidView(
        modifier = modifier.fillMaxSize(),
        factory = { context ->
            WebView(context).apply {
                webViewClient = WebViewClient()
                settings.javaScriptEnabled = true
                loadUrl(initialUrl)			
            }
        }
    )
}
WrapWebViewInCompose.kt

これは、アプリ内でシンプルな URL を表示する場合に有効です。ただし、WebView は、Android View のライフサイクルと Compose のライフサイクルとは異なる複雑な状態のライフサイクルを処理します。Compose を統合すると、複雑な WebView シナリオが発生し、バグが発生しやすくなります。以降のセクションでは、これらの機能をサポートするために特別な処理が必要になる可能性があるユースケースについて説明します。

WebView の状態を保持する

Compose で構成の変更とナビゲーションを処理するのは困難です。これは、 WebView がホスト Activity にバインドされたレガシー View であり、そのインスタンスが Activity のライフサイクルよりも長く存続することは おすすめしません 。

したがって、WebView の状態を保持する標準的な方法は、WebView インスタンスを Activity とともに破棄して再作成できるようにすることです。Bundle を使用して、内部ナビゲーション履歴とスクロール状態を手動で保持できます。

注: Compose のみのアクティビティを使用するアプリでは、マニフェストで構成変更を処理して、アクティビティの 再作成を完全に回避することをおすすめします（ 構成変更を処理するをご覧ください）。変更を直接処理すると、パフォーマンスが向上し、WebView の内部状態を保持できます。

@Composable
fun PersistentWebView(url: String) {
    val webViewStateBundle = rememberSaveable { Bundle() }

    AndroidView(
        factory = { context ->
            WebView(context).apply {
                webViewClient = WebViewClient()
                settings.javaScriptEnabled = true

                // Restore the state and history
                if (webViewStateBundle.containsKey("WEBVIEW_STATE")) {
                    restoreState(webViewStateBundle.getBundle("WEBVIEW_STATE")!!)
                } else {
                    loadUrl(url)
                }
            }
        },
        onRelease = { releasedWebView ->
            // Save navigation history before the instance is destroyed
            val bundle = Bundle()
            releasedWebView.saveState(bundle)
            webViewStateBundle.putBundle("WEBVIEW_STATE", bundle)
        },
        modifier = Modifier.fillMaxSize()
    )
}
WrapWebViewInCompose.kt

**注意:** この方法ではナビゲーション履歴とスクロール状態は保持されますが、 DOM の状態は Activity が再作成されると失われます。

戻るナビゲーションを処理する

WebView にナビゲーション履歴がある場合、システムの戻るジェスチャーは、画面を終了するのではなく、WebView 内を戻るようにする必要があります。

Compose BackHandler API を使用してシステムの戻るイベントをインターセプトし、 WebView goBack() 関数を呼び出します。

// ...
@Composable
fun BackNavigationDemoScreen(onBack: () -> Unit) {
    // Hold a reference to the WebView to check its history state
    var webViewReference by remember { mutableStateOf<WebView?>(null) }

    // Intercept the system back press if the WebView has history
    BackHandler(enabled = true) {
        val webView = webViewReference
        if (webView != null && webView.canGoBack()) {
            webView.goBack() // Go back in history
        } else {
            onBack() // Exit screen
        }
    }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Back Navigation Demo") },
                navigationIcon = {
                    IconButton(onClick = onBack) {
                        Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back")
                    }
                }
            )
        }
    ) { padding ->
        Column(modifier = Modifier.fillMaxSize().padding(padding)) {
            AndroidView(
                modifier = Modifier.fillMaxSize(),
                factory = { context ->
                    WebView(context).apply {
                        settings.javaScriptEnabled = true

                        // Keeps link navigations internal to the WebView instead of opening Chrome
                        webViewClient = WebViewClient() 

                        loadUrl("https://developer.android.com")
                        webViewReference = this
                    }
                },
                onRelease = {
                    webViewReference = null
                }
            )
        }
    }
}
WrapWebViewInCompose.kt

この実装では、ブラウザのようなナビゲーション動作が実現します。

ネスト スクロール

Compose で WebView を使用する場合、ネスト スクロールは簡単にサポートされません。LazyColumn などのスクロール可能な Compose コンテナ内に WebView を配置すると、WebView がすべてのスクロール ジェスチャーを消費する可能性があります。WebView は独自の内部レンダリング エンジンに依存しているため、LazyColumn とネストしても現在正しく動作しません。

WebView の公式ネスト スクロール サポートの進捗状況については、 こちらの 問題をご覧ください。

エッジツーエッジ レイアウトとウィンドウ インセット

エッジツーエッジ レイアウトを使用すると、WebView のコンテンツがステータスバーなどのシステムバーの下に表示されることがあります。windowInsetsPadding 修飾子を使用すると、WebView 全体をセーフエリアに移動できます。

@Composable
fun EdgeToEdgeDemo(url: String) {
    AndroidView(
        modifier = Modifier
            .fillMaxSize()
            .windowInsetsPadding(WindowInsets.systemBars),
        factory = { context ->
            WebView(context).apply {
                loadUrl(url)
            }
        }
    )
}
WrapWebViewInCompose.kt

インセットの詳細については、WebView でウィンドウ インセットを理解するをご覧ください。

注: ウェブサイトのコンテンツを制御する場合は、CSS セーフエリア変数を使用します。 WebView エンジンは、デバイスのステータスバーに基づいて env(safe-area-inset-top) を自動的に計算します。CSS でこれを使用して、レイアウトに安全なパディングを追加します。

アプリのテーマを WebView のコンテンツと同期する

アプリがライトモードとダークモードを切り替えるときに、正しく処理されていれば、ページを再読み込みすることなく WebView のコンテンツを自動的に更新できます。

ウェブページのコンテンツを所有している場合は、色をアプリのテーマと同期させるために、メディアクエリ prefers-color-scheme を処理して、ウェブページが選択したテーマに適応するようにします。

プルダウンやポップアップなどのネイティブ要素がアプリのテーマを検出して一致させることができるようにするには、DayNight スタイルのテーマを Activity. に適用します。

<resources>

    <!-- ...
    <!-- Use a DayNight theme in your manifest to handle both modes automatically -->
    <style name="Theme.Webviewdemo.DayNight" parent="Theme.AppCompat.DayNight.NoActionBar" />
</resources>

@Composable
fun ThemeSyncDemo(onBack: () -> Unit) {
    val context = LocalContext.current
    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = { _ ->
            WebView(context).apply {
                settings.javaScriptEnabled = true
                webViewClient = WebViewClient()
                val html = """
                            <html>
                            <head>
                                // ...


                                    @media (prefers-color-scheme: dark) {
                                        body {
                                            background-color: #212121;
                                            color: #ffffff;
                                        }
                                        select {
                                            border-color: #BB86FC;
                                            background: #212121;
                                            color: #ffffff;
                                        }
                                    }
                                </style>
                            </head>
                            // ...
                            </html>
                        """.trimIndent()
                loadDataWithBaseURL(null, html, "text/html", "UTF-8", null)
            }
        }
    )
} 
WrapWebViewInCompose.kt

ウェブページにダークモードがない場合や、ウェブ コンテンツを所有していない場合は、 アルゴリズムによる暗色化によってダークモードを強制的に適用できることがあります。すでにダークモードが設定されている最新のウェブサイトでは、このアルゴリズムは無視され、独自の組み込みスタイルが使用されます。

Compose でウェブ権限を処理する

ウェブページがハードウェアまたはデータアクセス（カメラ、マイク、位置情報など）をリクエストすると、WebView は WebChromeClient で特定のコールバックをトリガーします。これらのコールバックを処理し、対応する Android の実行時の権限が付与されていることを確認する必要があります。

カメラとマイクの権限を処理する

ウェブページがカメラまたはマイクへのアクセス（WebRTC や動画撮影など）をリクエストすると、WebView は WebChromeClient.onPermissionRequest を呼び出します。

ただし、grant() を呼び出す前に、次の Android の実行時の権限をリクエストする必要があります。

• Manifest.permission.CAMERA
• Manifest.permission.RECORD_AUDIO

まず、WebView からリクエストされた PermissionRequest を追跡する WebView の権限ハンドラを定義します。

class WebViewPermissionHandler(
    private val launcher: ManagedActivityResultLauncher<Array<String>, Map<String, Boolean>>
) {
    var pendingRequest by mutableStateOf<PermissionRequest?>(null)
        private set

    fun handleRequest(request: PermissionRequest) {
        val isTrustedOrigin = request.origin.host == "www.trusted-domain.com" || request.origin.host == "app.local" // Always verify the origin before granting request


        if (!isTrustedOrigin) {
            Log.w("WebViewPermission", "Blocked and denied permission request from untrusted origin: ${request.origin.host}")
            request.deny()
            return
        }

        val androidPermissions = mutableListOf<String>()
        request.resources.forEach { resource ->
            when (resource) {
                PermissionRequest.RESOURCE_VIDEO_CAPTURE -> androidPermissions.add(Manifest.permission.CAMERA)
                PermissionRequest.RESOURCE_AUDIO_CAPTURE -> androidPermissions.add(Manifest.permission.RECORD_AUDIO)
            }
        }

        // Save the request and launch the Android system dialog
        pendingRequest = request
        launcher.launch(androidPermissions.toTypedArray())
    }

    fun onResult(results: Map<String, Boolean>) {
        val allGranted = results.values.all { it }
        Log.d("WebViewPermission", "Kotlin: All permissions granted? $allGranted")

        if (allGranted) {
            pendingRequest?.grant(arrayOf("/* list of permissions */"))
        } else {
            pendingRequest?.deny()
        }
        pendingRequest = null
    }
}
WrapWebViewInCompose.kt

次に、WebViewPermissionHandler を記憶するコンポーザブルを作成します。rememberLauncherForActivityResult を使用して権限をリクエストします。

注: 本番環境では、権限ハンドラは、権限の一部 付与と拒否のすべてのユースケースを処理し、ユーザーに UI フィードバックを提供する必要があります。詳細については、実行時の権限をリクエストするをご覧ください。

@Composable
fun rememberWebViewPermissionHandler(): WebViewPermissionHandler {
    val handlerState = remember { mutableStateOf<WebViewPermissionHandler?>(null) }
    val launcher = rememberLauncherForActivityResult(
        ActivityResultContracts.RequestMultiplePermissions()
    ) { results ->
        handlerState.value?.onResult(results)
    }
    return remember {
        WebViewPermissionHandler(launcher).also { handlerState.value = it }
    }
}
WrapWebViewInCompose.kt

onPermissionRequest コールバックから権限を処理します。これにより、権限ランチャーが起動します。

@Composable
fun WebViewPermissionScreen() {
    val permissionHandler = rememberWebViewPermissionHandler()

    AndroidView(
        factory = { context ->
            WebView(context).apply {
                settings.javaScriptEnabled = true

                webChromeClient = object : WebChromeClient() {
                    override fun onPermissionRequest(request: PermissionRequest) {
                        // Simply delegate to the handler
                        permissionHandler.handleRequest(request)
                    }
                }

		   // load a web page that needs permissions
            }
        },
        modifier = Modifier.fillMaxSize()
    )
}
WrapWebViewInCompose.kt

注: 位置情報権限の処理は、 上記のコード スニペットと同じパターンに従います。位置情報へのアクセスをサポートするには、onPermissionRequest ではなく WebChromeClient.onGeolocationPermissionsShowPrompt をオーバーライドし、WebView.settings.setGeolocationEnabled(true) を有効にします。コールバックを呼び出す前に、アプリが必要な実行時の位置情報権限（Manifest.permission.ACCESS_FINE_LOCATION と Manifest.permission.ACCESS_COARSE_LOCATION）をリクエストしていることを確認してください。

埋め込み WebView の代替

WebView の埋め込みを避けたい場合は、Android には Chrome カスタムタブなど、ウェブ コンテンツを表示するための他のオプションがあります。ブラウジングや認証などのユースケースに適したアプローチを選択する方法については、Android アプリ内でウェブ コンテンツを使用するをご覧ください。