flutter如何监听webview的网速

在Flutter开发中，使用webview加载网页时，如何实时监听当前页面的网络加载速度？比如下载进度、加载耗时等数据，是否有现成的插件或API可以实现这个功能？需要兼容Android和iOS平台。

2 回复

Flutter中可使用flutter_inappwebview插件监听WebView网速。通过onProgressChanged回调获取加载进度，结合时间计算网速。也可用onLoadResource拦截请求，统计数据量计算实时网速。

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


在Flutter中监听WebView的网速可以通过以下方式实现：

方法一：使用官方webview_flutter插件（推荐）

import 'package:webview_flutter/webview_flutter.dart';

WebViewController _controller = WebViewController();

// 设置WebView
_controller
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setNavigationDelegate(NavigationDelegate(
    onProgress: (int progress) {
      // 页面加载进度，可以间接反映网速
      print('加载进度: $progress%');
    },
    onPageStarted: (String url) {
      _startTime = DateTime.now().millisecondsSinceEpoch;
    },
    onPageFinished: (String url) {
      _endTime = DateTime.now().millisecondsSinceEpoch;
      _calculateSpeed(url);
    },
  ))
  ..loadRequest(Uri.parse('https://example.com'));

int _startTime = 0;
int _endTime = 0;

void _calculateSpeed(String url) {
  final duration = _endTime - _startTime;
  print('页面加载耗时: ${duration}ms');
  
  // 如果需要更精确的网速监控，可以通过JavaScript获取资源加载信息
  _controller.runJavaScript('''
    // 获取页面所有资源加载信息
    const resources = performance.getEntriesByType("resource");
    let totalSize = 0;
    resources.forEach(resource => {
      totalSize += resource.transferSize || 0;
    });
    
    // 计算平均网速 (bytes/ms)
    const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
    const speed = totalSize / loadTime;
    
    // 发送到Flutter
    if (window.flutter_inappwebview) {
      window.flutter_inappwebview.callHandler('networkSpeed', speed);
    }
  ''');
}

方法二：使用flutter_inappwebview插件（功能更强大）

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

InAppWebViewController? webViewController;

InAppWebView(
  initialUrlRequest: URLRequest(url: WebUri('https://example.com')),
  onWebViewCreated: (controller) {
    webViewController = controller;
    
    // 添加JavaScript处理器
    controller.addJavaScriptHandler(
      handlerName: 'networkSpeed',
      callback: (args) {
        double speed = args[0];
        print('当前网速: ${speed} KB/s');
      }
    );
  },
  onLoadStart: (controller, url) {
    _startTime = DateTime.now().millisecondsSinceEpoch;
  },
  onLoadStop: (controller, url) {
    _endTime = DateTime.now().millisecondsSinceEpoch;
    _calculateDetailedSpeed(controller);
  },
);

void _calculateDetailedSpeed(InAppWebViewController controller) async {
  await controller.evaluateJavascript(source: '''
    // 获取详细的性能数据
    const perfData = performance.getEntriesByType("navigation")[0];
    const resources = performance.getEntriesByType("resource");
    
    let totalBytes = 0;
    resources.forEach(resource => {
      totalBytes += resource.transferSize || 0;
    });
    
    const loadTime = perfData.loadEventEnd - perfData.fetchStart;
    const speedKBps = (totalBytes / 1024) / (loadTime / 1000);
    
    // 回调给Flutter
    if (window.flutter_inappwebview) {
      window.flutter_inappwebview.callHandler('networkSpeed', speedKBps);
    }
    
    return {
      totalBytes: totalBytes,
      loadTime: loadTime,
      speed: speedKBps
    };
  ''');
}

注意事项：

  1. 精度限制：WebView的网速监控精度有限，主要反映页面加载性能
  2. 跨域限制：JavaScript无法获取跨域资源的详细加载信息
  3. 实时性：这种方式更适合监控页面整体加载速度，而非实时网速
  4. 权限：需要启用JavaScript支持

推荐使用flutter_inappwebview插件，它提供了更丰富的WebView功能和更好的JavaScript交互支持。

回到顶部