如何在flutter mobile中保存网站以供离线使用

Posted 2023-02-15

【中文标题】如何在flutter mobile中保存网站以供离线使用

【英文标题】：How to save website for offline in flutter mobile

【发布时间】：2021-12-11 17:55:48

【问题描述】：

重要提示 - 我希望此功能仅适用于移动应用，而不适用于 Flutter Web。

我在 Flutter 应用中保存网站时遇到了一些问题。我已经尝试对 inappwebview 使用缓存方法和 savewebarchive 方法。该方法的问题在于它没有保存网站的全部内容。它只是保存 html 和 CSS 文件。

我想用 HTML、CSS、js、字体文件、图像等所有内容保存整个网站，并将其存储在 Flutter 应用程序中。我浏览了一些插件，但没有一个有用。

我正在寻找与 httrack 相同的功能。

任何正确的方向都会被应用。

【问题讨论】：

赏金已结束且不可退还。您可以奖励对您有帮助的答案。

【参考方案1】：

您可以使用 webview_flutter 和 html 插件将整个网站下载为代码，将其存储为字符串变量，然后您可以使用 webview_flutter 打开它。

【讨论】：

它保存 HTML 文件，是的，但它不像图像字体文件那样保存网站的全部内容。

【参考方案2】：

这是您想要的示例offline Pop, Pop, Win! game.

支持离线模式大致需要以下内容：

确定将哪些资源放入缓存以供离线使用。 创建一个服务工作线程来准备这些资源的缓存。 注册 Service Worker，以便可以从离线缓存中处理后续请求（以防网络中断）。 在该 Service Worker 中，使用 URL 预填充离线缓存，并处理来自缓存或网络的适当提取请求。 确保 Service Worker 检测到应用或静态资产的更改，并将新版本放入缓存中。

要执行上述步骤，您将需要这个包Progressive Web App (PWA) for Dart

您的应用程序中的更改 在pubspec.yaml 中导入pwa 包：

dependencies:
  pwa: ^0.1.2

运行pub get后，将客户端添加到你的web/main.dart：

import ‘package:pwa/client.dart’ as pwa;
main() 
  // register PWA ServiceWorker for offline caching.
  new pwa.Client();

自动生成的渐进式网络应用程序 pwa 包提供了处理上述列表中项目 1-2 和 4-5 的代码生成。为确保正确使用缓存（填充缓存和使缓存无效），请使用以下工作流程：

使用所有在build/web 中的静态资源构建您的网络应用程序：

pub build

运行pwa 的代码生成器来扫描（或重新扫描）您的离线资产：

pub run pwa

再次构建您的项目，因为您需要编译您的（新）pwa.dart 文件：

pub build

这些步骤会生成一个名为 lib/pwa/offline_urls.g.dart 的文件，其中包含要缓存的脱机 URL 列表。 .g.dart 扩展名表示文件已生成，可能会被pwa 的代码生成器工具自动覆盖。

在第一次运行时，此工作流会生成 web/pwa.dart 文件，其中包含您的 Service Worker，并具有合理的默认值。您可以修改此文件（例如自定义离线 URL 或使用高级 API），因为代码生成器不会再次更改或覆盖它。

所有这些步骤都来自this article，你可以在那里找到更好的细节。

【讨论】：

我不是在寻找 Flutter Web。我正在寻找 android & ios Flutter 应用程序。

说真的，那你为什么要标记问题flutter-web呢？

@rajkavadia 你的问题具有误导性！

已相应地重新标记。也赞成，因为这样做只是为了防止进一步混淆。

问题是关于将任意网站保存在 Flutter 应用中以供离线查看，而不是在 Flutter 应用中使用 PWA。所以我认为这没有帮助。

【参考方案3】：

既然你问了一些方向：

如果您已经知道要离线查看哪些网站，则可以使用 HTTrack 下载它们并捆绑在 Flutter 应用程序中生成的文件。

如果你希望能够动态下载网站，目前还没有 Dart/Flutter 包可以为你做网站翻录。您要么必须自己实现它，要么可能制作一个 API 来使用已经制作的程序（例如 HTTrack），然后将文件发送到您的应用程序。

【参考方案4】：

如果没有现有的 Flutter 插件，最快的方法之一是简单地使用 Android 和 iOS 插件，并在其周围编写一个简单的 Flutter 包装器。

对于android，您可能对this link 感兴趣。对于 iOS，this link 可能会有所帮助。这些链接只是示例 - 您可以在 Google 上进一步搜索以找到更多适合您需求的插件。 （例如，搜索android kotlin save whole website 等）。

在android和ios上找到解决方案后，你可以很方便地develop a Flutter plugin，让你的Flutter代码调用那些Android/iOS的sn-ps。我个人建议在 Android 上使用 Kotlin，在 iOS 上使用 Swift，不要忘记 pigeon 进行代码生成。

顺便说一句，如果你想用 Android/iOS 代码而不是 Flutter 代码来绘制一些 UI，你可能也对platform views 感兴趣。

【讨论】：

我已经尝试过这样使用它，但是存档本身中不存在某些文件。比如带有 .blob 和 .woff 扩展名的文件，它们在网页本身内部携带一些数据。

@rajkavadia 所以你可能需要创建另一个关于 android 和 ios 的问题。顺便说一句，您失败了哪个平台？你试过什么方法？

@rajkavadia 有什么更新吗？

@rajkavadia 恭喜！

抱歉，它无法在我想要的网站上运行。