Question

我正在使用Flutter Web开发一个新的Web应用程序。我想将服务人员添加到我的应用中，以使其成为PWA。

实现目标需要使用什么？

我曾尝试使用dart软件包（service_worker或pwa）来实现，但Dart 2不推荐使用。

Answer 1

由于服务人员只是JavaScript代码，因此您可以用普通的javascript（例如，在sw.js文件中编写一个），将其与Flutter Web应用程序捆绑在一起，然后从index.html注册服务人员这样的文件（source）：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

Answer 2

您当前需要切换到 Flutter Channel Dev （在2020年2月17日，当前的开发版本为1.15.3）

对于现有项目，请使用终端命令：

flutter create .

对于新项目，您将在 web 文件夹中有两个文件： manifest.json 和 index.html

在检查 index.html 时，您会注意到以下脚本：

if ('serviceWorker' in navigation) {
  window.addEventListener('load', function () {
     navigator.serviceWorker.register('/flutter_service_worker.js');
  });
}

如果脚本不存在，请添加到 <body></body>

此脚本为您创建 PWA 支持，并能够在设备（包括 MacOS ）上“安装”应用程序

按照此 GUIDE 完成您的 PWA 功能。

如何将Flutter Web应用转换为PWA？

2 个答案: