React项目使用Capacitor构建iOS端时chunk.js报错如何解决？

算力阿峰

2026-10-5

调试思路

定位触发代码位置：找到报错的hash.chunk.js对应的源码文件，搜索navigator.serviceWorker.addEventListener关键字，确认这段代码是否来自Firebase Web SDK的FCM初始化逻辑
验证环境差异：先在Safari浏览器打开你的React站点，确认Web端运行正常无报错；再打iOS开发包用Xcode调试，打印navigator.serviceWorker的值，确认iOS WebView下该属性为undefined
排查新增代码影响：回退Firebase集成相关代码重新构建iOS包，确认报错是否消失，锁定问题触发的具体代码段

解决方案

该错误的核心原因是iOS端Capacitor默认运行的WKWebView环境未开启Service Worker支持，而你集成的Web版Firebase通知逻辑默认会调用Service Worker相关API，针对该问题可选择以下方案处理：

区分Web端和移动端的FCM初始化逻辑

移动端不需要用Web版的Service Worker实现通知，直接用Capacitor生态的原生通知插件即可
具体操作：给Web端的Service Worker相关逻辑加环境判断，只有在浏览器环境（非Capacitor环境）下才执行初始化：

if (!window.Capacitor) {
  // 仅Web端执行Firebase Web FCM初始化、Service Worker注册相关逻辑
  navigator.serviceWorker.addEventListener('message', /* 原有逻辑 */)
}

替换移动端的通知实现：卸载Web版的FCM相关依赖，移动端统一用Capacitor官方的Firebase Messaging插件实现通知功能，完全规避Service Worker调用
兜底兼容方案：如果需要保留代码不做端侧拆分，直接在代码入口加全局兜底赋值，避免调用时报错：

if (navigator && !navigator.serviceWorker) {
  navigator.serviceWorker = {
    addEventListener: () => {},
    register: () => Promise.resolve()
  }
}