androidkotlinwebviewandroid-jetpack-composecompose

How to Fix Incomplete Web Styling in Compose WebView?


I'm developing an Android app with Jetpack Compose and planning to implement a built-in web browsing feature. Below is my basic code. I've found that my code works normally (both in styling and layout) when accessing most websites. However, when visiting m.bilibili.com, the styling fails to load completely. I also tested it with the system browser on my Samsung S24, and it displays correctly.

Through debugging, I found that when loading the webpage with WebView, 4 stylesheet files are not being requested, and I have no idea why.

How should I modify my code to make it display correctly?

Here are the results when accessing the site with my WebView and the phone's built-in browser respectively:

my webview

system

@Composable
    fun WebViewPage(
    ) {
        println("[recomposable] - WebViewPage")

        var webViewSource: WebView? by remember { mutableStateOf(null) }

        LaunchedEffect(Unit) {
            delay(2000)
            webViewSource!!.loadUrl("https://m.bilibili.com/")
        }

        AndroidView(
            modifier = Modifier
                .fillMaxSize(),
            factory = { context ->
                webViewSource = WebView(context).apply {
                    CookieManager.getInstance().setAcceptThirdPartyCookies(this, true)

                   
                    settings.javaScriptEnabled = true
                    settings.domStorageEnabled = true
                    settings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
                    settings.loadsImagesAutomatically = true
                    
                    webViewClient = object : WebViewClient() {

                    }
                    
                    loadUrl("about:blank")
                }
                webViewSource!!
            },
            update = { webView ->
            }
        )

    }


Solution

  • BoxWithConstraints(Modifier.fillMaxSize()) {
    
        val width =
            if (constraints.hasFixedWidth)
                LayoutParams.MATCH_PARENT
            else
                LayoutParams.WRAP_CONTENT
        val height =
            if (constraints.hasFixedHeight)
                LayoutParams.MATCH_PARENT
            else
                LayoutParams.WRAP_CONTENT
    
        val layoutParams = FrameLayout.LayoutParams(
            width,
            height
        )
    
        AndroidView(
                modifier = Modifier
                    .fillMaxSize(),
                factory = { context ->
                    webViewSource = WebView(context).apply {
    
                        this.layoutParams = layoutParams
                        settings.javaScriptEnabled = true
                        webViewClient = object : WebViewClient() {
    
                        }
                        
                        loadUrl("about:blank")
                    }
                    webViewSource!!
                },
                update = { webView ->
                }
            )
    
    }