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 的这篇文章：如何提供您自己的应用安装体验

现在有哪些浏览器支持 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设备：

  1. 只能使用 Chrome浏览器 才能安装应用；
  2. 必须翻墙才能安装，否则装不上。（应该是要走Google服务下载，所以才必须Chrome浏览器）
  3. 优点是，安装好了之后 再次打开 相对较快。

iOS设备：

  1. Safari浏览器 可以直接安装；
  2. 安装之后，在桌面打开时 需要翻墙，否则可能会打不开。

Flutter Web总结：

先说缺点：

  1. 网页首次打开非常的慢（优点一，可以缓解）；
  2. 本质还是运行在 Web容器里，不同于js，也不同于原生开发。无法开发重量级的App，很多三方库都用不了，尽可能使用纯Dart开发；
  3. 不确定随着项目的变大，网页启动速度会不会更慢；

再说优点：

  1. 针对缺点一，在未打开时可以放置加载动画，优化用户体验；（示例代码）
  2. 可以同步开发 Android 和 iOS，快速生成 App端。只需要配置一下，可直接生成应用；
  3. 只要浏览器能适配，界面运行非常流畅。虽然是网页，但有App级别的使用体验；
  4. 如果本地已经安装了程序，在浏览器里点击链接地址，可以无缝打开应用；

Demo

测试示例：
https://my_flutter_template.codemagic.app/