时间戳

首页 > 解决方案 > 如何在flutter mobile中保存网站以供离线使用

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

问题描述

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

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

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

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

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

标签： androidflutterflutter-iosflutter-androidhttrack

解决方案

这是您想要离线流行，流行，赢的一个例子！游戏。

支持离线模式需要大致如下：

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

要执行上述步骤，您将需要此包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 的代码生成。为确保正确使用缓存（填充缓存和使缓存无效），请使用以下工作流程：

  1. 使用所有的静态资源构建您的 Web 应用程序build/web：

pub build

  1. Runpwa的代码生成器扫描（或重新扫描）您的离线资产：

pub run pwa

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

pub build

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

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

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

推荐阅读