Introduction to Two-Way Connection

The two-way connection between an App and a WebView refers to an interactive mechanism established between a mobile application (App) and its embedded WebView, allowing them to exchange data and commands with each other.

ℹ️ Information

In the TownPass Flutter project, we use flutter_inappwebview as the WebView tool.

We use the web-message-listeners provided by flutter_inappwebview as the connection channel between the WebView and the App.

What is Two-Way Connection Between an App and a WebView?

Two-way connection means:

• Connection from App to WebView: The native App can send data or events to the webpage inside the WebView.

  For example, when a user triggers an event in the App, the App can send a message to the WebView to control the content of the webpage or execute specific actions.

• Connection from WebView to App: Conversely, the webpage inside the WebView can also send data or request native App features.

  For example, when a button on the webpage is clicked, the WebView can send a message via JavaScript to the App, allowing the App to perform some native functions (such as launching the camera or retrieving the location).

The two-way connection mechanism allows developers to flexibly combine the powerful features of native Apps with the flexibility of web technologies, providing a richer application experience.