flutter webview 缓存如何设置

在Flutter中使用webview时，如何正确设置缓存？我尝试了不同的缓存模式，但似乎没有生效。具体想了解：

  1. 如何启用缓存并控制缓存大小？
  2. 缓存路径是否可以自定义？
  3. 清除缓存的最佳实践是什么？

目前使用的是flutter_inappwebview插件，但官方文档对缓存部分的说明不够详细。希望能得到具体的代码示例或配置建议。

2 回复

Flutter WebView 缓存设置方法：

  1. 使用 flutter_inappwebview 插件（推荐）：
initialOptions: {
  "cacheMode": CacheMode.LOAD_CACHE_ELSE_NETWORK, // 优先使用缓存
  "cacheEnabled": true
}
  1. 缓存模式选项：
  • LOAD_DEFAULT：默认策略
  • LOAD_CACHE_ELSE_NETWORK：缓存优先
  • LOAD_NO_CACHE：不使用缓存
  • LOAD_CACHE_ONLY：仅使用缓存
  1. 清除缓存：
await InAppWebViewController.clearCache(); // 清除所有缓存
  1. 设置缓存路径：
initialOptions: {
  "cachePath": "自定义缓存路径"
}

建议使用 flutter_inappwebview 插件，功能更完整，缓存控制更灵活。

更多关于flutter webview 缓存如何设置的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter WebView 中，可以通过以下方式设置缓存：

1. 使用 flutter_inappwebview 插件（推荐）

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

InAppWebView(
  initialUrlRequest: URLRequest(url: WebUri('https://example.com')),
  initialSettings: InAppWebViewSettings(
    // 启用缓存
    cacheEnabled: true,
    
    // 设置缓存模式
    cacheMode: CacheMode.LOAD_CACHE_ELSE_NETWORK,
    
    // 应用缓存路径（可选）
    applicationCacheEnabled: true,
    
    // DOM 存储启用
    domStorageEnabled: true,
    
    // 数据库存储启用
    databaseEnabled: true,
  ),
)

2. 缓存模式选项

// 常用缓存模式：
CacheMode.LOAD_DEFAULT        // 默认行为
CacheMode.LOAD_CACHE_ELSE_NETWORK  // 优先使用缓存
CacheMode.LOAD_NO_CACHE       // 不使用缓存
CacheMode.LOAD_CACHE_ONLY     // 只使用缓存

3. 清除缓存

// 清除所有缓存
await InAppWebViewController.clearAllCache();

// 清除特定时间的缓存
await InAppWebViewController.clearCache(
  clearSince: DateTime.now().subtract(Duration(days: 7))
);

4. 使用官方 webview_flutter 插件

import 'package:webview_flutter/webview_flutter.dart';

WebView(
  initialUrl: 'https://example.com',
  onWebViewCreated: (controller) {
    // 启用 JavaScript（某些缓存功能需要）
    controller.setJavaScriptMode(JavaScriptMode.unrestricted);
  },
)

推荐使用 flutter_inappwebview，因为它提供了更完善的缓存控制功能，而官方插件的缓存控制选项相对有限。

回到顶部