Problem
Using "webview_flutter" library, I made a web made with Svelte into a web/app
And I used the .runJavaScript() function, which is the api of "webview_flutter" library,
and it works well on Android, but does not work well on iOS
This is a warning message
Tech
flutter
- webview_flutter: ^4.2.2
Web
- Svelte: ^3.50.0
Code
Web
function get_device() {
//flutter 통신
Toaster.postMessage(
JSON.stringify({
cmd: 'device',
})
);
window.get_device = (device_info_obj) => {
return sessionStorage.setItem(
'DEVICE_INFO_OBJ',
JSON.stringify(device_info_obj)
);
};
}
Flutter
import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter/services.dart';
import 'package:device_info_plus/device_info_plus.dart';
final home_url = Uri.parse("http://****");
void main() {
WidgetsFlutterBinding.ensureInitialized(); //앱 실행할 준비가 완료될 때까지 기다린다.
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'PAY APP',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
static WebViewController controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..addJavaScriptChannel('Toaster',
onMessageReceived: (JavaScriptMessage msg) {
var data = jsonDecode(msg.message);
if (data["cmd"] == "device") {
// 디바이스 정보
getDeviceInfo();
}
})
..loadRequest(home_url);
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
getDeviceInfo();
return Scaffold(
body: WebViewWidget(
controller: controller,
),
);
}
static getDeviceInfo() async {
String OS_TYPE = "";
String OS_VERSION = "";
String DEVICE_MODEL = "";
DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
if (Platform.isAndroid) {
AndroidDeviceInfo info = await deviceInfo.androidInfo;
OS_TYPE = "Android";
OS_VERSION = info.version.release;
DEVICE_MODEL = info.model;
} else if (Platform.isIOS) {
IosDeviceInfo info = await deviceInfo.iosInfo;
OS_TYPE = "iOS";
OS_VERSION = info.systemVersion.toString();
DEVICE_MODEL = info.model;
}
//ios에서 동작을 안하는 부분 (here !!!)
controller.runJavaScript(
'window.get_device({OS_TYPE: "$OS_TYPE", OS_VERSION: "$OS_VERSION", DEVICE_MODEL: "$DEVICE_MODEL"})');
}
}
ios Info.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>$(DEVELOPMENT_LANGUAGE)</string>
<key>CFBundleDisplayName</key>
<string>Ios</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>ios</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>$(FLUTTER_BUILD_NAME)</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>$(FLUTTER_BUILD_NUMBER)</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIMainStoryboardFile</key>
<string>Main</string>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>CADisableMinimumFrameDurationOnPhone</key>
<true/>
<key>UIApplicationSupportsIndirectInputEvents</key>
<true/>
</dict>
</plist>
flutter doctor -v
[✓] Flutter (Channel stable, 3.13.1, on macOS 13.5.1 22G90
darwin-arm64, locale en-KR)
• Flutter version 3.13.1 on channel stable at
/Users/geonwoopaeng/Dev/flutter
• Upstream repository
https://github.com/flutter/flutter.git
• Framework revision e1e47221e8 (2 weeks ago),
2023-08-22 21:43:18 -0700
• Engine revision b20183e040
• Dart version 3.1.0
• DevTools version 2.25.0
[!] Android toolchain - develop for Android devices (Android
SDK version 34.0.0)
• Android SDK at /Users/geonwoopaeng/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: /usr/bin/java
✗ Could not determine java version
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E300c
• CocoaPods version 1.12.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google
Chrome.app/Contents/MacOS/Google Chrome
[!] Android Studio (not installed)
• Android Studio not found; download from
https://developer.android.com/studio/index.html
(or visit
https://flutter.dev/docs/get-started/install/macos#and
roid-setup for detailed instructions).
[✓] VS Code (version 1.81.1)
• VS Code at /Applications/Visual Studio
Code.app/Contents
• Flutter extension version 3.72.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS
13.5.1 22G90 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google
Chrome 116.0.5845.179
[✓] Network resources
• All expected network resources are available.
I modified the JavaScript in the web part, modified main.dart in the flutter part and modified iOS settings(Info.plist) ..., but it still did not work well.
First of all, I want to solve the problem with the "flutter_webview" library, and if I can't solve it in 1 ~ 2 days, I plan to try "flutter_inappwebview"
Thanks for coming in to ask questions
