webview-javascript-bridge

A bridge for JavaScript communicate with webview_flutter.

	Android	iOS
Support	SDK 19+ or 20+	9.0+

Features

• handle message from JavaScript structured.
• send message to JavaScript easier.

Usage

Before using this package, your need setup with Flutter and JavaScript.

Flutter

First of all, add webview_javascript_bridge as a dependency in your pubspec.yaml file. Just run:

flutter pub add webview_javascript_bridge

And then create the bridge instance and init:

late final _bridge = WebViewJavaScriptBridge();
late WebViewController _webviewController = WebViewController()
  // your code
  ..addJavaScriptChannel(
    webviewJavaScriptBridgeChannel,
    onMessageReceived: _bridge.receiveMessage,
  )
  // your code


@override
void initState() {
  super.initState();
  // your code
  _bridge.updateWebViewController(_webviewController);
  // your code
}

Finally, don't forget add your message handler for JavaScript, such as Toaster:

@override
void initState() {
    super.initState();
    /// add handler
    _bridge.addMessageHandler(ClosureMessageHandler(
      resolver: (message, controller) => message.action == "toaster",
      handler: (message, controller) {
        // TODO: show the toaster
        print(message);
        return null;
      },
    ));
}

JavaScript

First of all, install the package webview-javascript-bridge. Just run:

yarn add webview-javascript-bridge

or with npm:

npm install webview-javascript-bridge

Next, import webViewJavaScriptBridge as your need:

import webViewJavaScriptBridge from 'webview-javascript-bridge';

Finally, sending a message!

async function sendingMessage() {
  let response = await webViewJavaScriptBridge.sendMessage({
    action: 'tester',
    params: 123456,
  });
  console.log("tester's response", response);
}

If your use TypeScript, go to example for more details.

❗️Tips

1. The imp of BridgeJavascriptMessageHandler in Flutter must return a jsonable type

_bridge.addMessageHandler(
  ClosureMessageHandler(
    resolver: (m, c) => m.action == "toaster",
    handler: (m, c) {
      // ❗️❗️❗️❗️
      return "this value will response to JavaScript, and it must be jsonable";
    },
  ),
);

2. You will get a exception, if a JavaScript function return null or undefined

final ret = await _bridge.sendMessage(function:"aJavaScriptFunctionReturningNullOrUndefined");
////// ⬆️ will be empty string.