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:
@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 ->
}
)
}
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 ->
}
)
}