하이브리드 앱 설정하기 - 플러터 SDK

    알립니다

    하이브리드 앱 설정을 하기 전에 앱과 웹사이트에 각각 플러터 SDK웹 SDK를 설치해 주세요.

    하이브리드 앱에서 웹 사이트 코드를 변경하지 않아도 에어브릿지 플러터 SDK가 인앱 웹 사이트에서 발생하는 에어브릿지 관련 작업을 처리하도록 설정할 수 있습니다.

    플러터 SDK로 웹 SDK 동작 처리하기

    플러터 SDK는 웹 SDK에서 진행되는 이벤트 전송, 디바이스 설정, 유저 설정에 관한 명령을 대신 처리할 수 있습니다. 웹뷰에 웹 사이트를 표시하기 전에 Airbridge.createWebInterfaceScript 함수와 Airbridge.handleWebInterfaceCommand 함수를 이용해 설정해 주세요.

    webToken웹 SDK 토큰입니다. 웹 SDK 토큰은 에어브릿지 대시보드의 [설정]>[토큰 관리]에서 확인할 수 있습니다.

    postMessageScript 는 웹 SDK가 플러터 SDK에 전달하는 명령어가 저장된 payload 변수를 플러터 영역에 전달하는 자바스크립트 코드입니다.

    command 는 웹 SDK가 플러터 SDK에 전달하는 명령어입니다.

    1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
    import 'dart:collection';
    import 'package:airbridge_flutter_sdk/airbridge_flutter_sdk.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_inappwebview/flutter_inappwebview.dart';
    
    class TestPage extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return TestState();
      }
    }
    
    class TestState extends State<TestPage> {
      @override
      void initState() {
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return FutureBuilder(
          future: getJavascriptInterface(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            return InAppWebView(
              initialUrlRequest: URLRequest(url: WebUri('YOUR_WEB_URL')),
              onWebViewCreated: (controller) async {
                controller.addJavaScriptHandler(handlerName: 'postMessage', callback: (args) {
                Airbridge.handleWebInterfaceCommand(args[0]);
                return args;
                });
              },
              initialUserScripts: UnmodifiableListView<UserScript>([
                UserScript(
                source: snapshot.requireData ?? "", 
                injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START)
              ]),
            )
          });
      }
    
      Future<String?> getJavascriptInterface() async {
        return await Airbridge.createWebInterfaceScript(
          webToken: 'YOUR_WEB_SDK_TOKEN',
          postMessageScript: 'window.flutter_inappwebview.callHandler("postMessage", payload);',
        );
      }
    }

    알립니다

    webview_flutter 의 경우 하이브리드 설정 스크립트 코드 주입을 페이지 로딩 전에 할 수 있는 인터페이스를 지원하고 있지 않아서 webview_flutter 에 대한 샘플 코드는 지원되지 않습니다.

    flutter_inappwebview 사용을 권장합니다.

    주의사항

    도움이 되었나요?

    더 필요한 내용이 있나요?