如何离线运行Flutter Web应用程序



我从雇主那里得到了一份有问题的任务。我的任务是开发严格在谷歌Chrome上运行的简单软件,而不尝试连接到web(安全原因(。

我知道颤振的发展,我对sdk感觉很舒服。我应该如何开发一个可以使用usb棒部署的web应用程序?看起来PWA是一种选择,但文档缺乏详细信息。

  • 系统无法运行本地web服务器
  • Flutter应用程序必须能够使用JS库,我打算使用jsQR

服务人员和indexedDB可以帮助您开发离线路由应用程序和离线api。

服务工作者的mdn文档

我不确定这是否适合您的特定情况:您说系统无法运行本地Web服务器,但如果您将Web服务器与软件一起提供呢?

我刚刚发现了get_server:你可以在这里找到它。它旨在允许开发人员只使用flutter来托管自己的HTTP服务器,而无需求助于外部工具或其他编码/脚本语言。它还允许(这是相关的部分(包装你的flutter网络应用程序,并使其在本地网络上运行。

目前,我只尝试了一个非常简单的例子,但它似乎奏效了。以下是我采取的步骤:

  • 创建一个新的flutter项目:由于我需要在Windows上运行Web服务器,我必须为flutter做好准备(请参阅此处获取帮助(

  • get_server添加到新的pubspec.yaml

  • 在flutter web项目上运行flutter build web,并复制build/web输出新项目根文件夹中的文件夹(我在复制时重命名了该文件夹,因为flutter可能会更改web文件夹的内容(

  • 删除lib/main.dart的所有内容

  • 粘贴这个(这是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将变得不可用。但是,一旦发布,你应该能够从U盘运行可执行文件,然后用Chrome连接到它。

PS:在使用GetServer一段时间后,由于文档和支持不太好,我不得不切换到其他包。现在我用的是架子,但阿尔弗雷德也是一个值得一提的人。

最新更新