[Nextjs]Webview로 Flutter과 소통하기 JavaScriptChannel

flutter로 웹뷰를 만들 때 소통을 javascript channel로 할 수 있다. 

 

굳이 서버로 하지 않고, 웹페이지내에서 javascript를 감지해서 기능을 실행시키는 것이다.

 

나는 이를 로컬푸쉬알람 설정으로 이용했다. 

 

1. Next.js

이런 식으로 하면 된다.

declare var initializeLocalAlarm: {
    postMessage: (message: string) => void;
};

 

원래 위의 것을 정의하면 아래거는 인식을 해야 하는데 인식을 하지 못하는 문제가 발생하였다. 

그럴때에는 다음과 같이 하면 된다.

if (typeof window.initializeLocalAlarm !== 'undefined') {
    window.initializeLocalAlarm.postMessage('initialize');
}

 

주의해야 할 점은 굳이 전달해야 할 정보가 없더라도 빈 문자열이라도 보내야 한다. 그렇지 않으면 flutter에서 인식이 안되는 문제가 발생한다. 

 

2. Flutter

 

이렇게 하면 flutter에서 웹뷰에서 다음과 같은 소스로 받을 수 있다. 

class _WebViewPageState extends State<WebViewPage> {
	  late final WebViewController _controller;
    
      @override
      void initState() {
        super.initState();

        late final PlatformWebViewControllerCreationParams params;
        if (WebViewPlatform.instance is WebKitWebViewPlatform) {
          params = WebKitWebViewControllerCreationParams(
            allowsInlineMediaPlayback: true,
            mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
          );
        } else {
          params = const PlatformWebViewControllerCreationParams();
        }

        final WebViewController controller =
            WebViewController.fromPlatformCreationParams(params);

        controller
          ..setJavaScriptMode(JavaScriptMode.unrestricted)
          ..addJavaScriptChannel(
            'initializeLocalAlarm',
            onMessageReceived: (JavaScriptMessage message) async {
              print('initializeLocalAlarm');
              if (message.message.isNotEmpty) {
                // 메시지가 유효할 때에만 알람을 초기화
                await LocalPushNotifications.cancelAll();
              } else {
                print('Received an empty message or invalid data.');
              }
            },
          )
		...중략...
        ..loadRequest(Uri.parse(widget.initialUrl)); // 초기 URL 설정

        if (controller.platform is AndroidWebViewController) {
          AndroidWebViewController.enableDebugging(true);
          (controller.platform as AndroidWebViewController)
              .setMediaPlaybackRequiresUserGesture(false);
        }

        _controller = controller;
      }

      @override
      Widget build(BuildContext context) {

        return Scaffold(
          backgroundColor: const Color(0xff18191D),
          body: SafeArea(
            bottom: Platform.isAndroid,
            child: WebViewWidget(controller: _controller),
          ),
        );
    	}
	}
}

위의 소스는 더 많은 소스로 이루어져 있어서 {}이 다를 수도 있다.