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

Question

重要提示 - 我希望此功能仅适用于移动应用程序，而不适用于 Flutter Web。
我在 flutter 应用程序中保存网站时遇到了一些问题。我已经尝试对 inappwebview 使用缓存方法和 savewebarchive 方法。该方法的问题在于它没有保存网站的全部内容。它只保存 HTML 和 CSS 文件。
我想用 HTML、CSS、js、字体文件、图像等所有内容保存整个网站，并将其存储在 Flutter 应用程序中。我已经浏览了一些插件，但它们都没有帮助。
我正在寻找与 httrack 相同的功能。
任何正确的方向都会被应用。

Answer 1

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

Supporting offline mode requires roughly the following:

1. Determining which resources to put in the cache for offline use.
2. Creating a service worker that prepares a cache of these resources.
3. Registering the service worker, so that subsequent requests can be served from the offline cache (in case the network is down).
4. In that service worker, pre-populating the offline cache with the URLs, and also handling the appropriate fetch request either from the cache, or from the network.
5. Making sure that the service worker detects changes to the app or static assets, and puts the new version in the cache.

要执行上述步骤，您将需要此软件包 Progressive Web App (PWA) for Dart
您的应用程序中的更改
导入 pwa包装在您的 pubspec.yaml 中:

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();
}

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

使用登陆 build/web 的所有静态资源构建您的 Web 应用程序:

pub build

运行pwa的代码生成器来扫描(或重新扫描)您的离线 Assets :

pub run pwa

再次构建您的项目，因为您需要拥有您的(新)pwa.dart编译文件:

pub build这些步骤会生成一个名为 lib/pwa/offline_urls.g.dart 的文件。包含要缓存的脱机 URL 列表。 .g.dart扩展名表示该文件已生成并可被 pwa 自动覆盖的代码生成器工具。
在第一次运行时，此工作流生成 web/pwa.dar包含具有合理默认值的服务 worker 的 t 文件。您可以修改此文件(例如，自定义离线 URL 或使用高级 API)，因为代码生成器不会再次更改或覆盖它。
所有这些步骤都来自 this article ，你可以在那里找到更好的细节。