webf Flutter Web 工程编译文件无法执行

Affected version

0.13.1+1

No same issues found

[X] Yes, I search all issues but not found.

Bug type

JavaScript

Which frontend framework you are using.

flutter 3.3.9

Steps to reproduce

创建一个FlutterWeb工程，修改代码为Code example内容
通过 flutter run -d chrome --web-port 8888 --web-renderer=html --release 运行服务
浏览器访问能正常显示标签内容，点击能跳转
在webf工程加载运行的服务地址，无法正常显示

可能问题原因：JavaScript没有正常执行浏览器正常显示后DOM的body内容会插入如下内容

<body>
  ...
  <flt-glass-pane>
      <flt-platform-view>
          <a id="sss-a0" href="https://flutter.cn/" style="border: none; height: 100%; width: 100%;">ssss</a>
      </flt-platform-view>
  </flt-glass-pane>
</body>

Code example

FlutterWeb 工程 main.dart

// ignore: avoid_web_libraries_in_flutter
import 'dart:html' as html;
import 'dart:ui' as ui;

import 'package:flutter/widgets.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return WebAnchorWidget();
  }
}

class WebAnchorWidget extends StatefulWidget {
  final String? url;

  const WebAnchorWidget({
    Key? key,
    this.url,
  }) : super(key: key);

  @override
  State<WebAnchorWidget> createState() => _WebAnchorWidgetState();
}

class _WebAnchorWidgetState extends State<WebAnchorWidget> {
  @override
  void initState() {
    // ignore:undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      'webview-a',
      (int viewId) => html.AnchorElement()
        ..id = 'webview-a$viewId'
        ..href = "https://flutter.cn/"
        ..text = "aaa"
        ..style.border = 'none',
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(
      viewType: 'webview-a',
      onPlatformViewCreated: (int viewId) {
        final html.AnchorElement element = html.document
            .getElementById('webview-a$viewId')! as html.AnchorElement;
        if (widget.url != null && widget.url != element.href) {
          element.href = widget.url;
        }
      },
    );
  }
}

webf工程

    return Scaffold(
      appBar: appBar,
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          children: [
            _kraken = WebF(
              devToolsService: ChromeDevToolsService(),
              viewportWidth: viewportSize.width - queryData.padding.horizontal,
              viewportHeight: viewportSize.height -
                  appBar.preferredSize.height -
                  queryData.padding.vertical,
              bundle: WebFBundle.fromUrl('http://10.168.50.60:8000/'),
            ),
          ],
        ),
      ),
    );

Expected results

正常显示标签内容

Actual results

W/WEBF_NATIVE_LOG(17592): Service worker not supported (or configured). {serviceWorkerVersion: '2585742326'}
D/WEBF_NATIVE_LOG(17592): Injecting <script> tag.
E/WEBF_NATIVE_LOG(17592): TypeError: not a function
E/WEBF_NATIVE_LOG(17592):     at <anonymous> (http://10.168.50.60:8000/flutter.js:79:25)
E/WEBF_NATIVE_LOG(17592):     at Promise (native)
E/WEBF_NATIVE_LOG(17592):     at _loadEntrypoint (http://10.168.50.60:8000/flutter.js:80:30)
E/WEBF_NATIVE_LOG(17592):     at _loadWithServiceWorker (http://10.168.50.60:8000/flutter.js:108:21)
E/WEBF_NATIVE_LOG(17592):     at loadEntrypoint (http://10.168.50.60:8000/flutter.js:48:19)
E/WEBF_NATIVE_LOG(17592):     at <anonymous> (vm://:8:23)
E/WEBF_NATIVE_LOG(17592): 
I/get.webf_widge(17592): ProcessProfilingInfo new_methods=1305 is saved saved_to_disk=1 resolve_classes_delay=8000

Dec 27 '22 06:12 wittyneko

Flutter For Web is not supported. Why would you wants to run webf in a web browser?

Dec 28 '22 10:12 andycall

我不是web开发人员，想用webf通过defineCustomElement 自定义一套flutter widget 组件，直接使用 flutter 开发，这样可以利用现有的flutter第三方库

Dec 30 '22 02:12 wittyneko