简介
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渲染器
由于浏览器有一套自身的布局标准(HTML+CSS),Flutter在生成Web 应用的时可以编译为符合浏览器标准的文件,包括使用HTML,CSS,Canvas和SVG元素来渲染
-
优点: 应用
体积较小 -
缺点: 大多数UI并不是Flutter引擎绘制的,所以可能会存在
跨浏览器UI不一致的情况
CanvasKit渲染器
WebAssembly是一种标准的,可移植的二进制文件格式规范,文件扩展名为.wasm`
其他语言(C/C++,Rust)按照WebAssembly规范编译的应用,可以在浏览器运行
Flutter支持将引擎编译成WebAssembly格式,并使用WebGL渲染,这种渲染方式称为CanvasKit渲染器
-
优点: 跨端UI绘制的一致性,有更好的
性能,降低不同浏览器渲染效果不一致的风险 -
缺点: 增大应用的体积大小(2M)
在浏览器运行
命令行参数 --web-renderer可选参数为auto,html,canvaskit
-
auto: 自动选择渲染器,移动端浏览器使用HTML,桌面端浏览器使用CanvasKit
-
html: 强制使用html渲染器
-
canvaskit: 强制使用CanvasKit渲染器
css
flutter run -d chrome --web-renderer html
flutter build web --web-renderer canvaskitFlutter 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 平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。
可以安装在设备上，可以离线和在后台运行，并且可以与设备和其他已安装的应用程序集成。