webview_flutter iOS后台运行JavaScript仅工作20秒问题求助

问题根源 #

iOS对后台应用的资源访问有严格限制：普通应用进入后台后，系统仅提供约20秒的活跃执行时间，之后会暂停所有非必要任务（包括WebView的JavaScript执行、Dart异步循环）。调试环境下iOS会放宽该限制，因此问题仅在TestFlight环境中显现；而Android的后台执行规则相对宽松，因此无此问题。

解决方案 #

1. 用后台任务断言延长执行时间 #

通过iOS原生的UIApplication.beginBackgroundTask机制（Flutter可通过插件封装调用），向系统申请延长后台活跃时间，避免循环被强制暂停。

代码示例（使用flutter_background插件）

首先在pubspec.yaml添加依赖：

dependencies:
  flutter_background: ^1.1.0

修改backgroundResearch函数：

import 'dart:io';
import 'package:flutter_background/flutter_background.dart';

Future<void> backgroundResearch() async {
  var stopOnNewLoad = context.read<AppProvider>().stopOnNewLoad;
  var stopOnPayoutChange = context.read<AppProvider>().stopOnPayoutChange;
  var payoutThreshold = context.read<AppProvider>().payoutThreshold;
  var operationOnLoad = context.read<AppProvider>().operationOnFirstLoad;

  bool backgroundActive = false;
  // 仅iOS需要申请后台任务
  if (Platform.isIOS) {
    final androidConfig = FlutterBackgroundAndroidConfig(
      notificationTitle: "后台搜索中",
      notificationText: "正在监控物品更新",
      notificationImportance: AndroidNotificationImportance.Default,
    );
    final iosConfig = FlutterBackgroundIOSConfig(
      enableBackgroundExecution: true,
      showBackgroundIndicator: false,
    );
    backgroundActive = await FlutterBackground.initialize(
      androidConfig: androidConfig,
      iosConfig: iosConfig,
    );
  }

  while (context.read<AppProvider>().research && !context.read<AppProvider>().isForeground) {
    // 每次循环检查后台任务有效性，失效则重新申请
    if (Platform.isIOS && !backgroundActive) {
      backgroundActive = await FlutterBackground.enableBackgroundExecution();
    }

    await Future.delayed(Duration(milliseconds: 3000 + Random().nextInt(50)), () {
      webController.runJavaScript("""searchForLoad($stopOnNewLoad, $stopOnPayoutChange, $payoutThreshold, "$operationOnLoad")""");
    });
  }

  // 退出循环后停止后台任务
  if (Platform.isIOS && backgroundActive) {
    await FlutterBackground.disableBackgroundExecution();
  }
}

2. 优化WebView后台配置 #

配置iOS WebView允许后台执行JavaScript，避免WebView被系统暂停：

WebViewController get webController => WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel('app_channel', onMessageReceived: (message) {
    // 处理JS消息逻辑
  })
  ..loadRequest(Uri.parse("你的网页URL"))
  ..setSettings(WebSettings(
    javaScriptEnabled: true,
    if (Platform.isIOS) {
      ios: IOSWebSettings(
        // 允许后台执行JS
        allowsBackgroundMediaPlayback: true,
        javaScriptEnabled: true,
      ),
    }
  ));

3. 迁移核心逻辑到Dart层（推荐） #

将列表对比、刷新判断等业务逻辑从JS移到Dart层，减少对WebView后台执行的依赖，提升稳定性：

• 修改JS的getAllLoad函数，将列表数据通过JS通道传递给Dart：

async function getAllLoad() {
  // 原获取列表逻辑
  const newList = document.querySelectorAll(".item").map(el => ({
    title: el.querySelector(".title").textContent,
    totalPayout: el.querySelector(".payout").textContent,
    childDivId: el.id
  }));
  // 发送列表数据到Dart
  window.app_channel.postMessage(JSON.stringify({type: 'list_data', data: newList}));
  return newList;
}

• 在Dart中处理列表对比：

// WebViewController的JS通道监听
..addJavaScriptChannel('app_channel', onMessageReceived: (JavaScriptMessage message) {
  final data = jsonDecode(message.message);
  if (data['type'] == 'list_data') {
    final newList = List<Map<String, dynamic>>.from(data['data']);
    final provider = context.read<AppProvider>();
    // Dart版对比逻辑
    final difference = findDifference(provider.oldList, newList, provider.stopOnNewLoad, provider.stopOnPayoutChange, provider.payoutThreshold);
    
    if (difference.isNotEmpty && difference[0]['childDivId'] != null && provider.research) {
      provider.setResearch(false);
      // 发送发现新物品的通知
      window.app_channel.postMessage(
        "${typeOfResult}#${difference[0]['title']}#${difference[0]['totalPayout']}#${difference[0]['payoutDifference'] ?? 0}"
      );
    } else if (provider.research) {
      // 触发刷新
      webController.runJavaScript("clickOnRefresh()");
    }
  }
});

关键注意事项 #

• TestFlight环境严格遵循iOS后台规则，调试环境会放宽限制，因此测试需在TestFlight中验证
• 即使使用后台任务断言，iOS仍会限制后台执行的总时长（最长约10分钟），若需更长时间监控，需结合特定后台模式（如定位、音频，但需符合App Store审核规则）

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