Flutter 中的 PWA-JavaScript中文网-JavaScript教程资源分享门户

前言

Flutter 是谷歌推出的一种跨平台的移动应用开发框架，旨在为开发人员提供快速构建高性能、高质量应用的工具。而 PWA（渐进式 Web 应用），则是一种基于 Web 技术构建的应用程序，具有与本地应用程序相同的用户体验。

本篇文章将介绍如何在 Flutter 中为您的应用添加 PWA 功能，并将详细讨论 PWA 的相关重点和使用技巧，以帮助您在移动 Web 开发领域获得更好的成果。

什么是 PWA

PWA 是一组对 Web 应用程序进行优化和补充的技术，通过使用现代浏览器支持的一系列 Web 标准和 API，为用户提供具有本地应用程序级别的交互和性能。PWA 的主要特点包括：

渐进增强：您可以使用基本功能，即使离线也可以工作。
可安装（添加到主屏幕）：形成本机应用程序的属于感官体验，可以解决应用商店发布的各种限制。
自适应：适合任何设备，任何浏览器，并对不同设备屏幕大小和分辨率进行良好的适应。
安全：使用 HTTPS 协议来提供安全性和隐私性保护。

创建 Flutter 应用程序

使用 Flutter，构建 PWA 应用程序特别简单。我们只需要遵循以下步骤：

创建一个新的 Flutter 项目，使用命令行命令如下：

flutter create MyPwaApp

打开您刚刚创建的项目文件夹，并编辑 lib/main.dart 文件。
将 main.dart 文件中的 runApp() 函数替换为如下代码：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My PWA App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'My PWA App'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(fontSize: 40),
        ),
      ),
    );
  }
}

运行您的应用程序。

flutter run -d chrome 通过 Chrome 浏览器在应用程序中预览您的 PWA 应用程序。

至此，您已创建了一个简单的 Flutter 应用程序，您可以在 Web 浏览器中预览此应用程序。

将 Flutter 应用程序转成 PWA 应用程序

我们可以将 Flutter 应用程序转换为 PWA 应用程序，以向最终用户提供更好的用户体验。在此过程中，我们必须遵循以下步骤：

在 pubspec.yaml 文件中添加下面三个包依赖项：

dependencies:
  # This line adds the flutter_web_plugins dependency, which adds web functionality 
  # to your Flutter app.
  flutter_web_plugins: ^0.3.8

  # This line adds the path package dependency, which allows the code to find the 
  # service worker file.
  path: ^1.8.0

  # This line adds the web-animator-dart package dependency, which allows running
  # CSS animations.
  web_animator: ^3.0.0

从上面的代码中，您可以看到，我们使用了三个依赖：flutter_web_plugins，path 和 web_animator，它们将帮助我们实现 PWA 集成。

在 lib/main.dart 文件开头添加以下导入语句：

import 'package:flutter_web_plugins/flutter_web_plugins.dart';
import 'dart:html' as html;

这将允许我们使用 Flutter Web 插件，以及允许我们与 HTML DOM 元素进行交互。

在 lib/main.dart 文件底部添加以下路由：

@Route('/')
class RootRoute extends _i1.PageRouteInfo<void> {
  const RootRoute() : super(name, path: '/');
  static const String name = 'RootRoute';
}

这个路由将帮助我们渲染 PWA 应用程序并显示在 Web 浏览器上。

在 pubspec.yaml 文件中，添加以下配置：

flutter:
  # My app has custom assets that require running flutter build web without deleting 
  # the build/web/assets/ directory.
  #
  # This configuration disables the clean command, which makes the build times shorter.
  web:
    build:
      # Disable cleaning the output directory.
      #
      # This is helpful because we keep assets in build/web/assets/.
      #
      # More information: https://github.com/flutter/flutter/issues/51182
      deleteFilesByDefault: false

这将允许我们启用移动 Web 应用程序的所有缓存，以便快速访问缓存数据。

在 lib/main.dart 文件中，添加以下代码：

Future<void> _registerServiceWorker() async {
  if (html.window.navigator.userAgent.toLowerCase().contains('safari') &&
      html.window.navigator.userAgent.toLowerCase().contains('version/13')) {
    // This code makes sure that ServiceWorker registration isn't called twice.
    // It waits for 20ms before registering the ServiceWorker.
    await Future.delayed(Duration(milliseconds: 20));
  }
  await flutterWebPlugins.initialize();
  await PwaServiceWorker().register();
}

class PwaServiceWorker {
  HTML.ScriptElement? _script;
  Future<void> register() async {
    final path = html.window.location.pathname;
    final scope = path.substring(0, path.lastIndexOf('/'));

    final swPath = '$scope/sw.dart.js';

    if (html.window.navigator.serviceWorker != null) {
      final serviceWorker = html.window.navigator.serviceWorker!;
      if (serviceWorker.controller == null) {
        _script = html.document.createElement('script');
        _script!.async = true;
        _script!.src = swPath;
        html.document.head!.appendChild(_script!);
      }
    }
  }
}

第五步中，我们将对浏览器进行一些设置，以使您的 PWA 应用程序在所有支持的浏览器中进行最佳优化。

运行您的应用程序。

flutter run -d chrome 通过 Chrome 浏览器在 PWA 应用程序中预览您的应用程序。

现在，您已经成功地将您的 Flutter 应用程序转换为 PWA 应用程序。您可以通过在浏览器的地址栏中输入地址 http://localhost:8080，然后将应用程序添加到您的主屏幕上来有完全的体验。

总结

在此篇文章中，我们详细介绍了在 Flutter 中创建 PWA 应用程序的方法。同时，我们还介绍了 PWA 基础知识和相关技巧，帮助您创建出优秀的 PWA 应用程序。希望这篇文章能帮助您实现更好的应用程序升级，获得更好的用户体验。完整示例代码请访问：Flutter PWA 示例代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6591a1e4eb4cecbf2d6b2cef