Notice
Install the Flutter SDK and Web SDK respectively on the app and website before setting up the hybrid app.
You can set the Flutter SDK to handle Airbridge related tasks occurring on the in-app website in hybrid apps without changing the website code.
Flutter SDK can handle commands related to event transmission, device settings, and user settings that take place in the Web SDK. Set up using Airbridge.createWebInterfaceScript and Airbridge.handleWebInterfaceCommand functions before displaying the website in the web view.
webToken is a Web SDK token. The Web SDK token can be checked in Airbridge dashboard under [Settings]>[Tokens].
postMessageScript is a JavaScript code that delivers the payload variable, which stores the command passed from the web SDK to the Flutter SDK, to the Flutter area.
command is the command received from the web SDK delivered to the Flutter 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);',
);
}
}
Beware following.
Make sure to collect the events that occur in the in-app WebView through the Web SDK in a hybrid app setting. When collecting such events through the App SDK, event duplication will occur.
このページは役に立ちましたか？