如何在离线情况下运行Flutter Web应用？

Question

如何在离线情况下运行Flutter Web应用？

javascriptflutterflutter-webwpa

4

我从雇主那里得到了一个让人头疼的任务。我被要求开发简单的软件，严格只能在Google Chrome上运行， 不能尝试连接到网络（出于安全原因）。

我了解flutter开发，对sdk感到很舒适。如何开发一个可以使用usb存储器部署的web应用程序呢？似乎PWA可以是一个选择，但文档缺乏详细说明。

系统没有运行本地Web服务器的能力。
Flutter应用程序必须能够使用JS库，我打算使用jsQR。

- Confused

你在此期间找到解决方案了吗？我正在努力解决一个非常类似的问题。 - il_boga

2个回答

1

服务工作者和indexedDB可以帮助您开发离线路由应用程序和离线API。

MDN文档：服务工作者

- AhmadKZX

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- il_boga · Accepted Answer

我不确定这是否适用于您的特定情况：您说系统无法运行本地Web服务器，但如果您随软件一起提供Web服务器呢？

我刚刚发现了get_server：您可以在此处找到它。它旨在允许开发人员仅使用flutter而无需依赖外部工具或其他编程/脚本语言来托管自己的HTTP服务器。它还允许（这是相关部分）包装您的flutter Web应用程序并使其在本地网络上运行。

目前，我只尝试了一个非常简单的示例，但似乎正在工作。这些是我采取的步骤：

create a new flutter project: since I needed the webserver to run on Windows, I had to get flutter ready for that (see here for help)
add get_server to the new pubspec.yaml
run flutter build web on your flutter web project, and copy the build/web output folder in the root folder of the new project (I renamed the folder while copying since flutter might change the content of the web folder)
delete all the content of lib/main.dart

paste this (this the actual content of main.dart)

import 'package:get_server/get_server.dart' as gs;
void main() {
  gs.runApp(
    gs.GetServerApp(home: gs.FolderWidget('folderName')),
  );
}

folderName是包含Flutter Web应用程序构建的重命名文件夹的名称。

我在AndroidStudio上从Windows“设备”运行了此操作，我的原始Flutter Web应用程序可在localhost:8080上访问（现在我只使用了get_server的默认选项）。我还得到了Web服务器（空）GUI作为白色窗口：我想这对于一些有关服务器本身的信息可能会有用，但是如果该窗口关闭，则localhost:8080将不可用。但是，一旦发布，您应该能够仅使用USB驱动器上的可执行文件，然后使用Chrome连接到它。

PS：使用GetServer一段时间后，由于文档和支持不太好，我不得不切换到其他软件包。现在我正在使用shelf，但Alfred也值得一提。