🍀 Flutter WebView 도입기 (2) 웹 - 플러터통신

Flutter WebView 1편

통신

Web ▶︎ Flutter

.addJavaScriptChannel() 를 통해 웹에서 플러터로 메세지를 보낼 수 있습니다.
이를 위해 미리 작성했던 컨트롤러에 채널을 선언해주어야 합니다.

// webview_controller.dart

..addJavaScriptChannel(
	'ChannelName',
		onMessageReceived: (JavaScriptMessage message) {
		debugPrint(message.message);
	},
)

플러터에서 채널을 등록하였으면 javascript를 통해 채널에 접근할 수 있습니다.

ChannelName.postMessage('hello');

미리 등록한 ChannelName 으로 .postMessage(value)를 보내게 됩니다.

분명 만나게 될 Error

하지만 javascript에는 ChannelName 이라는 인스턴스가 등록되어 있지 않습니다.
이를 해결하기위해 아래의 주석을 코드 윗 부분에 추가하였습니다.

// in javascript

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
ChannelName.postMessage('hello');

Web 환경: reactJs + ts + eslint

개발하고 있는 환경은 웹과 플러터 환경 모두에서 구동되어야 하므로 플러터에서만 실행되도록 하고 싶었습니다.
이를 위해 Flutter ▶︎ Web 간의 통신이 필요하며 아래의 내용에 포함되어 있습니다.

Flutter ▶︎ Web

플러터 환경에서는 사전에 등록한 컨트롤러 함수내에 javascript 코드를 실행할 수 있는 기능이 있습니다.

• runJavaScript()
  return 값이 없는 코드를 실행할 때에 사용됩니다.
• runJavaScriptReturningResult()
  반대로 return 값이 포함되어 있으며 값은 Future<String>으로 받을 수 있습니다.

🍅 주의!

위의 두 메서드들은 javascript root page (index.html) 에서 실핼할 수 있는 코드이여야 합니다.
예를 들어 reactJs와 같은 함수안에 선언된 코드들은 실행 할 수 없었으며,
브라우저의 콘솔에서 실행할 수 있는 코드들은 대부분 가능하였습니다.

사용 예시

initFlutter()
플러터 WebView 환경에서만 Javascript 코드가 실행될 수 있게 localStorage에 플러터를 구분할 수 있는 데이터를 추가하였습니다.
getJsMessage()
return 값이 추가된 예시 코드입니다.

// webview_controller.dart

void initFlutter() {
	controller.runJavaScript('localStorage.setItem("isFlutter", "1")');
}

Future<String> getJsMessage() async {
//웹 localStorage에 저장해 있을 boolean 값 호출
	final result = await controller.runJavaScriptReturningResult(
    'JSON.parse(localStorage.getItem("storageKey"))') as String;
    print("result: $result");
	return result;
}

every code

// webview_controller.dart

//GetX라는 전역 상태 관리 라이브러리를 통해 컨트롤러 활용
class WebviewMainController extends GetxController {
//WebviewMainController 클래스의 인스턴스를 반환
  static WebviewMainController get to => Get.find();

  //controller 객체 선언
  final WebViewController controller = WebViewController()
  
  //자바스트립트 사용 여부
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    //웹뷰 관련 이벤트들
    ..setNavigationDelegate(
      NavigationDelegate(
        onProgress: (int progress) {
          debugPrint('progressing $progress');
        },
        onPageStarted: (String url) {
          debugPrint(url);
        },
        onPageFinished: (String url) {
          debugPrint('Page Finished');
        },
        onWebResourceError: (WebResourceError error) {},
      ),
    )
    // 🍀 추가
    ..addJavaScriptChannel(
      'ChannelName',
      onMessageReceived: (JavaScriptMessage message) {
        debugPrint(message.message);
        //... anything
      },
    )
    //접속한 [URL]을 삽입
    ..loadRequest(Uri.parse([URL]));

// 다른 파일에서 controller를 불러오기 위함
  WebViewController getController() {
    return controller;
  }

  // 🍀 추가
  void initFlutter() {
	controller.runJavaScript('localStorage.setItem("isFlutter", "1")');
  }

  Future<String> getJsMessage() async {
  //웹 localStorage에 저장해 있을 boolean 값 호출
	final result = await controller.runJavaScriptReturningResult(
    'JSON.parse(localStorage.getItem("storageKey"))') as String;
    print("result: $result");
	return result;
  }
}

// in javascript
//flutter에서만 작동할 수 있도록
if (localStorage.getItem("isFlutter") === "1") {
	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	//@ts-ignore
	ChannelName.postMessage(message);
}