webview_javascript_bridge

Description:

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
copied to clipboard
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
}
copied to clipboard
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;
},
));
}
copied to clipboard
JavaScript #
First of all, install the package webview-javascript-bridge. Just run:
yarn add webview-javascript-bridge
copied to clipboard
or with npm:
npm install webview-javascript-bridge
copied to clipboard
Next, import webViewJavaScriptBridge as your need:
import webViewJavaScriptBridge from 'webview-javascript-bridge';
copied to clipboard
Finally, sending a message!
async function sendingMessage() {
let response = await webViewJavaScriptBridge.sendMessage({
action: 'tester',
params: 123456,
});
console.log("tester's response", response);
}
copied to clipboard
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";
},
),
);
copied to clipboard
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.

copied to clipboard