[Flutter翻译]Flutter Web的下一步是什么?

592 阅读8分钟

我们对即将发布的版本的优先考虑,重点是性能、开发者体验和网络整合

原文地址:medium.com/flutter/flu…

原文作者:medium.com/@mariam.has…

发布时间:2021年9月15日 - 6分钟阅读

image.png

Flutter的网络支持在2021年3月达到了稳定的里程碑。那么下一步是什么?

根据我们的用户研究,网络是超过10%的Flutter项目的目标。因此,我们现在的重点是提高初始稳定版本的质量,并使更多的人能够将您的Flutter网络应用交付给生产。

我们根据Flutter季度调查的结果以及我们在问题、面对面讨论和社交媒体上听到的内容确定了这些优先事项。我们刚刚收到第三季度的调查结果,很高兴看到这个计划与您的反馈相一致。

这篇文章提供了更多关于我们的路线图和每个优先事项的工作计划的细节。一些功能可能跨越几个季度,其他功能需要调查(🔍),然后我们才能承诺一个解决方案。

网页外观和感觉

重要的是,Flutter网络应用在网络上的感觉很自然。这包括诸如滚动行为、文本功能、闪屏、超链接、搜索引擎优化和其他网络特定的UI功能。

RTL文本

以前,Flutter对从右到左(RTL)的语言,如阿拉伯语和希伯来语提供了不完整的网络支持。虽然框架本身支持RTL文本,但网络引擎产生了未定义的行为,因为它忽略了LTR和RTL之间的区别。 最近的稳定版(2.5)增加了对RTL的基本支持,这样RTL语言的所有主要用例都可以在Flutter网络应用中得到支持和使用。大部分与基本支持有关的问题已经得到解决,我们计划修复剩余的问题。

滚动行为

虽然Flutter 2包含了一些改进,以支持桌面浏览器上的滚动行为(如滚动条支持),但滚动行为仍然是一个领域,有时在浏览器或网络应用程序运行的操作系统上看起来或感觉不对。

虽然这些行为中的一些取决于Flutter桌面支持的工作,但有一些问题(如下所列)我们计划在这个路线图中解决,具体到滚动物理学和滚动条。我们还计划研究对触控板的支持。

🔍 研究对触控板的支持

应用程序加载API

一些网络应用喜欢在应用加载时显示一个闪屏、加载指示器或登陆页面,或者提供一个自定义体验。目前,还没有简单的方法来实现自定义体验或指示 Flutter 网络应用正在加载;在使用 CanvasKit 的较大捆绑尺寸进行渲染时,这一点变得更加关键。

我们在这里的工作主要是为您提供一个明确的应用程序启动周期的 API,可以用来预加载应用程序,控制应用程序的加载周期,并构建闪屏或加载指示器。

在网络上增加对闪屏的支持

可访问性

可访问性是我们的首要任务之一;我们的目标是为您提供必要的工具,以构建可访问的网络应用,在最常见的屏幕阅读器上运行良好。

Flutter 2.2对可访问性支持进行了重大改进。从那时起,我们听到了终端用户对试图用屏幕阅读器(如JAWS)浏览他们的网络应用的担忧。

在这个路线图中,我们专注于桌面浏览器支持的屏幕阅读器的问题,如snackbar公告。我们还将继续研究如何提高我们的整体可访问性支持。

性能

性能是我们将始终优先考虑的一个领域,以改善Flutter网络应用的用户体验。目前,我们的主要重点是改善滚动干扰,并加快网络应用的初始加载速度。

滚动滞后

根据我们最近的季度调查,滚动jank是报告的首要性能问题之一。我们的目标是确保Flutter网络应用在手机上使用手势,在桌面上使用鼠标/键盘顺利滚动,但这也取决于网络应用期望用户滚动的内容的类型和数量。

在未来几个月,我们将主要关注改善因图像解码而产生的jank,我们将继续调查滚动性能问题,以找到其他可以改进的用例。

捆绑CanvasKit(离线支持)

目前,用 CanvasKit 渲染的 Flutter 网络应用需要额外的手动步骤才能作为渐进式网络应用程序(PWA)离线工作。为了在离线模式下完全作为 PWA 运行,并确保应用程序符合严格的内容安全策略,我们需要捆绑 CanvasKit 和字体回退。

我们将首先捆绑CanvasKit,然后捆绑字体,并添加必要的工具以启用离线模式。

CanvasKit的下载大小

CanvasKit 比基于 DOM 的方法具有更好的性能,因此是我们在桌面浏览器上的默认渲染器。然而,下载应用程序所需的时间会影响初始加载性能(以及在网络上运行的Flutter应用程序的Lighthouse得分)。 在本路线图中,我们将研究如何减少CanvasKit的下载量,以努力提高初始加载性能。我们希望确保终端用户的设备或浏览器不会处理大量的有效载荷。

与 html 内容整合

与浏览器代码集成的能力对于利用网络平台的优势非常重要。Flutter网络应用有两种方式可以与HTML整合。1)在Flutter网络应用中使用HTML平台视图,或2)将Flutter作为内容岛嵌入现有的网络应用(类似于网络的附加应用)。前者今天已经存在,可能需要改进,而后者将是一个新功能,需要进一步设计和开发。

用自定义元素嵌入(添加到应用程序中)

今天,将Flutter网络应用嵌入到现有网站/网络应用的唯一方法是通过iframe。虽然这对某些用例是可行的,但对于那些慢慢将其网络应用迁移到使用Flutter的人来说,这并不总是一个理想的解决方案。 在这个路线图中,我们将调查和设计一个定制的解决方案,使您能够嵌入您的Flutter Web应用程序,类似于添加到应用程序的移动场景。

开发者体验

Flutter的生态系统包括您用于开发但目前缺乏网络支持的功能,如插件、调试、热重载等。为了让您在网页上有一个良好的开发者体验,我们将继续弥合移动和网页之间的平等差距。

相机插件

自我们最初的稳定版本以来,相机插件一直是要求最多的插件之一;你们中的许多人发现,在将Flutter移动应用程序带到网络上时,平等性差距是一个障碍。

在Flutter 2.5稳定版中,我们提供了一个早期版本的插件,可以初始化相机,显示相机预览,并拍摄照片。我们将在收到反馈后对这个插件进行改进。

谢谢大家

虽然这是我们目前的网络路线图的概述,但我们的GitHub问题列表仍然是我们正在进行的工作的真实来源。我们可能会根据我们了解到的情况和你告诉我们的情况来增加、延长或推迟功能。

像往常一样,我们非常重视你的反馈,并感谢你的支持!


www.deepl.com 翻译