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文件。
- (可选)使用像favicon.io这样的网站生成你的web图标
- 将你的logo添加到web/icons文件夹
- 在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
更多关于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应用中进行如下设置:
- 初始化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'),
);
},
),
),
),
);
}
}
- 配置
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"
}
]
}
确保你已经在项目中有相应尺寸的图标文件,并且路径正确。
- 运行应用:
使用flutter run -d chrome
命令在Chrome浏览器中运行你的Flutter Web应用。你应该会看到一个按钮,点击它会触发PWA安装提示(如果满足浏览器的安装条件)。
这样,你就成功地在Flutter Web应用中集成了pwa_install_plus
插件,并实现了PWA的安装功能。