개요

Flutter 하이브리드 앱 연동 가이드에 대한 내용입니다. flutter 에서 webview 를 사용하기 위해 몇몇 plugin 을 사용 할 수 있습니다. 해당 plugin 에 따른 사용방법이 다르기 때문에 javascript interface 를 활용하기 위한 method 를 제공합니다.

interface

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

YOUR_WEB_TOKEN 은 대시보드의 Settings > Tokens > 웹 SDK 토큰 에서 확인할 수 있습니다.

abstract class AirbridgeWebInterface {

  String get script;

  void handle(String message);
}

return 받은 AirbridgeWebInterface 를 통해 javascript interface 를 활용 할 수 있습니다.

이용가이드

아래는 많이 사용되는 plugin 2가지에 대한 연동에 대한 내용입니다.

webview_flutter 바로가기

@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);
  }
  );
}

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

flutter_inappwebview 바로가기

@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)
    ]),
  );
}

web interface 를 생성한다. postCommandFunction 에 app 으로 native channel 로 메세지를 보내는 javascript 를 작성한다.
InAppWebView 의 onWebViewCreated 시 controller.addJavaScriptHandler() 를 통해 native javascript handler 를 등록한다. callback 으로 webInterface.handle(message.message); 을 통해 native SDK 로 전달한다.
InAppWebView 의 initialUserScripts 를 통해 webInterface.script); inject 한다. inject time 은 UserScriptInjectionTime.AT_DOCUMENT_START 로 시작시 적용하도록 한다.