Expo BackgroundFetch中fetch与Firebase函数调用为何无法执行？

问题现象 #

在Expo BackgroundFetch任务中，原生fetch API和Firebase httpsCallable调用会陷入停滞，直到应用回到前台才完成响应；但相同场景下Axios请求可正常执行。

可能原因 #

1. Expo后台环境中，原生fetch的默认配置（如无超时、缓存策略）触发了系统的网络限制，导致请求挂起。
2. Firebase httpsCallable内部依赖原生fetch，因此同步出现停滞问题。
3. 后台权限配置不全，导致网络请求在后台被系统拦截。

具体解决方案 #

1. 给fetch添加超时与缓存禁用配置 #

修改fetch调用，显式设置超时时间并禁用缓存，避免后台环境下的请求挂起：

response = await fetch("https://api.ipify.org?format=json", {
  // 设置10秒超时，超时自动终止请求
  signal: AbortSignal.timeout(10000),
  // 禁用缓存，强制从服务器获取数据
  cache: 'no-store',
  headers: {
    'Cache-Control': 'no-cache'
  }
});

2. 替换Firebase Functions的fetch实现为Axios #

由于Firebase httpsCallable默认使用原生fetch，可以自定义一个基于Axios的fetch替代函数，让Firebase调用复用Axios的后台兼容逻辑：

// 封装Axios版的fetch兼容函数
const axiosFetch = async (url, options) => {
  const method = options.method || 'GET';
  let axiosResponse;

  try {
    if (method === 'GET') {
      axiosResponse = await axios.get(url, {
        params: options.body ? JSON.parse(options.body) : {},
        headers: options.headers,
        timeout: 10000
      });
    } else {
      axiosResponse = await axios({
        method,
        url,
        data: options.body ? JSON.parse(options.body) : {},
        headers: options.headers,
        timeout: 10000
      });
    }

    // 转换为fetch标准的Response对象
    return new Response(JSON.stringify(axiosResponse.data), {
      status: axiosResponse.status,
      statusText: axiosResponse.statusText,
      headers: axiosResponse.headers
    });
  } catch (error) {
    // 抛出符合fetch规范的错误
    throw new Error(`Request failed: ${error.message}`);
  }
};

// 初始化Firebase Functions时注入自定义fetch
const firebaseFunctions = getFunctions(app);
firebaseFunctions.useFetch(axiosFetch);

3. 完善后台权限配置 #

在app.json中补充必要的后台权限，确保系统允许应用在后台发起网络请求：

iOS配置

{
  "expo": {
    "ios": {
      "infoPlist": {
        "UIBackgroundModes": ["fetch", "remote-notification"]
      }
    }
  }
}

Android配置

{
  "expo": {
    "android": {
      "permissions": [
        "android.permission.RECEIVE_BOOT_COMPLETED",
        "android.permission.FOREGROUND_SERVICE",
        "android.permission.ACCESS_NETWORK_STATE"
      ]
    }
  }
}

4. 确保BackgroundFetch任务注册正确 #

在App入口组件中正确注册后台任务，配置合理的执行间隔：

import { useEffect } from 'react';
import { BackgroundFetch } from 'expo-background-fetch';
import { TaskManager } from 'expo-task-manager';

const BACKGROUND_FETCH_TASK = 'background-fetch-task';

// 任务定义需放在顶层（已满足）
TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
  await bgCall();
  return BackgroundFetch.BackgroundFetchResult.NewData;
});

export default function App() {
  useEffect(() => {
    const registerTask = async () => {
      const status = await BackgroundFetch.getStatusAsync();
      if (status === BackgroundFetch.BackgroundFetchStatus.Restricted) {
        console.log('后台获取权限受限');
        return;
      }
      await BackgroundFetch.registerTaskAsync(BACKGROUND_FETCH_TASK, {
        minimumInterval: 15, // 最小执行间隔（系统可能调整为15分钟以上）
        stopOnTerminate: false, // 应用终止后仍继续执行
        startOnBoot: true // 设备重启后自动启动任务
      });
    };

    registerTask();

    return () => {
      BackgroundFetch.unregisterTaskAsync(BACKGROUND_FETCH_TASK);
    };
  }, []);

  // ...其他组件逻辑
}

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