Flutter Web 及 PWA应用 探索
PWA Support
Flutter 从 1.20 版开始，用于 Web 应用程序的 Flutter 模板包括了对可安装且具有离线功能的 PWA 应用程序所需的核心功能的支持。基于 Flutter 的 PWA 的安装方式与其他基于 Web 的 PWA 基本相同；由 manifest.json 提供的配置信息可以声明您的 Flutter 应用程序是 PWA，该文件可以在 web 目录中使用 Flutter create 命令生成。
对 PWA 的支持仍在进行中，因此，如果您发现不正确的地方，欢迎 给予我们反馈。
构建
运行以下命令生成 release 版本的构建：
flutter build web --release
发布版本的构建会使用 dart2js （而不是 开发编译器）来生成单独的 main.dart.js 文件。它们会在 build/web 目录下生成构建的文件，包括需要一并提供的 assets 文件夹。
在 Web 平台使用 Flutter 的场景有哪些？
Flutter 目前并非适用于所有的网页内容，不过我们主要关注三个应用场景：
-
渐进式 web 应用 (Progressive web apps, PWA) ，兼具 web 的高覆盖面与桌面应用的强大功能。
-
单页应用 (Single page apps, SPA) ，只需一次加载，并与互联网服务动态互传数据。
-
将现有 Flutter 移动应用拓展到 web ，在两个平台共享代码。
注意一：
现在阶段，Flutter 不适合具有丰富文本和瀑布流的页面。例如，博客文章等基于流媒体的丰富文本内容，其受益于网络构建的以文档为中心的模式，而不是像 Flutter 这样的 UI 框架可以提供的以应用为中心的服务。然而，你可以使用 Flutter 将交互式体验嵌入到这些网站中。
注意二：
手动安装 Flutter 为 PWA应用 PWA Install
一个小的Flutter包，允许您提示移动web用户按需安装您的Flutter应用程序作为渐进式web应用程序(PWA)。
在这里可以找到一个非常基本的例子:PWA安装
这个包的内容基于Pete LePage 的这篇文章：如何提供您自己的应用安装体验
判断PWA是否已经安装到桌面，是否从桌面打开：https://javascript.plainenglish.io/creating-a-browser-agnostic-pwa-install-button-41039f312fbe
现在有哪些浏览器支持 Flutter 了？
现在 Flutter web 应用可以运行在以下浏览器中：
-
Chrome（移动和桌面端）
-
Safari（移动和桌面端）
-
Edge（移动和桌面端）
-
Firefox（移动和桌面端）
在开发阶段，Chrome（在 macOS、Windows 以及 Linux）以及 Edge（在 Windows 上）将作为默认浏览器用于调试。
Flutter 里的持续部署
CI/CD 选择
有许多持续集成 (CI) 和持续交付 (CD) 的工具，帮助自动发布你的应用。
内置 Flutter 的多合一 (All-in-one) 选择：
Codemagic
Bitrise
Creating a Progressive Web App (PWA) with Flutter
安装 PWA应用 测试结果
Android设备：
- 只能使用 Chrome浏览器 才能安装应用；
- 必须翻墙才能安装，否则装不上。（应该是要走Google服务下载，所以才必须Chrome浏览器）
- 优点是，安装好了之后 再次打开 相对较快。
iOS设备：
- Safari浏览器 可以直接安装；
- 安装之后，在桌面打开时 需要翻墙，否则可能会打不开。
Flutter Web总结：
先说缺点：
- 网页首次打开非常的慢（优点一，可以缓解）；
- 本质还是运行在 Web容器里，不同于js，也不同于原生开发。无法开发重量级的App，很多三方库都用不了，尽可能使用纯Dart开发；
- 不确定随着项目的变大，网页启动速度会不会更慢；
再说优点：
- 针对缺点一，在未打开时可以放置加载动画，优化用户体验；（示例代码）
- 可以同步开发 Android 和 iOS，快速生成 App端。只需要配置一下，可直接生成应用；
- 只要浏览器能适配，界面运行非常流畅。虽然是网页，但有App级别的使用体验；
- 如果本地已经安装了程序，在浏览器里点击链接地址，可以无缝打开应用；
