Flutter PWA安装插件pwa_install_plus的使用

Flutter PWA安装插件pwa_install_plus的使用

PWA Install Plus

一个小型的Flutter包,允许你提示移动网页用户在需求时将你的Flutter应用安装为一个渐进式网络应用(PWA)

一个非常基础的例子可以在这里找到:PWA Install Plus

该包的内容基于Pete LePage (@petele)的文章。

Out-of-the-Box

截至1.20版本,所有的Flutter应用都可以被安装为PWAs。结合所有基于Chromium的浏览器都支持PWAs这一事实,设计你的Flutter应用以适应移动浏览器成为触及大量用户最有效的方式。

当一个Flutter应用在一个受支持的浏览器中打开时,用户会看到这样的安装提示:

移动提示 网页提示

这很酷,但有一个注意事项。浏览器只会在用户第一次打开你的应用时显示安装提示。如果用户刷新页面或返回到仍在其浏览器历史记录中的应用,则不会显示提示。

The PWA Install Plus Package

通过此包,你可以根据需要(例如,在按钮点击时)提示用户安装你的应用为PWA。该包通过捕获浏览器用于安装PWAs的beforeinstallprompt事件来实现。事件在应用启动时被捕获,并且可以在之后随时调用。

Setup

1. 更新index.html

在web/index.html的body部分添加以下<script>标签:

<!-- 捕获PWA安装提示事件 -->
<script>
  let deferredPrompt;

  window.addEventListener("beforeinstallprompt", (e) => {
    deferredPrompt = e;
  });

  function promptInstall() {
    deferredPrompt.prompt();
  }

  // 监听应用安装事件
  window.addEventListener("appinstalled", () => {
    deferredPrompt = null;
    appInstalled();
  });

  // 跟踪PWA是如何启动的(来自浏览器还是作为PWA)
  function getLaunchMode() {
    const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
    if (deferredPrompt) hasPrompt();
    if (document.referrer.startsWith("android-app://")) {
      appLaunchedAsTWA();
    } else if (navigator.standalone || isStandalone) {
      appLaunchedAsPWA();
    } else {
      window.appLaunchedInBrowser();
    }
  }
</script>

2. 调用PWAInstall().setup()

以下方法可以在main.dart中调用runApp()之前。PWAInstall()作为一个单例实例化,因此可以直接使用该类。

Future<void> main() async {

  // 添加此行
  PWAInstall().setup(installCallback: () {
    debugPrint('APP INSTALLED!');
  });

  runApp(MaterialApp(home: App()));
}

3. 检查安装提示是否可用

在调用promptInstall_()方法之前,你可以使用PWAInstall().installPromptEnabled检查安装提示是否可用。

如果满足以下条件,installPromptEnabled将为true:

  • ✅ 应用是在浏览器中启动的(如果应用已经作为PWA运行,则提示PWA安装是没有意义的)
  • ✅ 已捕获beforeinstallprompt事件

如果installPromptEnabled为false,则promptInstall_()不会执行任何操作,因此你应该在尝试调用提示之前检查此标志。

4. 调用PWAInstall().promptInstall_()

最后,调用PWAInstall().promptInstall_()显示安装提示。

提示配置

应用名称

你可以在web/manifest.json文件中更新"name"字段来更改提示中显示的应用名称。

应用Logo

提示中显示的logo也来自于web/manifest.json文件。

  1. (可选)使用像favicon.io这样的网站生成你的web图标
  2. 将你的logo添加到web/icons文件夹

  1. 在index.html文件中添加以下行:
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">

截图

除了名称和logo之外,你还可以向manifest.json文件中添加可选的截图。

"screenshots": [{
    "src": "images/app_screenshot.webp",
    "platform": "windows",
    "label": "PWA is the way!"
  }],

更多关于Flutter PWA安装插件pwa_install_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter PWA安装插件pwa_install_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter应用中使用pwa_install_plus插件来实现PWA(Progressive Web App)安装功能的代码案例。这个插件可以帮助你轻松地引导用户安装你的Flutter Web应用为PWA。

首先,确保你已经在pubspec.yaml文件中添加了pwa_install_plus依赖:

dependencies:
  flutter:
    sdk: flutter
  pwa_install_plus: ^x.x.x  # 请替换为最新版本号

然后,运行flutter pub get来安装依赖。

接下来,在你的Flutter应用中进行如下设置:

  1. 初始化PWA安装

在你的主入口文件(通常是main.dart)中,引入pwa_install_plus并进行初始化:

import 'package:flutter/material.dart';
import 'package:pwa_install_plus/pwa_install_plus.dart';

void main() {
  runApp(MyApp());

  // 初始化PWA安装
  PwaInstall plus = PwaInstall();
  plus.define(
    webManifest: 'manifest.json', // 你的manifest.json文件路径
    androidLabel: 'Install MyApp',
    iosLabel: 'Add to Home Screen',
    android: AndroidInstallOptions(
      display: 'standalone',
      orientation: 'portrait',
      startUrl: '/',
      backgroundColor: '#ffffff',
      themeColor: '#4CAF50',
      icon: 'icons/icon-72x72.png', // 图标路径
      name: 'MyApp',
      shortName: 'App',
    ),
    ios: IosInstallOptions(
      appleMobileWebAppCapable: 'yes',
      appleMobileWebAppStatusBarStyle: 'black',
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter PWA Example'),
        ),
        body: Center(
          child: Builder(
            builder: (context) {
              return ElevatedButton(
                onPressed: () async {
                  final PwaInstall plus = PwaInstall();
                  await plus.checkInstall();
                },
                child: Text('Install PWA'),
              );
            },
          ),
        ),
      ),
    );
  }
}
  1. 配置manifest.json

在你的项目根目录下创建一个manifest.json文件,并添加必要的配置。例如:

{
  "name": "MyApp",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4CAF50",
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

确保你已经在项目中有相应尺寸的图标文件,并且路径正确。

  1. 运行应用

使用flutter run -d chrome命令在Chrome浏览器中运行你的Flutter Web应用。你应该会看到一个按钮,点击它会触发PWA安装提示(如果满足浏览器的安装条件)。

这样,你就成功地在Flutter Web应用中集成了pwa_install_plus插件,并实现了PWA的安装功能。

回到顶部