Flutter Hybrid App Integration Guide

There are several plugins you can use for webviews in Flutter. Since different methods are used for different plugins, Airbridge provides a javascript interface to use with the plugins.

Interface

var webInterface = Airbridge.createWebInterface(
      webToken: 'YOUR_WEB_TOKEN',
      postCommandFunction: (arg) {
        return """..."""; 
    });

YOUR_WEB_TOKEN can be found at the Airbridge dashboard -> Settings -> Tokens -> Web SDK token.

abstract class AirbridgeWebInterface {

  String get script;

  void handle(String message);
}

The javascript interface can be utilized through the return of AirbridgeWebInterface.

Use Cases

Below are use cases for two plugins with Airbridge.

webview_flutter Package Link

@override
Widget build(BuildContext context) {
	WebViewController controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('YOUR_WEB_URL'));
  setJavascriptInterface(controller);
  return WebViewWidget(controller: controller);
}

void setJavascriptInterface(WebViewController controller) {
  String initChannel = 'INIT_CHANNEL_NAME';
  String handleChannel = 'NATIVE_CHANNEL_NAME';

  var webInterface = Airbridge.createWebInterface(
    webToken: 'YOUR_WEB_TOKEN',
    postCommandFunction: (arg) {
    return 'window.$handleChannel.postMessage($arg);'; 
  });

  controller.addJavaScriptChannel(
    initChannel,
    onMessageReceived: (message) {
    controller.runJavaScript(webInterface.script);
  }
  );

  controller.addJavaScriptChannel(
    handleChannel,
    onMessageReceived: (message) {
    webInterface.handle(message.message);
  }
  );
}

1. web interface 를 생성한다. postCommandFunction 에 app 으로 native channel로 메세지를 보내는 javascript 를 작성한다.
2. WebViewWidget 초기화 시점 문제로 init channel 을 생성하여 초기화 시점에 callback 을 받도록 한다.
3. native channel 을 생성한다.
4. 초기화 시점에 controller.runJavaScript(webInterface.script); 호출 하여 javascript 를 inject 한다.
5. native channel 로 도착한 메세지를 webInterface.handle(message.message); 을 통해 native SDK 로 전달한다.

flutter_inappwebview 바로가기

1. Create a web interfrace. Use a javascript in postCommandFunction that sends a message to the native channel with the app.
2. To resolve WebViewWidget's initialization timing, create an init channel and perform a callback when initialized.
3. Create a native channel.
4. Call controller.runJavaScript(webInterface.script); upon initialization and inject the javascript.
5. Use webInterface.handle(message.message); to forward the message received by the native channel to the native SDK.

flutter_inappwebview Package Link

@override
Widget build(BuildContext context) {
  webInterface = Airbridge.createWebInterface(
    webToken: 'YOUR_WEB_TOKEN',
    postCommandFunction: (arg) {
    return """window.flutter_inappwebview.callHandler('postMessage', $arg);"""; 
  });

  return InAppWebView(
    key: webViewKey,
    initialUrlRequest: URLRequest(url: Uri.parse("YOUR_WEB_URL")),
    onWebViewCreated: (controller) async {
      controller.addJavaScriptHandler(handlerName: 'postMessage', callback: (args) {
        webInterface.handle(args[0]);
        return args;
      });
    },
    initialUserScripts: UnmodifiableListView<UserScript>([
      UserScript(
        source: webInterface.script, 
        injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START)
    ]),
  );
}

1. Create a web interface. Use a javascript in postCommandFunction that sends a message to the native channel with the app.
2. Register a native javascript handler through controller.addJavaScriptHandler() upon InAppWebView's onWebViewCreated.
3. Forward the message to the native SDK through a webInterface.handle(message.message); callback.
   To resolve WebViewWidget's initialization timing, create an init channel and perform a callback when initialized.
4. Inject webInterface.script through InAppWebView's initialUserScripts. Use UserScriptInjectionTime.AT_DOCUMENT_START for the injection time.