likes
comments
collection
share

Flutter for Web

作者站长头像
站长
· 阅读数 11

Flutter for Web

简介

Flutter 目前支持MacOS, Windows, Liunx, Android,iOS和Web等平台,,其他平台都是操作系统,只有Web是运行在浏览器上

Web应用的特殊性

因为Web应用运行在浏览器上,而浏览器是运行在操作系统上, 因此Web无法直接调用操作系统API, Web应用的能力取决于它的宿主-浏览器是否暴露了相关的操作系统API。

浏览器出于安全的考虑,会提供一个沙箱环境-开发一些安全,可控的系统能力, 同时限制一部分敏感的操作,具体表现

  • 浏览器允许Web应用访问网络, 但有严格的同源策略限制

同源策略: 浏览器出于安全考虑对Web应用访问网络的一套限制策略,同源表示一个网页中JavaScript发起网络请求的地址和当前网页地址中协议,域名,端口全部相同,如果有一个不同,则为非同源,如果不进行特殊处理,浏览器会禁止非同源请求

  • 浏览器允许JavaScript读取用户手动选择的本地文件(文件上传),但不允许JavaScript主动访问本地文件系统, 同时在任何情况下,都不允许JavaScript直接往本地文件系统写文件,因此dart:io包在Web应用中不能用的

  • 浏览器对Web应用访问系统硬件权限有自身策略,比如访问Wifi,GPS,摄像头等

Web渲染器

Flutter提供了两种不同的渲染器来运行和构建Web应用,分别为HTML渲染器和CanvasKit渲染器

HTML渲染器

Flutter for Web

由于浏览器有一套自身的布局标准(HTML+CSS),Flutter在生成Web 应用的时可以编译为符合浏览器标准的文件,包括使用HTML,CSS,Canvas和SVG元素来渲染

  • 优点: 应用体积较小

  • 缺点: 大多数UI并不是Flutter引擎绘制的,所以可能会存在跨浏览器UI不一致的情况

CanvasKit渲染器

Flutter for Web WebAssembly是一种标准的,可移植的二进制文件格式规范,文件扩展名为.wasm`

其他语言(C/C++,Rust)按照WebAssembly规范编译的应用,可以在浏览器运行

Flutter支持将引擎编译成WebAssembly格式,并使用WebGL渲染,这种渲染方式称为CanvasKit渲染器

  • 优点: 跨端UI绘制的一致性,有更好的性能,降低不同浏览器渲染效果不一致的风险

  • 缺点: 增大应用的体积大小(2M)

在浏览器运行

命令行参数 --web-renderer可选参数为auto,html,canvaskit

  • auto: 自动选择渲染器,移动端浏览器使用HTML,桌面端浏览器使用CanvasKit

  • html: 强制使用html渲染器

  • canvaskit: 强制使用CanvasKit渲染器


flutter run -d chrome --web-renderer html

flutter build web --web-renderer canvaskit

Flutter Web使用场景

Web开发已经有完整强大的开发和生态体系,Flutter Web并不适用Web开发的所有场景, 主要关注如下场景

  • 渐进式Web应用(Progressive Web App, PWA)

  • 单页应用(Single Page App, SPA),一个应用就一个HTML文件,只需进行一次加载,后续与服务端互传数据

  • 将现有Flutter应用拓展到Web,两个平台共享代码

Flutter 对于富文本和瀑布流类型的Web页面并不适合,例如博客

PWA

渐进式 Web 应用（Progressive Web App，PWA）使用 web 平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。

可以安装在设备上，可以离线和在后台运行，并且可以与设备和其他已安装的应用程序集成。