FlutterWeb能在Native端的WebView中使用么？

我正在参加「掘金·启航计划」

前言

H5 和 FlutterWeb 是两种不同的技术，它们在不同的场景下有不同的优势和适用范围。H5 通常具有更高的性能和更好的用户体验，适用于构建大型、复杂的应用程序，例如游戏、电商网站等。而FlutterWeb最初并不是想作为一个 HTML 的替代品，而是想基于 Flutter 能够快速构建出全平台的所支持的应用。

但随着FlutterWeb技术日渐成熟，已经能流畅的在PC端运行。在某些场景下，FlutterWeb是否具备了替换手机端H5页面的能力呢？

尝试

用Flutter开发一个Demo页面进行尝试，以展示信息为主，逻辑交互不复杂的页面，包含了一个动画、一个100条数据的列表和与Native通信功能。

显示与交互

1. 以Android为例，在Android的WebView中能正常显示出Demo的网页，如图所示。

2. 在测试基本动画，没有明显卡顿，帧数监测如下。动画时，帧数可以保持在60帧左右。

3. 列表快速滑动，能看到在某些瞬间帧数低至20 ~ 30帧，大多数还是保持在60帧左右。

页面加载时间

网页加载速度是用户体验中的关键点。得益于之前在PC端进行的FlutterWeb启动优化，在手机端也能用上，Demo页面的测试结果是500毫秒到800毫秒左右，当然加载速度有网络状态有关。如图所示。 页面越复杂所需要下载的时长就越多，除了目前的优化方案，还可以采用预下载的方式，在Native页面运行时，提前将页面数据下载至本地，提高加载效率。

通信

JS交互是非常常用的功能，那FlutterWeb可以与手机端进行通信么？ 答案是可以。

方法是在index.html中写好bridge方法帮助传递信息。Flutter端通过html.window实现发送与接收，Android端通过地址重定向回调方法监听。

index.html：

    // 接收Flutter发出的消息
    window.addEventListener('reciveMessage4Flutter', function () {
          console.log("reciveMessage4Flutter");
         sendMessage2Native();
    })

    // 发送消息给Native
    function sendMessage2Native() {
      console.log("sendMessage2Native");
        window.location.href = "sendMessage2Native"
    }

    // 接收Native发出的消息
    function reciveMessage4Native() {
      console.log("reciveMessage4Native");
      sendMessage2Flutter();
    }
    
    // 发送消息给Flutter
    function sendMessage2Flutter() {
      console.log("sendMessage2Flutter");
      window.dispatchEvent(new Event("sendMessage2Flutter"))
    }

优点与缺点

优点

1. 节约资源，在资源不足时用Flutter开发可以生成三端页面，节省时间和人力。
2. 间接实现Flutter热更新，因为是Web方式部署，所以能突破原生封锁，实现热更新。这也是目前Flutter端需要的功能。

缺点

1. 相较于H5开发，性能、兼容性和生态FlutterWeb都是比不了的，目前并不能满足所有场景。
2. FlutterWeb页面加载是基于Native的WebView，而WebView本身性能上就有局限，没有Native好。

CanvasKit模式

上文所说的场景都是基于html模式，FlutterWeb除了支持html还支持CanvasKit模式， 该模式是将 Skia 编译成 WebAssembly 格式，并使用 WebGL 渲染绘制页面，所以页面会更流畅，兼容性会更好，但是有个弊端包体积会增大8M左右（引擎和字体）。目前html也有很好的表现，所以CanvasKit模式的性价比偏低。

结论

目前FlutterWeb 可以在Native中的WebView中应用，在性能方面表现良好，有较高的页面刷新帧率。然而，在实际应用中，性能表现还受到许多其他因素的影响，因此具体情况需要根据具体的应用场景来评估。

虽然不能完全替代H5页面在手机端的应用，但它可以作为一个补充，帮助开发人员更好地开发业务，提高灵活性，开发人员可以根据具体的需求和场景，选择合适的技术来构建应用程序。

点赞、收藏mark一下✨✨万一用到时找不到了呢🌚