webview_jsbridge 1.0.4
webview_jsbridge: ^1.0.4 copied to clipboard

A flutter jsbridge package compatible with webview_flutter, no native dependence.

webview_jsbridge #

中文文档

A flutter jsbridge package compatible with webview_flutter, no native dependence.

Full compatible with Android JsBridge and iOS WebViewJavascriptBridge.

Usage #

  WebView _buildWebView() {
    return WebView(
      javascriptChannels: jsBridge.jsChannels,
      // must enable js
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (controller) {
        jsBridge.controller = controller;
        jsBridge.defaultHandler = _defaultHandler;
        jsBridge.registerHandler("NativeEcho", _nativeEchoHandler);
      },
      navigationDelegate: (NavigationRequest navigation) {
        // this is no effect on Android
        if (navigation.url.contains('__bridge_loaded__')) {
          jsBridge.injectJs();
          return NavigationDecision.prevent;
        }
        return NavigationDecision.navigate;
      },
      onPageFinished: (String url) {
        jsBridge.injectJs();
      },
      initialUrl: 'https://example.com',
    );
  }

  Future<void> _send() async {
    final res = await jsBridge.send('send from native');
    print('_send res: $res');
  }

  Future<void> _callJs() async {
    final res =
        await jsBridge.callHandler('JSEcho', data: 'callJs from native');
    print('callJs res: $res');
  }

  Future<Object?> _defaultHandler(Object? data) async {
    await Future.delayed(Duration(seconds: 1), () {});
    return '_defaultHandler from native';
  }

  Future<Object?> _nativeEchoHandler(Object? data) async {
    await Future.delayed(Duration(seconds: 1), () {});
    return '_nativeEchoHandler from native';
  }

default js implementation #

Default js implementation is es5 version. Using this version, web client has no need to change anything.

async js implementation #

If web client is using es7, here is a async implementation. You just need choose es7 version to inject. Like this:

dart client

jsBridge.injectJs(esVersion: WebViewInjectJsVersion.es7);

js client

setupWebViewJavascriptBridge(function (bridge) {
    console.log('setupWebViewJavascriptBridge done');
    async function defaultHandler(message) {
        console.log('defaultHandler JS got a message', message);
        return new Promise(resolve => {
            let data = {
                'Javascript Responds': 'defaultHandler Wee!'
            };
            console.log('defaultHandler JS responding with', data);
            setTimeout(() => resolve(data), 0);
        });
    }

    bridge.init(defaultHandler);

    async function JSEcho(data) {
        console.log("JS Echo called with:", data);
        return new Promise(resolve => setTimeout(() => resolve(data), 0));
    }

    bridge.registerHandler('JSEcho', JSEcho);
});

async function sendHello() {
    let responseData = await window.WebViewJavascriptBridge.send('hello');
    console.log("repsonseData from java, data = ", responseData);
}

async function callHandler() {
    let responseData = await window.WebViewJavascriptBridge.callHandler('NativeEcho', { 'key': 'value' });
    console.log("JS received response:", responseData);
}
0
likes
110
pub points
15%
popularity

A flutter jsbridge package compatible with webview_flutter, no native dependence.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, webview_flutter

More

Packages that depend on webview_jsbridge