Flutter应用终止重启后WebView缓存持久化问题求助

我在Flutter开发中遇到了应用终止重启后无法维持WebView缓存的难题。常规网页场景下，重新打开已访问页面会借助缓存加快加载速度，但我的Flutter WebView在应用终止重启后，页面加载耗时仍和首次加载一致。

我先后尝试了webview_flutter、flutter_inappwebview和flutter_webview_plugin三个包，即便开启了应用缓存，问题依旧存在。

使用webview_flutter的代码： #

class WebProvider extends ChangeNotifier {
  late WebViewController controller;
  bool _isWebViewLoading = true;
  final Auth0 auth0 = Auth0(AppConfig.DOMAIN, AppConfig.CLIENTID);

  bool get isWebViewLoading => _isWebViewLoading;

  void loadWebView({String? url}) {
    final dashboardUrl = Uri.parse(AppConfig.login).replace(queryParameters: {
      'access_token': PrefUtils.getString(ACCESS_TOKEN),
      'token_type': PrefUtils.getString(TOKEN_TYPE),
      'refresh_token': PrefUtils.getString(REFRESH_TOKEN),
      'expires_in': PrefUtils.getString(EXPIRES_AT),
      'id_token': PrefUtils.getString(ID_TOKEN),
      'scope': PrefUtils.getString(SCOPES)
    }).toString();

    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(
        onPageStarted: (url) async {
          _isWebViewLoading = true;
          notifyListeners();
        },
        onPageFinished: (url) async {
          log("url on finish: $url");
          _isWebViewLoading = false;
          notifyListeners();
        },
        onNavigationRequest: (navigation) async {
          if (navigation.url.contains(AppConfig.LOGOUT_URL)) {
            if (PrefUtils.getBool(SOCIAL_LOGIN) == true) {
              try {
                //logout code
              } catch (e) {}
            }

            PrefUtils.removeValue(ACCESS_TOKEN);
            PrefUtils.removeValue(USER_EMAIL);
            PrefUtils.setBool(SOCIAL_LOGIN, false);

            // redirect to login page
            Get.offAll(() => const LoginPage());
          }

          return NavigationDecision.prevent;
        },
      ))
      ..loadRequest(Uri.parse(dashboardUrl))
      ..setBackgroundColor(
          Colors.transparent); // Set background color if needed
  }
}

使用flutter_webview_plugin的代码： #

class WebProvider extends ChangeNotifier {
  final FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
  bool _isWebViewLoading = true;
  final Auth0 auth0 = Auth0(AppConfig.DOMAIN, AppConfig.CLIENTID);

  bool get isWebViewLoading => _isWebViewLoading;

  void loadWebView({String? url}) {
    final dashboardUrl = Uri.parse(AppConfig.login).replace(queryParameters: {
      'access_token': PrefUtils.getString(ACCESS_TOKEN),
      'token_type': PrefUtils.getString(TOKEN_TYPE),
      'refresh_token': PrefUtils.getString(REFRESH_TOKEN),
      'expires_in': PrefUtils.getString(EXPIRES_AT),
      'id_token': PrefUtils.getString(ID_TOKEN),
      'scope': PrefUtils.getString(SCOPES)
    }).toString();

    flutterWebviewPlugin.launch(
      dashboardUrl,
      appCacheEnabled: true,
      userAgent:
          'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Mobile Safari/537.36',
    );

    flutterWebviewPlugin.onStateChanged
        .listen((WebViewStateChanged state) async {
      if (state.type == WebViewState.startLoad) {
        _isWebViewLoading = true;
        notifyListeners();
      } else if (state.type == WebViewState.finishLoad) {
        _isWebViewLoading = false;
        notifyListeners();
      }
    });
// Additional listeners can be added as needed, such as for URL changes
    flutterWebviewPlugin.onUrlChanged.listen((String url) {
      if (url.contains(AppConfig.LOGOUT_URL)) {
        // Implement logout logic
        // Redirect to login page, etc.
      }
    });
  }

  @override
  void dispose() {
    flutterWebviewPlugin.dispose();
    super.dispose();
  }
}

问题询问 #

请问我可能哪里操作有误？或者有没有其他方法能实现应用重启后WebView更快加载？

一、可能的操作失误点 #

1. 缓存配置未完全生效

   • 对于webview_flutter，当前代码未显式配置缓存策略，默认情况下WebView不会主动持久化缓存到磁盘。需要添加缓存模式配置：

     controller = WebViewController()
       ..setCacheMode(WebViewCacheMode.LOAD_CACHE_ELSE_NETWORK) // 优先加载缓存，无缓存再请求网络
       ..setJavaScriptMode(JavaScriptMode.unrestricted)
       // 其他原有配置...
     

   • 对于flutter_webview_plugin，仅开启appCacheEnabled不够，部分设备会因系统限制自动清理缓存，需额外配置缓存持久化相关参数（如缓存大小限制）。

2. 动态URL参数导致缓存失效
   请求URL包含access_token、refresh_token等动态参数，每次生成的URL都不同，WebView会将其视为全新请求，无法复用缓存。可以：

   • 将敏感token放在HTTP请求头中，而非URL参数，保持URL主体一致；
   • 协调服务器端调整缓存策略，忽略这类动态参数或允许带参数的请求被缓存。

3. 系统平台限制

   • Android：部分开启“自动清理缓存”的机型，会在应用退出后清理缓存，需确保应用拥有存储写入权限；
   • iOS：需在Info.plist中配置NSAppTransportSecurity允许对应网页的请求，同时确认缓存目录未被标记为临时文件目录。

二、其他优化加载速度的方法 #

1. 使用flutter_inappwebview的精细缓存配置
   flutter_inappwebview提供更全面的缓存控制能力，示例配置：

   final InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
     crossPlatform: InAppWebViewOptions(
       cacheEnabled: true,
       cacheMode: CacheMode.LOAD_CACHE_ELSE_NETWORK,
     ),
     android: AndroidInAppWebViewOptions(
       domStorageEnabled: true,
       databaseEnabled: true,
       allowFileAccess: true,
     ),
   );
   
   InAppWebView(
     initialUrlRequest: URLRequest(url: Uri.parse(dashboardUrl)),
     initialOptions: options,
   )
   

2. 静态资源本地打包
   将网页的静态资源（CSS、JS、图片）打包到应用中，WebView加载时优先读取本地资源，仅请求动态内容，大幅降低加载耗时。

3. 优化服务器端缓存策略
   确保服务器返回的响应头包含正确的缓存控制字段，比如Cache-Control: public, max-age=86400，告知WebView可缓存资源的时长；动态资源可通过ETag或Last-Modified字段验证缓存有效性，避免重复请求。

内容的提问来源于stack exchange，提问作者Sohail Anwar