알립니다
하이브리드 앱에서 웹 사이트 코드를 변경하지 않아도 에어브릿지 플러터 SDK가 인앱 웹 사이트에서 발생하는 에어브릿지 관련 작업을 처리하도록 설정할 수 있습니다.
플러터 SDK는 웹 SDK에서 진행되는 이벤트 전송, 디바이스 설정, 유저 설정에 관한 명령을 대신 처리할 수 있습니다. 웹뷰에 웹 사이트를 표시하기 전에 Airbridge.createWebInterfaceScript
함수와 Airbridge.handleWebInterfaceCommand
함수를 이용해 설정해 주세요.
webToken
은 웹 SDK 토큰입니다. 웹 SDK 토큰은 에어브릿지 대시보드의 [설정]>[토큰 관리]에서 확인할 수 있습니다.
postMessageScript
는 웹 SDK가 플러터 SDK에 전달하는 명령어가 저장된 payload
변수를 플러터 영역에 전달하는 자바스크립트 코드입니다.
command
는 웹 SDK가 플러터 SDK에 전달하는 명령어입니다.
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.data ?? '',
injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START)
]),
)
});
}
Future<String?> getJavascriptInterface() async {
return await Airbridge.createWebInterfaceScript(
webToken: 'YOUR_WEB_SDK_TOKEN',
postMessageScript: 'window.flutter_inappwebview.callHandler(payload);',
);
}
}
아래 사항을 주의해 주세요.
하이브리드 앱 설정을 하면 웹 SDK만으로 인앱 웹뷰에서 발생하는 이벤트를 수집해야 합니다. 앱 SDK로 이벤트를 추가로 수집하면 해당 이벤트가 중복해서 집계됩니다.
인앱 웹뷰에 실제 모바일 웹사이트를 사용하면 웹 SDK만으로 이벤트를 수집해 주세요.
도움이 되었나요?