WebView-Multiplatform-Mobile

Simplifies embedding web content into Android and iOS apps with an intuitive API, leveraging CustomTabs and SFSafariViewController for secure, native-like performance and customizable settings.

#webview

Suggest an edit

Android JVMKotlin/Native

GitHub stars43

Authorsfinal-class

Open issues0

LicenseApache License 2.0

Creation datealmost 2 years ago

Last activity3 months ago

Latest release1.3.0 (3 months ago)

GitHub repository Wiki page

WebView Multiplatform Mobile

WebView Multiplatform Mobile is a cross-platform library that provides a simple and convenient way to embed web content into your Android and iOS applications. Based on CustomTabs in Android and SFSafariViewController in iOS, the library ensures safe and fast interaction with web content while maintaining the native user interface and performance.

Here's an example of how WebView looks

🔥 Features:

Cross-platform compatibility: Support for Android and iOS to ensure a unified web content embedding experience.
Integration with CustomTabs (Android) and SFSafariViewController (iOS): Utilize standard components of each platform for optimal performance and security.
Ease of use: An intuitive API interface makes embedding web content easy and efficient for developers, with settings for each platform inspired by the Compose Modifier philosophy from Jetpack Compose.

🚀 Setup

Add the dependency to the commonMain section of your build.gradle

implementation("io.github.final-class:webview-multiplatform-mobile:1.3.0")

Use WebView in your shared code

val webViewController by rememberWebViewController()

WebViewPlatform(webViewController = webViewController)

// Open in application
webViewController.open(url = "https://github.com/")

// Open in external browser
webViewController.openInExternalBrowser(url = "https://github.com/")

If you manage the controller outside Compose, create it via factory and pass into WebViewPlatform:

class SomeViewModel {
    val webViewController = WebViewControllerFactory.create()
    
    fun openWebView() {
        webViewController.open(url = "https://github.com/")
    }
}

// Later in UI
val viewModel = SomeViewModel()
WebViewPlatform(webViewController = viewModel.webViewController)

⚙️ Settings

WebView Multiplatform Mobile provides a range of customizable parameters to optimize the behavior and appearance of your embedded web components, inspired by the Compose Modifier philosophy in Jetpack Compose. Each WebView setting is akin to applying a Modifier to the embedded web component, making their usage elegant and convenient.

Settings for Android are configured as follows:

val webViewController by rememberWebViewController()

WebViewPlatform(
    webViewController = webViewController,
    androidSettings = AndroidWebViewModifier
        .showTitle(true)
        .urlBarHidingEnabled(true)
        ...
)

Description of available settings for AndroidWebViewModifier

Method	Description
showTitle	Sets whether the title should be shown in the custom tab.
urlBarHidingEnabled	Set whether the url bar should hide as the user scrolls down on the page.
shareState	Sets the share state that should be applied to the custom tab.
instantAppsEnabled	Sets whether Instant Apps is enabled for this Custom Tab.
toolbarCornerRadiusDp	Sets the toolbar's top corner radii in dp.
activityHeight	Sets the Custom Tab Activity's initial height in pixels and the desired resize behavior.
closeButtonPosition	Sets the position of the close button.
startAnimations	Sets the start animations.
exitAnimations	Sets the exit animations.
scheme	Sets the color scheme that should be applied to the user interface in the custom tab.
defaultColorSchemeParams	Sets the default CustomTabColorSchemeParams. This will set a default color scheme that applies when no AndroidScheme specified for current color scheme via scheme.
darkColorSchemeParams	Sets the dark CustomTabColorSchemeParams. This will set a dark color scheme that applies when AndroidScheme.Dark specified for current color scheme via scheme.

Settings for iOS are configured as follows:

val webViewController by rememberWebViewController()

WebViewPlatform(
    webViewController = webViewController,
    iosSettings = IosWebViewModifier
        .barCollapsingEnabled(true)
        .entersReaderIfAvailable(true)
        ...
)

Description of available settings for IosWebViewModifier

Method	Description
barCollapsingEnabled	Enabled bar collapsing.
entersReaderIfAvailable	A value that specifies whether Safari should enter Reader mode, if it is available.
dismissButtonStyle	Sets dismiss button style.
preferredBarTintColor	The color to tint the background of the navigation bar and the toolbar.
preferredControlTintColor	The color to tint the control buttons on the navigation bar and the toolbar.

📱 Example

👨‍💻 Contribution

We welcome your contributions! If you have suggestions for improvement or have encountered any issues, please create an Issue or Pull Request on our GitHub repository.