KevinnZou / compose-webview-multiplatform

WebView for JetBrains Compose Multiplatform
https://kevinnzou.github.io/compose-webview-multiplatform/
Apache License 2.0
305 stars 39 forks source link

Loading some page is very slow #108

Closed vivaCoda54 closed 2 months ago

vivaCoda54 commented 2 months ago

Hello, When I load some pages in my app, the loading is very very slow. This is a video this show the issue : https://we.tl/t-FqFErDxV79

How could I optimize my configuration.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun WebviewScreen(
    url: String, title: String, isDetailScreen: Boolean = false, onBack: () -> Unit,
    navigateHome: () -> Unit
) {

    val state = rememberWebViewState(
        url = url,
        additionalHttpHeaders = mapOf(
            "appsource" to "mobileApp"
        )
    )

    var cookieBeforeSize = remember { mutableStateOf(0) }
    var cookieAfterAddedSize = remember { mutableStateOf(0) }
    cookieSample(state, cookieBeforeSize, cookieAfterAddedSize)
    val navigator = rememberWebViewNavigator()
    val loadingState = state.loadingState
    var loadWebview by remember { mutableStateOf(false) }
    state.webSettings.isJavaScriptEnabled = true

    Box(modifier = Modifier.fillMaxSize().background(color = Color(0xFFefefef))) {

        Column {

            if (isDetailScreen || navigator.canGoBack) {
                CenterAlignedTopAppBar(
                    title = {
                        Text(
                            text = title,
                            modifier = Modifier.fillMaxWidth()
                                .padding(start = 15.dp),
                            textAlign = if (isDetailScreen) TextAlign.Start else TextAlign.Center,
                            style = AppTheme.typography.montserrat15
                        )
                    },
                    navigationIcon = {
                        IconButton(onClick = {
                            if (isDetailScreen) {
                                onBack()
                            } else {
                                navigator.navigateBack()
                            }
                        }) {
                            Icon(
                                imageVector = Icons.Filled.ArrowBack,
                                contentDescription = "Back",
                                tint = Color.Unspecified
                            )
                        }

                    }
                )
            } else {
                CustomHeader(navigateHome)
            }
            Logger.d(tag = "debaga") { "In box load webview, url is: $url" }

            Column(modifier = Modifier.fillMaxWidth().padding(horizontal = if (title == ScreensURL.ACTIVITY.title) 16.dp else 0.dp)) {
                WebView(
                    state = state,
                    navigator = navigator
                )
            }
            if (loadingState is LoadingState.Finished && cookieAfterAddedSize.value != 0) {
                LaunchedEffect(Unit) {
                    Logger.d(tag = "debaga") { "In loading state finished, reload" }
                    loadWebview = cookieBeforeSize.value != cookieAfterAddedSize.value
                }

            }

            if (loadWebview) {
                Logger.d(tag = "debaga") { "In RELOAD WEBVIEW" }
                navigator.reload()
                loadWebview = false
            }

        }

        if (loadingState is LoadingState.Loading) {
            LottieLoader()
        }
    }
}

@Composable
internal fun cookieSample(
    state: WebViewState,
    cookieBefore: MutableState<Int>,
    cookieAfter: MutableState<Int>
) {
    LaunchedEffect(state) {
        snapshotFlow { state.loadingState }
            .filter { it is LoadingState.Finished }
            .collect {
                val tokenManagerImpl = TokenManagerImpl()
                val domain = "https://abc.com"
                val shortDomain = "abc.com"
                val parts =
                    tokenManagerImpl.cookieLoggedIn?.split("=") // Sépare la chaîne sur le signe égal

                val systemTimeZone = TimeZone.currentSystemDefault()
                // Obtenir la date actuelle dans la zone horaire du système
                val today: LocalDate = Clock.System.todayIn(systemTimeZone)
                val localDate = today.plus(DatePeriod(days = 30))
                val localDateTime =
                    LocalDateTime(localDate.year, localDate.monthNumber, localDate.dayOfMonth, 0, 0)
                // Convertir LocalDateTime en Instant
                val instant = localDateTime.toInstant(TimeZone.UTC)
                Logger.d(tag = "debaga") {
                    "cookie before is: ${state.cookieManager.getCookies(domain).size}"
                }
                cookieBefore.value = state.cookieManager.getCookies(domain).size
                parts?.let {
                    if (parts.size >= 2) { // Assurez-vous qu'il y a au moins 2 parties
                        val name = parts[0] // La partie avant le signe égal
                        val value = parts[1] // La partie après le signe égal

                        state.cookieManager.setCookie(
                            domain,
                            Cookie(
                                name = name,
                                value = value,
                                domain = shortDomain,
                                path = "/"
                            ),
                        )

                    }

                }

                state.cookieManager.setCookie(
                    domain,
                    Cookie(
                        name = "appsource",
                        value = "mobileApp",
                        domain = shortDomain,
                        path = "/"
                    ),
                )

                Logger.d(tag = "debaga") {
                    "cookie add size: ${state.cookieManager.getCookies(domain).size}"
                }
                cookieAfter.value = state.cookieManager.getCookies(domain).size

            }
    }
}
KevinnZou commented 2 months ago

@vivaCoda54 Could you provide the URL for testing? Did you try loading it with raw Android Webview?

vivaCoda54 commented 2 months ago

@KevinnZou you need to be logged in to see the specific url but this is another url from the website that you can use to test, which is slow too... So the url is : https://yannisgautier.com/formation/

Yes for the android part I implemented the Android webview. The issue is for the ios part where I use your plugin.

Thanks you for the test

KevinnZou commented 2 months ago

@vivaCoda54 Thank you for the information! I tested your URL using Android WebView and found that it is also very slow. This suggests that the issue lies with the website itself rather than with this library.

vivaCoda54 commented 2 months ago

ok @KevinnZou thanks you I will check with the server of the website. Thanks you.