"flutter_webview" library api .runJavaScript() not working in iOS

167 views Asked by At

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

enter image description here

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

0

There are 0 answers