Flutter内嵌网页如何提前缓存静态资源

在Flutter中内嵌WebView加载网页时，如何实现静态资源（如JS、CSS、图片等）的提前缓存？目前使用flutter_inappwebview插件加载网页会有明显的网络延迟，希望能在APP启动时或空闲时段预先下载并缓存这些资源，待用户访问网页时直接从本地加载。是否有成熟的方案或插件支持这种离线缓存机制？需要注意哪些兼容性和缓存更新问题？

caililin 1楼

使用flutter_inappwebview插件，在WebView创建前通过HttpClient下载静态资源到本地，然后拦截请求并替换为本地文件路径。

更多关于Flutter内嵌网页如何提前缓存静态资源的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 2楼

在Flutter中内嵌网页并提前缓存静态资源，可以通过以下步骤实现：

1. 使用 `webview_flutter` 插件

首先，在 pubspec.yaml 中添加依赖：

dependencies:
  webview_flutter: ^4.4.2

2. 提前下载并缓存静态资源

使用 dio 或 http 库下载资源，存储到应用目录：

dependencies:
  dio: ^5.3.0
  path_provider: ^2.1.1

示例代码：

import 'package:dio/dio.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

Future<void> cacheResource(String url, String filename) async {
  final dir = await getApplicationDocumentsDirectory();
  final file = File('${dir.path}/$filename');
  
  if (!await file.exists()) {
    final dio = Dio();
    await dio.download(url, file.path);
  }
}

3. 拦截WebView请求并替换为本地资源

使用 WebViewController 的 setNavigationDelegate 拦截请求，指向本地文件：

final controller = WebViewController()
  ..setNavigationDelegate(NavigationDelegate(
    onUrlChange: (url) {
      // 拦截特定资源请求
      if (url.url?.contains('your-static-resource') ?? false) {
        final localPath = await getLocalPath('cached-file');
        controller.loadFile(localPath);
      }
    },
  ))
  ..loadRequest(Uri.parse('https://your-website.com'));

4. 替换HTML中的资源链接

若需修改HTML内容，可在加载前通过字符串替换或正则表达式将资源URL改为本地路径：

String htmlContent = await getHtmlFromUrl();
htmlContent = htmlContent.replaceAll(
  'https://example.com/style.css',
  'file:///path/to/local/style.css',
);
controller.loadHtmlString(htmlContent);

注意事项：

权限问题：确保应用有存储权限（Android需在 AndroidManifest.xml 中添加 WRITE_EXTERNAL_STORAGE）。
资源更新：可通过版本号或定期检查更新缓存。
路径处理：使用 path_provider 获取合法本地路径，避免硬编码。