Web Frames are instances of the WebFrame class in Kotlin. Essentially, they are meant to represent a single, supercharged web view. Web Frames are set up specifically for the web content they display: web view configuration and native access are tailored. Many hybrid developers may only use one Web Frame for their entire app—and that’s fine! Others may want to have a mix of web and native views.

Web Frames encapsulate the web view itself, path handlers for implementing responses to web view requests, and a remote interface for implementing native functionality.

An instance of the WebFrame class represents a single native view with web content, as well as any configuration and native access associated with that web content.

Create a WebFrame with the given Android context and Web Frame configuration.

A single Web Frame configuration which can be used for zero to many Web Frames.

Web Frame configurations contain the following.

1. A baseUrl which corresponds to the directory path from which to serve web content.

   This directory must have at least an index.html file.

2. (optional) A remote interface, which comprises functions and observables.

   Functions are used to invoke something, e.g. run a native API, send back data, be notified of a particular lifecycle event, etc. Observables are used to receive a stream of notifications, e.g. network status, geofencing updates, keyboard events, etc.

   Each function and observable must have a unique string key for the web client’s usage. The string keys for observables must end in a dollar sign ($).

3. (optional) Path handlers, which use special paths that are accessed by the web view to serve web content from Kotlin. See Path Handlers for reference documentation.

Create a WebFrame.Configuration.

A Fragment that is bound to a single Web Frame.

Typically, WebFrameFragment is not constructed manually, but as part of a FragmentContainerView like in the following example.

<androidx.fragment.app.FragmentContainerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fragment_container_view_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:name="com.peregrinejs.WebFrameFragment"
    tools:context=".MainActivity">
</androidx.fragment.app.FragmentContainerView>

Then, we assign the frame property during an activity’s onCreate lifecycle method. Since we assigned an ID to the FragmentContainerView layout, we can retrieve it using the fragment manager.

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val configuration = WebFrame.Configuration(
           baseUrl = assets.uri("www"),
        )
        val frame = WebFrame(this, configuration = configuration)
        val fragment = supportFragmentManager
            .findFragmentById(R.id.fragment_container_view) as WebFrameFragment
        fragment.frame = frame
    }

Set this property to connect the WebFrameFragment to a Web Frame instance.

typealias RemoteFunctions = Map<String, RemoteFunction>

typealias RemoteFunction = (Call) -> Unit

typealias RemoteObservables = Map<String, RemoteObservable>

typealias RemoteObservable = Flow<Event>